29

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

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

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

4

6 回答 6

36

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

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

  • WebRequest允许您劫持 HTTP 请求，因此您可以让扩展重新路由对library.jstolibrary_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>现在将是一个不同的文件。这应该达到你想要的。

于 2012-04-09T17:00:10.493 回答
4

这是一种在使用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 中已被弃用，但不幸的是，这种解决方案很难避免。

于 2016-02-12T21:53:06.823 回答
2

在更改页面内容（无论是 HTML 内容还是脚本）方面，Chrome 扩展程序都有技术限制。解决此问题的最简单方法是拦截 HTML 并允许开发人员务实地覆盖 HTML/JS 响应内容。

这可以通过Requestly 桌面应用程序实现

使用 Requestly 桌面应用程序

  1. 安装 Requestly 桌面应用程序
  2. 打开连接的应用程序并启动任何浏览器 - Chrome、Firefox 等
  3. 转到 HTTP 规则并创建一个新的修改响应规则

选择以编程方式覆盖 HTML 页面的内容。编写一个简单的 JS 脚本，在现有 HTML/JS 响应之上进行修改。

这是您如何执行此操作的示例屏幕截图。 请求修改响应规则

使用 Requestly Chrome 扩展程序

如果重定向脚本 URL 和插入新脚本足以满足您的用例，那么您还可以使用 Requestly Chrome 扩展并创建两个规则

  1. 重定向规则- 使用开发脚本重定向生产脚本
  2. 插入脚本规则- 在页面上注入脚本

免责声明 - 我请求构建。

于 2022-02-21T09:54:46.603 回答
1

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

在外部脚本之前：

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

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

window.opera.defineMagicVariable：

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

window.opera.defineMagic函数：

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

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

于 2013-12-22T11:48:34.773 回答
0

我有一个想法，但我没有尝试，但它在理论上可行。

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

于 2020-05-14T03:58:54.643 回答
-2

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

于 2014-12-16T18:18:17.837 回答