Intercept HTTP requests

Создайте новый каталог "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("Загрузка: " + requestDetails.url);
}

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

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

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

Теперь давайте использовать webRequest для перенаправления HTTP-запросов. Во-первых, замените manifest.json на это:

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

  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://developer.mozilla.org/"
  ],

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

Единственное изменение здесь заключается в добавлении "webRequestBlocking" в permission. Мы должны запрашивать это дополнительное разрешение каждый раз, когда мы изменяем запрос.

Затем замените «background.js» следующим образом:

let pattern = "https://developer.mozilla.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"],
);

Опять же, мы используем onBeforeRequest обработчик событий для запуска функции непосредственно перед каждым запросом. Эта функция заменит целевой URL на redirectUrl указанный в функции.

На этот раз мы не перехватываем каждый запрос: опция {urls: [pattern], types: ["image"]} указывает, что мы должны перехватывать запросы (1) для URL-адресов, находящихся в разделе "https://developer.mozilla.org/" (2) для ресурсов изображения. Подробнее см. webRequest.RequestFilter.

Также обратите внимание, что мы передаём опцию "blocking": нам нужно передать это, когда мы хотим изменить запрос. Это заставляет функцию обработчика блокировать сетевой запрос, поэтому браузер ждёт, пока обработчик вернётся, прежде чем продолжить. Дополнительную информацию о "blocking" смотрите в документации webRequest.onBeforeRequest.

Чтобы проверить это, откройте страницу в MDN, которая содержит много изображений (например, https://developer.mozilla.org/ru/docs/Tools/Network_Monitor), перезагрузите расширение и перезагрузите страницу MDN :

Finally, use webRequest to modify request headers. In this example, you change 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:

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