MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Для перехвата  HTTP запросов используйте webRequest API. Этот API позволит вам добавлять слушателей, на различных этапах создания HTTP запросов. В слушателях вы можете:

  • получить доступ к заголовкам и телам запроса, к заголовкам ответа
  • отменять и перенаправлять запросы
  • изменять запрос и заголовки ответа

В этой статье мы рассмотрим три разных способа использования webRequest модуля:

  • Логирование URL сделанных запросов.
  • Перенаправление запросов.
  • Модификация заголовков запроса.

Логирование URL запросов

Создайте новый каталог "requests". В нём создайте файл "manifest.json" со следующим содержимым:

{
  "description": "Demonstrating webRequests",
  "manifest_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",

  "permissions": [
    "webRequest",
    "<all_urls>"
  ],

  "background": {
    "scripts": ["background.js"]
  }
}

Далее, создайте файл "background.js" со следующим содержимым:

function logURL(requestDetails) {
  console.log("Loading: " + requestDetails.url);
}

browser.webRequest.onBeforeRequest.addListener(
  logURL,
  {urls: ["<all_urls>"]}
);

Здесь мы используем onBeforeRequest для вызова функции logURL() перед началом запроса. Функция logURL() берёт URL запроса из объекта event и выводит в консоль браузера. Шаблон {urls: ["<all_urls>"]} означает, что мы будем перехватывать HTTP запросы ко всем URL.

Для проверки проинсталлируйте WebExtension, откройте консоль браузера и откройте какую-нибудь веб-страницу. В консоли вы должны увидеть URL для каждого ресурса, который запрашивает браузер:

Redirecting requests

Now let's use webRequest to redirect HTTP requests. First, replace manifest.json with this:

{

  "description": "Demonstrating webRequests",
  "manifest_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",

  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://mdn.mozillademos.org"
  ],
 
  "background": {
    "scripts": ["background.js"]
  }

}

The only change here is to add the "webRequestBlocking" permission. We need to ask for this extra permission whenever we are actively modifying a request.

Next, replace "background.js" with this:

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"]
);

Again, we use the onBeforeRequest event listener to run a function just before each request is made. This function will replace the target URL with the redirectUrl specified in the function.

This time we are not intercepting every request: the {urls:[pattern], types:["image"]} option specifies that we should only intercept requests (1) to URLs residing under "https://mdn.mozillademos.org/" (2) for image resources. See webRequest.RequestFilter for more on this.

Also note that we're passing an option called "blocking": we need to pass this whenever we want to modify the request. It makes the listener function block the network request, so the browser waits for the listener to return before continuing. See the webRequest.onBeforeRequest documentation for more on "blocking".

To test it out, open a page on MDN that contains a lot of images (for example https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor), reload the WebExtension, and then reload the MDN page:

Modifying request headers

Finally we'll use webRequest 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/".

The "manifest.json" can stay the same as in the previous example.

Replace "background.js" with code like this:

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"]
);

Here we use the onBeforeSendHeaders event listener to run a function just before the request headers are sent.

The listener function will be called only for requests to URLs matching the targetPage pattern. Also note that we've again passed "blocking" as an option. We've also passed "requestHeaders", which means that the listener will be passed an array containing the request headers that we expect to send. See webRequest.onBeforeSendHeaders for more information on these options.

The listener function looks for the "User-Agent" header in the array of request headers, replaces its value with the value of the ua variable, and returns the modified array. This modified array will now be sent to the server.

To test it out, open useragentstring.com and check that it identifies the browser as Firefox. Then reload the add-on, reload useragentstring.com, and check that Firefox is now identified as Opera:

Learn more

To learn about all the things you can do with the webRequest API, see its reference documentation.

Метки документа и участники

 Внесли вклад в эту страницу: sergeiDruzhinin, DavidWebb
 Обновлялась последний раз: sergeiDruzhinin,