Chrome Extension - override .js file

Question

There is a website that has a certain bug in the JS file. The JS file is only being referenced in one place:

    <script type="text/javascript" charset="utf-8" src="/r/js/no-closure/dialogs.js?v=2"></script>

I've downloaded the JS file and fixed the bug. Is there any way I can, via a chrome extension, override the /r/js/no-closure/dialogs.js with my dialogs_fixed.js?

I've tried (in background.js):

var script = $('[src*="dialogs.js"]');
script.attr("src", "dialogs_patch.js");

No luck.

Answer 1

You dont need to use the experimental webRequest for this, you could just use the beforeload event. Something like this should work....

String.prototype.endsWith = function(pattern) {
    var d = this.length - pattern.length;
    return d >= 0 && this.lastIndexOf(pattern) === d;
};

document.addEventListener('beforeload', function(event) {
if (event.url.endsWith("/r/js/no-closure/dialogs.js?v=2")){event.srcElement.src=chrome.extension.getURL("dialogs.js");}
}, true);

..put that in a content script targeting the page your interested in. And make sure you make this content script load before the page does by adding...

"run_at" : "document_start"

...to your content scripts field....

http://code.google.com/chrome/extensions/content_scripts.html

EDIT Altho it should be noted that as of Chrome 17 the web request api is no longer experimental and is a great way to do redirects.

Answer 2

You should be able to block it with experimental webRequest api:

chrome.experimental.webRequest.onBeforeRequest.addListener(function(details) { 
    return {cancel: true}; 
}, {urls: ["http://www.example.com/r/js/no-closure/dialogs.js"]}, ["blocking"]);