覆盖Chrome

Question

我想用我自己版本的Chrome中类似的javascript文件覆盖一个javascript文件。

让我解释一下：

1）让我们说网站“http://example.com”称为“http://example.com/script/somescript.js”。

2）我想要做的是使用位于“http://example.com/script/somescript.js”的我自己的版本覆盖文件“http://localhost/script/somescript.js”。

3）我需要有效地修改原始Javascript文件中的函数。

谢谢： - ）

Answer 1

使用Chrome 65，这已经变得微不足道了。

Using local overrides – Chrome 65

这是什么？ 这是一项新功能，允许我们使用跨会话持久化的本地副本覆盖网站代码/ css。覆盖文件后，它将保留，直到您删除覆盖。

如何设置？

1. 打开“来源”面板。
2. 打开“替换”选项卡。 Open overrides tab
3. 单击“设置覆盖”。
4. 选择要将更改保存到的目录。
5. 在视口顶部，单击“允许”以授予DevTools对目录的读写权限。
6. 进行更改。 添加文件夹后，您可以切换到网络选项卡并右键单击任何文件，然后选择“保存以覆盖”。我已经覆盖了scripts.js，所以它显示为“蓝点”。

Answer 2

Chrome中有插件和工具用于以下目的：

1. Chrome's DevTools, tab Local Overrides（从Chrome 65支持）
2. Requestly
3. Resource Override
4. 您可能还想使用Tamper，这是一个基于mitmproxy的devtools扩展程序，可让您在本地编辑远程文件并直接将其提供给Chrome。 （但安装和使用它更令人头痛）

选择一款更易于使用的产品。

Answer 3

您可以自己创建Chrome扩展程序。如果您使用像yeoman chrome extension这样的工具，这非常容易，只需几分钟。创建一个新目录并运行生成器

yo chrome-extension

输入您的扩展程序的名称和简短说明。选择Page Action，然后选择Content Scripts。您可以忽略其他选项 - 关注this excellent guide if you come in doubt，但这非常简单。

? What would you like to call this extension? insert-script
? How would you like to describe this extension? replace a function with another function
? Would you like to use UI Action? Page Action
? Would you like more UI Features? Content Scripts
? Would you like to set permissions? 

...等。现在你有一个像这样的目录结构

app
  bower_components
  images
  _locales
  scripts.babel
      background.js
      chromereload.js
      contentscript.js

您无法用其他脚本替换现有的已加载远程脚本，因为该脚本已加载到DOM中。但是您可以在body的末尾插入一个新脚本，该脚本将覆盖您要替换的函数。函数是变量，如果向文档添加一个与现有函数同名的新函数，则将执行新函数而不是旧函数，就像您声明一个与现有变量同名的新变量一样。现在打开并修改contentscript.js：

'use strict';

console.log('\'Allo \'Allo! Content script');

代码看起来像这样

'use strict';

var code = `
    function foo() {
        alert('foo');
    }
`;

var script = document.createElement('script');
script.textContent = code;
document.body.appendChild(script);

注意template literal。我们需要将代码作为字符串插入，但使用反引号它更具可读性。将foo()替换为您要覆盖的函数。

无需部署或捆绑。您可以直接从运行生成器的路径安装扩展

1. 转到chrome://extensions
2. 检查开发者模式
3. 点击上传解压缩的扩展程序
4. 从您的路径中选择manifest.json
5. 之后，当您对contentscript.js进行更改时，您只需在扩展页面上点击重新加载。

Answer 4

您可以通过在此脚本中添加（或在控制台中执行）将文件加载到页面中。

window.onload = function () {
  var script = document.createElement('script');
  script.src = '//localhost/your/script';
  script.onload = function() {
    console.log('your script have been loaded');
  }
  document.body.appendChild(script);
}

如果要覆盖的文件包含全局函数/变量，将覆盖文件中的新版本，或者如果要覆盖的元素是命名空间，则只需按照路径（例如My.namespace.method = myNewMethod）< / p>

Answer 5

您可以使用Requestly等简单的Chrome扩展程序轻松完成此操作。以下是步骤：

1. 创建规则
2. 选择重定向规则
3. 输入来源网址等于 - http://example.com/script/somescript.js
4. 输入目的地 - http://localhost/script/somescript.js

看起来应该是这样的：



您还可以选择＆＃34;包含/匹配＆＃34;运算符取决于您的用例。

Answer 6

根据dharam的上述回答，资源覆盖有效。

对于无法访问Chrome商店的用户，您可以在此处下载源代码：

https://github.com/kylepaulsen/ResourceOverride

在Chrome中，进入chrome：// extensions /，启用开发人员模式，然后将提取的源根目录（其中包含manifest.json文件）加载到Chrome中。

在Windows 10上针对Chrome 73.0.3683.86进行了测试。由于https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js被阻止，因此我无法在StackOverflow上发布任何内容。然后在ResourceOverride的设置中，将其映射到https://localhost/jquery-1.12.4.min.js，最后有效。

我运行一个启用了SSL并启用了localhost证书的ASP.NET Core 2.1项目，以便从本地磁盘提供jquery-1.12.4.min.js。

在launchSettings.json中，有

"applicationUrl": "https://localhost:443;http://localhost:80",

在Kestral配置文件（不是IIS配置文件）中。