54

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?

Peter Boughton
  • 106,461
  • 31
  • 117
  • 173
  • This is as close as I can find: http://code.google.com/chrome/extensions/content_scripts.html – Romain Hippeau Jul 18 '10 at 04:13
  • Consider changing the accepted answer. The current accepted answer has become obsolete. The [newer answer](http://stackoverflow.com/questions/3274144/can-i-modify-outgoing-request-headers-with-a-chrome-extension/9143714#9143714) is correct. – Rob W Mar 24 '14 at 23:11
  • If/when that answer is updated with an actual explanation and example of how to do it, I'll go ahead and mark it as the solution. A link alone is not an answer. – Peter Boughton Mar 24 '14 at 23:28
  • @PeterBoughton That just happened. – Xan Jan 14 '15 at 08:09
  • Also related: http://stackoverflow.com/a/29832996/748858 – mgilson Mar 08 '17 at 17:04

5 Answers5

60

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:

Headers Rule

wOxxOm
  • 53,493
  • 8
  • 111
  • 119
Sachin
  • 20,754
  • 28
  • 93
  • 162
  • 11
    I would tone down the **`ADVERTISEMENT`**. 1) You should explicitly disclose it's your own creation, 2) Maybe a huge screenshot is out of place. – Xan Jan 14 '15 at 08:11
  • 5
    @Xan I have added PPS saying "I am the author". You are right I should have done this in first place. Snapshot may/may not be out of place, I am going to be it here. If you strongly feel it should not be there, remove it. I am just fine with it. Thanks for your input. I appreciate – Sachin Jan 14 '15 at 08:49
  • 42
    Thanks blunderboy, and don't worry - your image is perfectly fine. You being the author was already self-evident from the repository link, and given that you first identified the API and showed example code (not to mention that it's an open source project), fussing over it being an "advertisement" is a pretty dumb thing to do. – Peter Boughton Mar 02 '15 at 22:50
  • 4
    Well I am happy - with Requestly I did my small test in 2 minutes which would have taken >20 minutes coding with the API. – Fletch Jul 13 '16 at 13:44
  • 2
    +1 - Using it to debug ajax, setting to Modify Headers -> Add -> Request -> "X-Requested-With" -> "XMLHttpRequest" – Theraot Aug 31 '16 at 04:10
  • @sachinjain024 I tried to use above code but it doesn't work for preflighted OPTIONS requests. Is there any way to make it work with OPTIONS request? – BiJ Dec 10 '16 at 22:42
  • @BiJ From Chrome docs - `Use the chrome.webRequest API to observe and analyze traffic and to intercept, block, or modify requests in-flight.`. OPTIONS request is a preflight request and thus Chrome does not allow modification to it. – Sachin Dec 11 '16 at 23:49
  • 1
    Um... this add-in doesn't actually work -- the sites can't see the headers you add, and if you look in the network console, you can see that the request headers were never added. – BrainSlugs83 Apr 06 '17 at 22:51
  • @BrainSlugs83 There is a chrome bug due to which you will not be able to see the modifications in response headers. Moreover, you need to check if your Url match pattern is actually right now. open an issue on github.com/requestly/requestly-issues and I will look further into it. – Sachin Apr 07 '17 at 03:12
  • I am able to do redirect/cancel requests etc with requestly but now add/delete/modify headers. Do I need to change settings as well to do it in chrome – Vikram3891 May 03 '18 at 12:26
  • @Vikram3891If you are modifying response headers, headers will be m odified by the extension but modifications are not visible in dev tool. This is a chrome bug. There is a list of headers which chrome does not allow you to modify. Please check this https://medium.com/@requestly_ext/list-of-headers-not-allowed-to-be-modified-by-chrome-extensions-c850b5c02fff. Reachout on requestly.extension@gmail.com for any issues – Sachin May 04 '18 at 09:37
  • @sachinjain024 Yep. It seems so. had to use Firefox finally. Thanks for reply. – Vikram3891 May 06 '18 at 06:53
  • 1
    Where has this been all of my life? Here's the link to Chrome & Firefox extension: http://www.requestly.in/ – P. T. Mar 26 '19 at 15:39
12

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

Idris Mokhtarzada
  • 1,034
  • 12
  • 21
Satyanarayana Manyam
  • 121
  • 1
  • 2
3

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.

Mohamed Mansour
  • 38,137
  • 10
  • 113
  • 89
3

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

Mahmoud Felfel
  • 2,645
  • 2
  • 25
  • 19
1

You could install ModHeader extension and add headers:

enter image description here

Taras Melnyk
  • 2,729
  • 3
  • 34
  • 32