javascript - 使用 Chrome 扩展替换 jQuery 脚本

Question

网站正在运行 jQuery 脚本。我想使用 Chrome 扩展程序让网站运行我自己版本的 jQuery 脚本，而不是普通版本。

到目前为止，我已经成功让 chrome 扩展找到网站调用普通脚本的位置，并且我已将其替换为我自己的:

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

作为测试，我使 myjqueryscript 与原始 jqueryscript 完全相同。我将 list 中的 run_at 设置为在 document_end 处运行。

当我尝试打开启用了脚本的网站时，控制台记录了错误$(...).dialog is not a function。我认为这是因为 jQuery 没有加载到我的 chrome 扩展中。然后我找到了该网站正在使用哪个版本的 jQuery，并将其添加到我的 chrome 扩展中。现在我收到此错误: $(...).dialog is not a function 我相信该错误是由于已加载的两个 jQuery 之间的冲突造成的(一个在网站上，一个来 self 的扩展) )。

我是否走在正确的轨道上，或者是否有更好的方法用我自己的 jQuery 脚本替换网站 jQuery 脚本？

Answer 1

如果这是一个非常具体的网站，从特定的 URL 加载 jQuery，您可以使用 webRequest API拦截对 jQuery 的请求并将其重定向到扩展中捆绑的文件。例如:

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

(注意:此示例非常小；您可能需要包含并检查请求 header 以确保源页面是您的目标站点 - 您确实不想为所有站点替换 CDN 提供的 jQuery)

这假设该网站不使用 Subresource Integrity检查，但我相信它将绕过 script-src 内容安全策略(重定向是透明的)。

<小时/>

请注意，.dialog() 是 jQuery UI 的一部分，而不是核心 jQuery；该网站可能会加载两者，并且您需要拦截两者。该网站可能实际上将它们捆绑在一起。