覆盖chrome中的Javascript文件

Question

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

让我解释:

1)让我们说网站' http://example.com '称之为' http://example.com/script/somescript.js '.

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

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

谢谢 :-)

Answer 1

使用Chrome 65,这已经变得微不足道了.

使用本地覆盖 - Chrome 65

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

如何设置？

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

Answer 2

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

1. Chrome的DevTools,标签本地覆盖(Chrome 65支持)
2. Requestly
3. 资源覆盖
4. 您可能还想使用Tamper,这是一个基于mitmproxy的devtools扩展,可让您在本地编辑远程文件并直接将其提供给Chrome.(但安装和使用它更令人头痛)

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

Answer 3

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

yo chrome-extension

输入扩展名和简短说明。选择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? 

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

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

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

yo chrome-extension

代码可能是这样的

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

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

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

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