使用Chrome扩展程序替换jQuery脚本

Question

A website is running a jQuery script. I want to use a Chrome Extension to have the site run my own version of the jQuery script, and not the normal one.

So far, I've managed to make the chrome extension find where the website calls the normal script, and I've replaced it with my own:

document.querySelector("script[src^='website.com/originaljqueryscript']").src = 'myjqueryscript';

As a test, I made myjqueryscript the exact same script as the originaljqueryscript. I set the run_at in the manifest to run at document_end.

When I try to open the website with my script enabled, the console logged an error $(...).dialog is not a function . I think this is because jQuery is not loaded in my chrome extension. So then I found which version of jQuery the website is using, and added that to my chrome extension. Now I get this error: $(…).dialog is not a function I believe that error is due to a conflict between the two jQuerys that have been loaded (one on the website, one from my extension).

Am I on the right track, or is there a better way to replace a websites jQuery script with my own?

Answer 1

If this is for a very specific website, loading jQuery from a specific URL, you can use webRequest API to intercept the request to jQuery and redirect it to a file bundled in your extension. Eg:

chrome.webRequest.onBeforeRequest.addListener(
  function(details) { return {redirectUrl: chrome.runtime.getUrl("js/myjquery.js")}; },
  {urls: ["https://example.com/js/jquery.js"]},
  ["blocking"]
);

(Note: this sample is very minimal; you may need to include and inspect request headers to make sure that the source page is your target site - you really don't want to replace a CDN-provided jQuery for all sites)

This assumes that the website does not use Subresource Integrity checks, however I believe that it will bypass a script-src Content Security Policy (redirect is transparent).

---

Note that .dialog() is part of jQuery UI, not core jQuery; the site presumably loads both, and you'll need to intercept both. It's possible that the site actually bundles them together.