Chrome extension to modify page’s script includes and JS

Question

I’ve done a fair amount of Chrome extension development, and I don’t think there’s any way to edit a page source before it’s rendered by the browser. The two closest options are:

Content scripts allow you to toss in extra JavaScript and CSS files. You might be able to use these scripts to rewrite existing script tags in the page, but I’m not sure it would work out, since any script tags visible to your script through the DOM are already loaded or are being loaded.
WebRequest allows you to hijack HTTP requests, so you could have an extension reroute a request for library.js to library_dev.js.

Assuming your site is www.mysite.com and you keep your scripts in the /js directory:

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        if( details.url == "http://www.mysite.com/js/library.js" )
            return {redirectUrl: "http://www.mysite.com/js/library_dev.js" };
    },
    {urls: ["*://www.mysite.com/*.js"]},
    ["blocking"]);

The HTML source will look the same, but the document pulled in by <script src="https://stackoverflow.com/questions/10075620/library.js"></script> will now be a different file. This should achieve what you want.

Leave a Comment Cancel reply