javascript - 用于修改页面脚本包含和 JS 的 Chrome 扩展

Question

我正在开发一个 javascript 库，客户将其包含在他们的网站上以嵌入 UI 小部件。我想要一种在客户站点上实时测试库的开发版本的方法，而不要求他们对代码进行任何更改。这将使调试问题和测试新版本变得容易。

为此，我需要更改脚本包含以指向我的开发服务器，然后重写页面中调用的 load() 方法以添加额外的参数来告诉它在进行远程调用时要指向哪个服务器.

看起来我可以使用 Chrome 扩展将 JS 添加到页面，但我没有看到任何方法可以在加载页面之前对其进行修改。我是否遗漏了什么，或者 chrome 扩展不允许执行此类操作？

Answer 1

我已经完成了大量的 Chrome 扩展程序开发，并且我认为没有任何方法可以在浏览器呈现页面源之前对其进行编辑。两个最接近的选项是:

• Content scripts 允许您添加额外的 JavaScript 和 CSS 文件。您也许可以使用这些脚本重写页面中现有的脚本标记，但我不确定它是否有效，因为通过 DOM 对您的脚本可见的任何脚本标记都已加载或正在加载。

• WebRequest 允许您劫持 HTTP 请求，因此您可以使用扩展程序重新路由 library.js 的请求。至library_dev.js .

假设您的网站是 www.mysite.com 并且您将脚本保存在/js 目录中:

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"]);

HTML 源代码看起来是一样的，但文档是由 <script src="library.js"></script> 拉入的。现在将是一个不同的文件。这应该可以达到你想要的效果。