Chrome extension, replace HTML in response code before browser displays it

Question

i wonder if there is some way to do something like that: If im on a specific site i want that some of javascript files to be loaded directly from my computer (f.e. file:///c:/test.js), not from the server.

For that i was thinking if there is a possibility to make an extension which could change HTML code in a response which browser gets right before displaying it. So whole process should look like that:

1. request is made
2. browser gets response from server
3. #response is changed# - this is the part when extension comes in
4. browser parse changed response and display page with that new response.

It doesnt even have to be a Chrome extension anyway. It should just do the job described above. It can block original file and serve another one (DNS/proxy?) or filter whole HTTP traffic in my computer and replace specific code to another one of matched response.

Answer 1

You can use the WebRequest API to achieve that. For example, you can add a onBeforeRequest listener and redirect some requests:

chrome.webRequest.onBeforeRequest.addListener(function(details)
{
  var responseData = "<div>Some text</div>"
  return {redirectUrl: "data:text/html," + encodeURIComponent(responseData)};
}, {urls: ["https://www.google.com/"]}, ["blocking"]);

This will display a <div> element with the text "some text" instead of the Google homepage. Note that you can only redirect to URLs that the web server itself is allowed to redirect to. This means that redirecting to file:/// URLs is not possible, and you can only redirect to files inside your extension if these are web accessible. data: and http: URLs work fine however.