用于修改页面脚本的 Chrome 扩展包括和 JS

Question

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

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

看起来我可以使用 chrome 扩展程序将 JS 添加到页面，但我看不到在加载页面之前修改页面的任何方法。有没有我遗漏的东西，或者不允许 chrome 扩展做这种事情？

原文由 Herms 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

• _内容脚本_ 允许您加入额外的 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> 拉入的文档现在将是一个不同的文件。这应该实现你想要的。

原文由 apsillers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一种在使用 WebRequest API 将内容加载到页面之前修改内容的方法。这需要在 onBeforeRequest 侦听器返回之前将内容加载到字符串变量中。此示例适用于 javascript，但它应该同样适用于其他类型的内容。

 chrome.webRequest.onBeforeRequest.addListener(
    function (details) {
        var javascriptCode = loadSynchronously(details.url);
        // modify javascriptCode here
        return { redirectUrl: "data:text/javascript,"
                             + encodeURIComponent(javascriptCode) };
    },
    { urls: ["*://*.example.com/*.js"] },
    ["blocking"]);

loadSynchronously() 可以用常规的 XMLHttpRequest 来实现。同步加载会阻塞事件循环，在 XMLHttpRequest 中已 被弃用，但不幸的是，这种解决方案很难避免。

原文由 Lars Christian Jensen 发布，翻译遵循 CC BY-SA 3.0 许可协议