我可以使用 Chrome 扩展程序修改传出请求标头吗？

Question

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

I want to intercept HTTP requests with a Chrome Extension, and then forward it on, potentially with new/different HTTP headers - how can I do that?

Answer 1

PS: I am the author of this extension 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 experimental WebRequest API . But now they have been included officially in Chrome Extension. You can use it modify request and response headers in Chrome.

Look at this example:

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

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

Answer 2

chrome 17 支持修改请求标头 ( https://developer.chrome.com/extensions/webRequest )。

Answer 3

您正在寻找正确的地方，但拦截 HTTP 请求尚不存在，但扩展团队知道这是一个流行的请求，并希望在不久的将来某个时候使用它。

Answer 4

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

Answer 5

You could install ModHeader extension and add headers:

Answer 6

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"
  ],
  ...
}

• "<all_urls>" is for modifying all outgoing urls's headers. Restrict this for your scope of your work

Make the following changes in your background.js :

// ...

const MY_CUSTOM_RULE_ID = 1

chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: [MY_CUSTOM_RULE_ID],
    addRules: [
        {
            id: MY_CUSTOM_RULE_ID,
            priority: 1,
            action: {
                type: "modifyHeaders",
                requestHeaders: [
                    {
                        operation: "set",
                        header: "my-custom-header",
                        value: "my custom header value"
                    }
                ]
            },
            condition: {
                "resourceTypes": ["main_frame", "sub_frame"]
            },
        }
    ],
});

Result

Read the docs https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/

Answer 7

You can use WebRequest API which is now deprecated it allows you to modify request/response headers. You can upgrade your extension to Manifest V3 to be able to use DeclativeNetRequest which also supports modifying request/response headers.

Or you can install Inssman chrome extension. It allows you to modify HTTP(S) request/response headers, reqirect and block request, return custom data like HTML/CSS/JS/JSON and more. And it is open source project