Can I modify outgoing request headers with a Chrome Extension?

I can't see an answer to this in the Developer's Guide, though maybe I'm not looking in the right place.

I wa开发者_运维问答nt to intercept HTTP requests with a Chrome Extension, and then forward it on, potentially with new/different HTTP headers - how can I do that?

---

PS: I am the author of Requestly so you can blame me for anything you don't like :)

It was certainly not possible when OP asked the question but soon later Chrome released an experimental WebRequest API. But now they have been included officially in Chrome Extension. You can use it to modify request and response headers in Chrome.

Manifest V2 code

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    for (var i = 0; i < details.requestHeaders.length; ++i) {
      if (details.requestHeaders[i].name === 'User-Agent') {
        details.requestHeaders.splice(i, 1);
        break;
      }
    }
    return { requestHeaders: details.requestHeaders };
  },
  {urls: ['<all_urls>']},
  ['blocking', 'requestHeaders' /* , 'extraHeaders' */]
  // uncomment 'extraHeaders' above in case of special headers since Chrome 72
  // see https://developer.chrome.com/extensions/webRequest#life_cycle_footnote
);

Google Chrome is deprecating webRequest Blocking APIs in the Manifest V3. As per the official statement from Google on 28th Sep 2022, all extensions with Manifest v2 won't run on Chrome from June 2023 onwards. Here's an approach to Modify Request & Response headers with Manifest v3 - https://github.com/requestly/modify-headers-manifest-v3

Manifest V3 Code:

rules.ts

const allResourceTypes = 
    Object.values(chrome.declarativeNetRequest.ResourceType);

export default [
  {
    id: 1,
    priority: 1,
    action: {
      type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
      requestHeaders: [
        {
          operation: chrome.declarativeNetRequest.HeaderOperation.SET,
          header: 'x-test-request-header',
          value: 'test-value',
        },
      ]
    },
    condition: {
      urlFilter: '/returnHeaders',
      resourceTypes: allResourceTypes,
    }
  },
  {
    id: 2,
    priority: 1,
    action: {
      type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
      responseHeaders: [
        {
          operation: chrome.declarativeNetRequest.HeaderOperation.SET,
          header: 'x-test-response-header',
          value: 'test-value',
        },
      ]
    },
    condition: {
      urlFilter: 'https://testheaders.com/exampleAPI',
      resourceTypes: allResourceTypes,
    }
  },
];

background.ts

import rules from './rules';

chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: rules.map((rule) => rule.id), // remove existing rules
  addRules: rules
});

The complete source code is available in the GitHub repo - https://github.com/requestly/modify-headers-manifest-v3

If you want to use a Chrome/Firefox Extension, you can use Requestly which allows you to modify request and response headers as you wish. Have a look at this snapshot:

---

Modifying request headers ( https://developer.chrome.com/extensions/webRequest ) is supported in chrome 17.

---

You are looking at the right place, but intercepting HTTP requests does not exist yet, but the extension team is aware that it's a popular request and would like to get to it sometime in the near future.

---

Keep in mind that starting from chrome 72, some headers are not allowed unless you add extraHeaders in opt_extraInfoSpec So the above example in @sachinjain024's answer will look something like this:

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    for (var i = 0; i < details.requestHeaders.length; ++i) {
      if (details.requestHeaders[i].name === 'User-Agent') {
        details.requestHeaders.splice(i, 1);
        break;
      }
    }
    return { requestHeaders: details.requestHeaders };
  },
  {urls: ['<all_urls>']},
  [ 'blocking', 'requestHeaders', 'extraHeaders']
);

For more info, check the documentation Screenshot from the documentation https://developer.chrome.com/extensions/webRequest#life_cycle_footnote

---

For extensions using manifest version 3, you can no longer use chrome.webRequest.onBeforeSendHeaders.*. The alternative is chrome.declarativeNetRequest

Make the following changes in your manifest.json:

{
  ...
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"],
  "permissions": [
    "declarativeNetRequest"
  ],
  ...
}