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

Question

我在客户在其网站上包含的javascript库中嵌入了一个UI小部件.我想要一种在客户网站上测试开发版本库的方法,而不需要他们对代码进行任何更改.这样可以轻松调试问题并测试新版本.

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

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

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>现在将是一个不同的文件.这应该达到你想要的.

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 中已被弃用，但遗憾的是，此解决方案很难避免这种情况。