Modify HTTP responses from a Chrome extension

Is it possible to create a Chrome extension that modifies HTTP response bodies?

I have looked in the Chrome Extension APIs, but I haven't found anything to do this.

In general, you cannot change the response body of a HTTP request using the standard Chrome extension APIs.

This feature is being requested at 104058: WebRequest API: allow extension to edit response body. Star the issue to get notified of updates.

If you want to edit the response body for a known XMLHttpRequest, inject code via a content script to override the default XMLHttpRequest constructor with a custom (full-featured) one that rewrites the response before triggering the real event. Make sure that your XMLHttpRequest object is fully compliant with Chrome's built-in XMLHttpRequest object, or AJAX-heavy sites will break.

In other cases, you can use the chrome.webRequest or chrome.declarativeWebRequest APIs to redirect the request to a data:-URI. Unlike the XHR-approach, you won't get the original contents of the request. Actually, the request will never hit the server because redirection can only be done before the actual request is sent. And if you redirect a main_frame request, the user will see the data:-URI instead of the requested URL.

I just released a Devtools extension that does just that :)

It's called tamper, it's based on mitmproxy and it allows you to see all requests made by the current tab, modify them and serve the modified version next time you refresh.

It's a pretty early version but it should be compatible with OS X and Windows. Let me know if it doesn't work for you.

You can get it here http://dutzi.github.io/tamper/

How this works

As @Xan commented below, the extension communicates through Native Messaging with a python script that extends mitmproxy.

The extension lists all requests using chrome.devtools.network.onRequestFinished.

When you click on of the requests it downloads its response using the request object's getContent() method, and then sends that response to the python script which saves it locally.

It then opens file in an editor (using call for OSX or subprocess.Popen for windows).

The python script uses mitmproxy to listen to all communication made through that proxy, if it detects a request for a file that was saved it serves the file that was saved instead.

I used Chrome's proxy API (specifically chrome.proxy.settings.set()) to set a PAC as the proxy setting. That PAC file redirect all communication to the python script's proxy.

One of the greatest things about mitmproxy is that it can also modify HTTPs communication. So you have that also :)

Like @Rob w said, I've override XMLHttpRequest and this is a result for modification any XHR requests in any sites (working like transparent modification proxy):

var _open = XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, URL) {
    var _onreadystatechange = this.onreadystatechange,
        _this = this;

    _this.onreadystatechange = function () {
        // catch only completed 'api/search/universal' requests
        if (_this.readyState === 4 && _this.status === 200 && ~URL.indexOf('api/search/universal')) {
            try {
                //////////////////////////////////////
                // THIS IS ACTIONS FOR YOUR REQUEST //
                //             EXAMPLE:             //
                //////////////////////////////////////
                var data = JSON.parse(_this.responseText); // {"fields": ["a","b"]}

                if (data.fields) {
                    data.fields.push('c','d');
                }

                // rewrite responseText
                Object.defineProperty(_this, 'responseText', {value: JSON.stringify(data)});
                /////////////// END //////////////////
            } catch (e) {}

            console.log('Caught! :)', method, URL/*, _this.responseText*/);
        }
        // call original callback
        if (_onreadystatechange) _onreadystatechange.apply(this, arguments);
    };

    // detect any onreadystatechange changing
    Object.defineProperty(this, "onreadystatechange", {
        get: function () {
            return _onreadystatechange;
        },
        set: function (value) {
            _onreadystatechange = value;
        }
    });

    return _open.apply(_this, arguments);
};

for example this code can be used successfully by Tampermonkey for making any modifications on any sites :)

Yes. It is possible with the chrome.debugger API, which grants extension access to the Chrome DevTools Protocol, which supports HTTP interception and modification through its Network API.

This solution was suggested by a comment on Chrome Issue 487422:

