1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: Intercept HTTP requests
slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests
translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests
---
<div>{{AddonSidebar}}</div>
<ul>
<li>
<h2 id="Для_перехвата_HTTP_запросов_используйте_WebExtAPIRefwebRequest_API._Этот_API_позволит_вам_добавлять_обработчики_на_различных_этапах_создания_HTTP_запросов._В_обработчиках_вы_можете">Для перехвата HTTP запросов используйте {{WebExtAPIRef("webRequest")}} API. Этот API позволит вам добавлять обработчики, на различных этапах создания HTTP запросов. В обработчиках вы можете:</h2>
</li>
<li>получить доступ к заголовкам и телам запроса, к заголовкам ответа</li>
<li>отменять и перенаправлять запросы</li>
<li>изменять запрос и заголовки ответа</li>
</ul>
<p>В этой статье мы рассмотрим три разных способа использования <code>webRequest</code> модуля:</p>
<ul>
<li>Логирование URL сделанных запросов.</li>
<li>Перенаправление запросов.</li>
<li>Модификация заголовков запроса.</li>
</ul>
<h2 id="Логирование_URL_запросов">Логирование URL запросов</h2>
<p>Создайте новый каталог "requests". В нём создайте файл "manifest.json" со следующим содержимым:</p>
<pre class="brush: json notranslate">{
"description": "Demonstrating webRequests",
"manifest_version": 2,
"name": "webRequest-demo",
"version": "1.0",
"permissions": [
"webRequest",
"<all_urls>"
],
"background": {
"scripts": ["background.js"]
}
}</pre>
<p>Далее, создайте файл "background.js" со следующим содержимым:</p>
<pre class="brush: js notranslate">function logURL(requestDetails) {
console.log("Loading: " + requestDetails.url);
}
browser.webRequest.onBeforeRequest.addListener(
logURL,
{urls: ["<all_urls>"]}
);
</pre>
<p>Здесь мы используем {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} для вызова функции <code>logURL()</code> перед началом запроса. Функция <code>logURL()</code> берёт URL запроса из объекта event и выводит в консоль браузера. <a href="/en-US/Add-ons/WebExtensions/Match_patterns">Шаблон</a> <code>{urls: ["<all_urls>"]}</code> означает, что мы будем перехватывать HTTP запросы ко всем URL.</p>
<p>Для проверки <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">проинсталлируйте WebExtension</a>, <a href="/en-US/docs/Tools/Browser_Console">откройте консоль браузера</a> и откройте какую-нибудь веб-страницу. В консоли вы должны увидеть URL для каждого ресурса, который запрашивает браузер:</p>
<p>{{EmbedYouTube("X3rMgkRkB1Q")}}</p>
<h2 id="Перенаправление_запросов">Перенаправление запросов</h2>
<p>Теперь давайте использовать <code>webRequest</code> для перенаправления HTTP-запросов. Во-первых, замените manifest.json на это:</p>
<pre class="brush: json notranslate">{
"description": "Demonstrating webRequests",
"manifest_version": 2,
"name": "webRequest-demo",
"version": "1.0",
"permissions": [
"webRequest",
"webRequestBlocking",
"https://mdn.mozillademos.org"
],
"background": {
"scripts": ["background.js"]
}
}</pre>
<p class="result">Единственное изменение здесь заключается в добавлении <code>"webRequestBlocking"</code> в <code>permission</code>. Мы должны запрашивать это дополнительное разрешение каждый раз, когда мы изменяем запрос.</p>
<p>Затем замените «background.js» следующим образом:</p>
<pre class="brush: js notranslate">var pattern = "https://mdn.mozillademos.org/*";
function redirect(requestDetails) {
console.log("Redirecting: " + requestDetails.url);
return {
redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
};
}
browser.webRequest.onBeforeRequest.addListener(
redirect,
{urls:[pattern], types:["image"]},
["blocking"]
);</pre>
<p class="result">Опять же, мы используем {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} обработчик событий для запуска функции непосредственно перед каждым запросом. Эта функция заменит целевой URL на <code>redirectUrl</code> указанный в функции.</p>
<p class="result">На этот раз мы не перехватываем каждый запрос: опция <code>{urls: [pattern], types: ["image"]}</code> указывает, что мы должны перехватывать запросы (1) для URL-адресов, находящихся в разделе «https://mdn.mozillademos.org / "(2) для ресурсов изображения. Подробнее см. {{WebExtAPIRef ("webRequest.RequestFilter")}}.</p>
<p>Также обратите внимание, что мы передаём опцию <code>"blocking"</code>: нам нужно передать это, когда мы хотим изменить запрос. Это заставляет функцию обработчика блокировать сетевой запрос, поэтому браузер ждёт, пока обработчик вернётся, прежде чем продолжить. Дополнительную информацию о <code>"blocking"</code> смотрите в документации {{WebExtAPIRef ("webRequest.onBeforeRequest")}}.</p>
<p>Чтобы проверить это, откройте страницу в MDN, которая содержит много изображений (например, https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor), перезагрузите WebExtension и перезагрузите страницу MDN :</p>
<p>{{EmbedYouTube("ix5RrXGr0wA")}}</p>
<h2 id="Modifying_request_headers">Modifying request headers</h2>
<p>Finally we'll use <code>webRequest</code> to modify request headers. In this example we'll modify the "User-Agent" header so the browser identifies itself as Opera 12.16, but only when visiting pages under http://useragentstring.com/".</p>
<p>The "manifest.json" can stay the same as in the previous example.</p>
<p>Replace "background.js" with code like this:</p>
<pre class="brush: js notranslate">var targetPage = "http://useragentstring.com/*";
var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
function rewriteUserAgentHeader(e) {
for (var header of e.requestHeaders) {
if (header.name.toLowerCase() == "user-agent") {
header.value = ua;
}
}
return {requestHeaders: e.requestHeaders};
}
browser.webRequest.onBeforeSendHeaders.addListener(
rewriteUserAgentHeader,
{urls: [targetPage]},
["blocking", "requestHeaders"]
);</pre>
<p>Here we use the {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} event listener to run a function just before the request headers are sent.</p>
<p>The listener function will be called only for requests to URLs matching the <code>targetPage</code> <a href="/en-US/Add-ons/WebExtensions/Match_patterns">pattern</a>. Also note that we've again passed <code>"blocking"</code> as an option. We've also passed <code>"requestHeaders"</code>, which means that the listener will be passed an array containing the request headers that we expect to send. See {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} for more information on these options.</p>
<p>The listener function looks for the "User-Agent" header in the array of request headers, replaces its value with the value of the <code>ua</code> variable, and returns the modified array. This modified array will now be sent to the server.</p>
<p>To test it out, open <a href="http://useragentstring.com/">useragentstring.com</a> and check that it identifies the browser as Firefox. Then reload the add-on, reload <a href="http://useragentstring.com/">useragentstring.com</a>, and check that Firefox is now identified as Opera:</p>
<p>{{EmbedYouTube("SrSNS1-FIx0")}}</p>
<h2 id="Learn_more">Learn more</h2>
<p>To learn about all the things you can do with the <code>webRequest</code> API, see its <a href="/en-US/Add-ons/WebExtensions/API/WebRequest">reference documentation</a>.</p>
|
