覆盖chrome中的Javascript文件

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中有插件和工具用于以下目的：

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

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

Answer 2

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

Using local overrides – Chrome 65

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

如何设置？

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

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）

Answer 5

您可以使用像Requestly这样的简单镀铬扩展来轻松完成此操作。以下是步骤：

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

它应该看起来像这样：

您也可以根据您的使用情况选择“包含/匹配”操作符。

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的ASP.NET Core 2.1项目，并启用了localhost证书，以便从本地磁盘提供jquery-1.12.4.min.js。

在launchSettings.json中，有

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

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