Question

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

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

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

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>引入的文档现在将是另一个文件。这应该达到你想要的效果。

Answer 2

Here's a way to modify content before it is loaded on the page using the WebRequest API. This requires the content to be loaded into a string variable before the onBeforeRequest listener returns. This example is for javascript, but it should work equally well for other types of content.

protocol AwesomeType: Equatable { }

extension Array where Element: Equatable {
    func doThing() { print("array one") }
}

extension Array where Element: AwesomeType {
    func doThing() { print("array two") }
}

extension String: AwesomeType { }

let arr = [ "Foo", "Bar", "Baz" ]

arr.doThing()

loadSynchronously() can be implemented with a regular XMLHttpRequest. Synchronous loading will block the event loop and is deprecated in XMLHttpRequest, but it is unfortunately hard to avoid with this solution.

Answer 3

您可能对Opera浏览器中提供的挂钩感兴趣。 Opera曾经有* very powerful hooks，可用于用户JavaScript文件（单文件，非常容易编写和部署）和扩展。其中一些是：

<强> BeforeExternalScript：

遇到具有src属性的脚本元素时会触发此事件。您可以检查元素，包括其src属性，更改它，向其添加更多特定事件侦听器，或者完全取消它的加载。

一个很好的技巧是取消加载，在AJAX调用中加载外部脚本，在其上执行文本替换，然后将其作为脚本标记重新注入网页，或者使用eval。

<强> window.opera.defineMagicVariable：

User JavaScripts可以使用此方法来覆盖常规脚本定义的全局变量。对被覆盖的全局名称的任何引用都将调用提供的getter和setter函数。

<强> window.opera.defineMagicFunction：

User JavaScripts可以使用此方法来覆盖常规脚本定义的全局函数。任何被覆盖的全局名称调用都将调用提供的实现。

*：Opera最近切换到Webkit引擎，似乎他们已经删除了一些这些钩子。不过，你仍然可以在他们的网站上找到Opera 12的下载。

Answer 4

我有一个主意，但我没有尝试过，但它在理论上可行。

运行在加载文档之前执行的content_script，并注册ServiceWorker以实时替换页面请求的文件内容。（ServiceWorker可以拦截页面中的所有请求，包括直接通过dom发起的请求）

Answer 5

它不是Chrome扩展程序，但Fiddler可以将脚本更改为指向您的开发服务器（有关Fiddler作者的设置说明，请参阅this answer）。此外，使用Fiddler，您可以设置搜索并替换以添加所需的额外参数。

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

5 个答案: