Associate a custom user agent to a specific Google Chrome page/tab

google-chrome, google-chrome-extension, http-headers, javascript, user-agent

Solution

The `webRequest` API can be used to modify the User Agent header. Note: The Network tab at the Developer tools show the old headers. I've verified that the headers are set correctly, using netcat (`nc -l 127.0.0.1 -p 6789`).

In the example below, the code activates on all tabs. Adjust the request filter to meet your requirements. Add `tabId` to limit the functionality to this filter, with the tabId of your tabs (obtainable through various APIs, `chrome.tabs` in particular).

`background.js`

chrome.webRequest.onBeforeSendHeaders.addListener(
    function(info) {
        // Replace the User-Agent header
        var headers = info.requestHeaders;
        headers.forEach(function(header, i) {
            if (header.name.toLowerCase() == 'user-agent') { 
                header.value = 'Spoofed UA';
            }
        });  
        return {requestHeaders: headers};
    },
    // Request filter
    {
        // Modify the headers for these pages
        urls: [
            "http://stackoverflow.com/*",
            "http://127.0.0.1:6789/*"
        ],
        // In the main window and frames
        types: ["main_frame", "sub_frame"]
    },
    ["blocking", "requestHeaders"]
);

`manifest.json`

{
  "name": "WebRequest UA test",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking", "http://*/*"],
  "background": {
    "scripts": ["background.js"]
  },
  "manifest_version": 2
}

Documentation

- `chrome.webRequest.onbeforeSendHeaders` event

- The Request filter

Problem

I'm developing a Google Chrome extension and I'd like to set up a specific user agent to a tab/page, or to a popup (iframe shown as a "bubble popup"), without affecting other pages or tabs. Is it possible?

Original source