覆盖 chrome 中的 Javascript 文件

Override Javascript file in chrome

提问by wenn32

I would like to override a javascript file with my own version of the similar javascript file in chrome.

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

Let me explain:

让我解释：

1) Lets say a site 'http://example.com' calls 'http://example.com/script/somescript.js'.

1) 假设一个站点“ http://example.com”调用“ http://example.com/script/somescript.js”。

2) What I would like to do is override the file 'http://example.com/script/somescript.js' with my own version located at 'http://localhost/script/somescript.js'.

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

3) I need to effectively modify a function in the original Javascript file.

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

Thank You :-)

谢谢你 ：-）

回答by dharam

With Chrome 65 this has become trivial.

对于 Chrome 65，这已经变得微不足道了。

Using local overrides – Chrome 65

使用本地覆盖 – Chrome 65

What is it?It is a new feature that allows us to override a websites code/css with a local copy that is persisted across sessions. Once you override a file it shall remain until you remove the override.

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

How to set it up?

如何设置？

1. Open the?Sources?panel.
2. Open the?Overrides?tab. Open overrides tab
3. Click?Setup Overrides.
4. Select which directory you want to save your changes to.
5. At the top of your viewport, click?Allow?to give DevTools read and write access to the directory.
6. Make your changes. After you add a folder you can switch to the network tab and right click on any file and select “Save for overrides”. I have already overridden scripts.js so it shows with a “blue dot”.

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

回答by Farside

There are plugins and tools in Chrome for these purposes:

Chrome 中有用于这些目的的插件和工具：

1. Chrome's DevTools, tab Local Overrides(supported from Chrome 65)
2. Requestly
3. Resource Override
4. You might also want to use Tamper, which is a mitmproxy based devtools extension that lets you edit remote files locally and serve them directly to Chrome. (but it's more headache to install and use it)

1. Chrome 的DevTools，选项卡Local Overrides（Chrome 65 支持）
2. 请求
3. 资源覆盖
4. 您可能还想使用Tamper，它是一个基于 mitmproxy 的 devtools 扩展，可让您在本地编辑远程文件并将它们直接提供给 Chrome。（不过安装使用比较头疼）

Choose the one which is easier to use for you.

选择对您来说更容易使用的一种。

回答by davidkonrad

You can create a chrome extension yourself. It is surprisingly easy and takes only a few minutes if you use a tool like yeoman chrome extension. Create a new directory and run the generator

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

yo chrome-extension

Enter a name for your extension and a short description. Select Page Actionand that you want to use Content Scripts. You can ignore other options - follow this excellent guide if you come in doubt, but it is really straight forward.

输入扩展名和简短说明。选择Page Action您要使用的Content Scripts。您可以忽略其他选项 -如果您有疑问，请遵循这个优秀的指南，但它真的很简单。

? 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? 

..etc. Now you have a directory structure like this

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

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

You cannotreplace an existing loaded remote script with another script, since the script already is loaded into the DOM. But you can insert a new script at the end of body which overrides the function you want to replace. Functions is variables, if you add a new function to the document with the same name as an existing function, the new function will be executed instead of the old, exactly as if you declared a new variable with the same name as an existing variable. Now open and edit contentscript.js:

您不能用另一个脚本替换现有的已加载远程脚本，因为该脚本已加载到 DOM 中。但是您可以在 body 的末尾插入一个新脚本，它会覆盖您要替换的函数。函数是变量，如果你向文档中添加一个与现有函数同名的新函数，新函数将代替旧函数被执行，就像你声明了一个与现有变量同名的新变量一样。现在打开并编辑contentscript.js：

'use strict';

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

The code could look like this

代码可能是这样的

'use strict';

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

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

Notice the template literal. We need to insert the code as a string, but with backticks it is more readable. Replace foo()with the function you want to override.

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

There is no need for deployment or bundling. You can install your extension right away from the path where you runned the generator

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

1. go to chrome://extensions
2. check developer mode
3. click upload unpacked extension
4. select manifest.jsonfrom your path
5. after that you just have to hit reload on the extensions page when you have made changes to contentscript.js.

1. 去 chrome://extensions
2. 检查开发者模式
3. 点击上传解压扩展
4. manifest.json从您的路径中选择
5. 之后，您只需在对contentscript.js.

回答by Raulucco

you can load your file into the page by adding (or executing in the console) this script.

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

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);
}

If the file that you want to override contains global functions/variables will be override with the new version in your file or if the elements that you want to override are namespaced just follow the path (e.g My.namespace.method = myNewMethod)

如果要覆盖的文件包含全局函数/变量将被文件中的新版本覆盖，或者如果要覆盖的元素具有命名空间，只需遵循路径（例如My.namespace.method = myNewMethod）

回答by sachinjain024

You can do this very easily with a simple chrome extension like Requestly. Here are the steps:

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

1. Create a Rule
2. Select Redirect Rule
3. Enter Source Url Equals - http://example.com/script/somescript.js
4. Enter destination - http://localhost/script/somescript.js

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

It should look something like this:

它应该是这样的：

You can also select "Contains/Matches" operator depending upon your use case.

您还可以根据您的用例选择“包含/匹配”运算符。

回答by jw_

According to dharam's answer above,Resource Override works.

根据上面 dharam 的回答，Resource Override 有效。

For people who doesn't have access to Chrome store,you can download the source here:

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

https://github.com/kylepaulsen/ResourceOverride

https://github.com/kylepaulsen/ResourceOverride

in Chrome,get into chrome://extensions/ ,enable developer mode,then load the extracted source root directory(which contains the file manifest.json) into Chrome.

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

tested for Chrome 73.0.3683.86 on Windows 10 .I can't post anything on StackOverflow before because https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.jsis blocked.Then in the settings of ResourceOverride,I map it to https://localhost/jquery-1.12.4.min.jsand it finally works.

在 Windows 10 上针对 Chrome 73.0.3683.86 进行了测试。我之前无法在 StackOverflow 上发布任何内容，因为https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js被阻止。然后在ResourceOverride 的设置，我将其映射到https://localhost/jquery-1.12.4.min.js，它终于可以工作了。

I run an ASP.NET Core 2.1 project with SSL enabled and localhost certificate enabled to serve jquery-1.12.4.min.js from local disk.

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

In the launchSettings.json,there is

在launchSettings.json中，有

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

in the Kestral profile(not IIS profile).

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