> For anyone wanting an alternative which is doable at the moment, you can use chrome.debugger in a background/event page to attach to the specific tab you want to listen to (or attach to all tabs if that's possible, haven't tested all tabs personally), then use the network API of the debugging protocol. > > The only problem with this is that there will be the usual yellow bar at the top of the tab's viewport, unless the user turns it off in chrome://flags.

First, attach a debugger to the target:

chrome.debugger.getTargets((targets) => {
    let target = /* Find the target. */;
    let debuggee = { targetId: target.id };

    chrome.debugger.attach(debuggee, "1.2", () => {
        // TODO
    });
});

Next, send the Network.setRequestInterceptionEnabled command, which will enable interception of network requests:

chrome.debugger.getTargets((targets) => {
    let target = /* Find the target. */;
    let debuggee = { targetId: target.id };

    chrome.debugger.attach(debuggee, "1.2", () => {
        chrome.debugger.sendCommand(debuggee, "Network.setRequestInterceptionEnabled", { enabled: true });
    });
});

Chrome will now begin sending Network.requestIntercepted events. Add a listener for them:

chrome.debugger.getTargets((targets) => {
    let target = /* Find the target. */;
    let debuggee = { targetId: target.id };

    chrome.debugger.attach(debuggee, "1.2", () => {
        chrome.debugger.sendCommand(debuggee, "Network.setRequestInterceptionEnabled", { enabled: true });
    });

    chrome.debugger.onEvent.addListener((source, method, params) => {
        if(source.targetId === target.id && method === "Network.requestIntercepted") {
            // TODO
        }
    });
});

In the listener, params.request will be the corresponding Request object.

Send the response with Network.continueInterceptedRequest:

• Pass a base64 encoding of your desired HTTP raw response (including HTTP status line, headers, etc!) as rawResponse.
• Pass params.interceptionId as interceptionId.

Note that I have not tested any of this, at all.

While Safari has this feature built-in, the best workaround I've found for Chrome so far is to use Cypress's intercept functionality. It cleanly allows me to stub HTTP responses in Chrome. I call cy.intercept then cy.visit(<URL>) and it intercepts and provides a stubbed response for a specific request the visited page makes. Here's an example:

cy.intercept('GET', '/myapiendpoint', {
  statusCode: 200,
  body: {
    myexamplefield: 'Example value',
  },
})
cy.visit('http://localhost:8080/mytestpage')

Note: You may also need to configure Cypress to disable some Chrome-specific security settings.

Chrome doesn't provide any APIs to modify the response body. This is neither possible with Chrome WebRequest API nor DeclarativeNetRequest API.

Using Desktop App - Modify Response for any request type

Requestly Desktop App offers this capability to create Modify HTTP Response Rule and then you can use that in any browser. Here's the demo video. Here are the steps to do it

1. Install Requestly Desktop App & Launch your browser from Connected Apps
2. Go to HTTP Rules and Create a Modify HTTP Response Rule
3. Define your URL Pattern and define your custom response

You can define your custom response in 3 ways

1. Static Content - Fixed Response you need
2. Progamatic Override - If you need to override something in the existing server response
3. Load from file - Define your response in the local file and map it here.

Not only this, but You can also change the HTTP Status code to 400 or 500 using this approach.

Here's a screenshot - An example of overriding existing response using JS Code

Using Requestly Chrome Extension - Modify Response for only XHR/fetch requests

One can also use Requestly Chrome Extension to modify the response of HTTP Requests triggered by XHR/fetch only. Here's the demo video using Chrome Extension

Since Chrome doesn't provide any API, Requestly overrides the XHR and fetch prototype object to hook the custom implementation and you'd get the response you have defined in the Requestly response modification rule. You can read more about it in the docs.

PS: I built Requestly

If I want to quickly mock a response, usually because my local data doesn't have a live response I need for instance... use chrome extension Tweak! It's free for up to twelve URL's to intercept:

https://tweak-extension.com/

Put in your URL and specify the Get/Post and the paste in your response. Perfect for quick bug recreations etc.