Interceptando requisições HTTP

Crie um novo diretório chamado "requests". Neste diretório, crie um arquivo chamado "manifest.json" com seguinte conteúdo:

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

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

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

A seguir, crie um arquivo chamado"background.js" com o seguinte conteúdo:

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

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

Aqui vamos usar onBeforeRequest para chamar a função logURL() antes do inicio da requisição. A função logURL() guarda a URL da requisição para o objeto event e efetua log no console do navegador. O padrão {urls: ["<all_urls>"]} significa que iremos interceptar as requisições HTTP para todas URLs.

Para testá-lo, instale a extensão, abra o console do navegador, e abra alguma página da internet. No console do navegador você pode ver as URLs para alguns recursos que o navegador requisita:

Agora vamos usar o webRequest para redirecionar requisições HTTP. Primeiro, substitua o manifest.json com o seguinte conteúdo:

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

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

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

A única alteração aqui é a adição da permissão "webRequestBlocking". Precisamos invocar esta permissão extra toda vez que estamos ativamente modificando a requisição.

A seguir, substitua o "background.js" com o seguinte conteúdo:

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

Novamente vamos usar event listener onBeforeRequest apenas para executar a função antes que cada requisição seja feita. Está função irá substituir a URL desejada com o redirectUrl especificado na função.

Desta vez não estamos interceptando cada requisição: a opção {urls:[pattern], types:["image"]} especifica apenas o que deveria interceptar requisições(1) para URLs residindo sob o "https://mdn.mozillademos.org/" (2) para o recurso de imagens. Veja mais em webRequest.RequestFilter.

Observe também que estamos passando uma opção chamada "blocking": precisamos informá-la toda vez que desejamos modificar a requisição. Isto faz com que a função bloqueie a requisição de rede, então o navegador espera pelo event listener retornar antes de continuar. Veja a documentação webRequest.onBeforeRequest para mais no "blocking".

Teste abrindo uma página no MDN que possua muitas imagens (por exemplo https://developer.mozilla.org/pt-BR/docs/Tools/Network_Monitor), recarregue a extensão e então recarregue a página:

Finalmente iremos utilizar webRequest para modificar os cabeçalhos da requisição. Neste example iremos modificar o cabeçalho "User-Agent" que identifica o navegador como Opera 12.16, mas apenas quando visitamos páginas sob "http://useragentstring.com/".

O "manifest.json" pode permanecer do mesmo jeito.

Modifique o "background.js" com este código:

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) {
  e.requestHeaders.forEach(function (header) {
    if (header.name.toLowerCase() == "user-agent") {
      header.value = ua;
    }
  });
  return { requestHeaders: e.requestHeaders };
}

browser.webRequest.onBeforeSendHeaders.addListener(
  rewriteUserAgentHeader,
  { urls: [targetPage] },
  ["blocking", "requestHeaders"],
);

Aqui vamos usar event listener onBeforeSendHeaders para executar a função somente quando os cabeçalhos forem enviados.

O event listener será chamada somente para requisitar as URLs que batem com o padrão. Observe também que passamos novamente "blocking" como uma opção. Passamos também "requestHeaders", que significa que o listener será passado como um array contendo os cabeçalhos da requisição que desejamos enviar. Veja webRequest.onBeforeSendHeaders para mais informações dessas opções.

A função listener procura pelo cabeçalho "User-Agent" no array de cabeçalhos da requisição, substitui seu valor com o valor ua da variável, e retorna o array modificado. Este array modificado será agora enviado para o servidor.

Teste abrindo useragentstring.com e veja como ele identifica o navegador como sendo o Firefox. Então, recarregue a extensão, recarregue também o useragentstring.com e veja que agora o Firefox é identificado como Opera:

Para aprender sobre todas as coisas que você pode fazer com a API webRequest, veja sua documentação de referência.