Question

我正在使用Chrome浏览器，而我正在尝试编辑直接驻留在HTML文件中的正在运行的JavaScript（HTML文件由外部主机提供）。我希望它像改变HTML / CSS一样简单，是的我知道JavaScript是不同的，因为它是有状态的，它无法与HTML / CSS进行比较，但Chrome仍然支持更改外部js文件，它只是不喜欢当你篡改内联JavaScript。

我已经考虑过的可能的解决方案：

Greasemonkey / TamperMonkey /在运行时注入我自己的：无法解决我的问题，因为脚本嵌套在匿名范围内，无法从外部访问。
中间代理人：从长远来看是不可行的，只需要为我必须做的事情设置就太多了（我会把它作为最后的手段）。

我该如何解决这个问题？

Answer 1

修改Javascript

可以使用acorn解析Javascript 或esprima。

结果是ESTree（也称为Mozilla Parser API）格式的AST。

然后您可以对AST进行修改。 estraverse和其他estools项目可能会有所帮助。

有关自动修改第三方Javascript的一些指导原则：

您不希望在代码中抛出错误，向上传播并影响其他代码。此外，您几乎总是希望收到有关此类错误的通知。因此，您应该使用try-catch块包围所有注入的代码。
如果在注入的代码中声明变量，则不希望它们干扰其他代码（可以通过var hoisting发生）。因此，您应该将所有注入的代码包装在IIFE 。
尽量避免在注入的代码中修改任何内容或导致任何副作用。这将使您更难以检测到修改。

完成后，使用escodegen将AST转换回Javascript代码。

设计代理

由于显然您无法在运行时修改Javascript，因此必须在运行之前 - 在加载之前对其进行修改。因此，您将需要一个中间人的HTTP代理。

由于您将使用Javascript库，例如acorn和escodegen，因此代理也必须使用Javascript编写。更具体地说，Node.js

浏览器将从代理请求完整的URL。例如，如果有http://www.google.com的请求，Chrome会向代理发送此类内容：

GET http://www.google.com HTTP/1.1
Host: www.google.com
Proxy-Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

当代理收到请求时，它应该向源服务器发出相同的请求，代理它收到的大多数标头。它应删除浏览器发送的Host，Remote-Addr，Http-Client-IP和Proxy-Connection标头，因为这些标头适用于代理。它还应该将Accept-Encoding: identity发送到源服务器，以禁用HTTP压缩，这很难处理。

代理下载了原始资源后，可能会以任何方式对其进行修改，然后再将其发送回浏览器。

配置Chrome以使用代理

出于显而易见的原因，您不希望永久性地混淆系统代理设置或浏览器代理设置。您不希望所有的网络流量都通过您自己的手写（可能是hackish）代理来进行。

Chrome扩展程序API chrome.proxy因此对您有所帮助，原因如下：

代理只会影响Chrome，而不会影响其他应用程序。
您可以使用旁路列表确保只有特定流量通过代理。
您可以随时启用或禁用代理。

要使用此API，您必须创建自定义Chrome扩展程序。

更好的方法：创建专用应用

目前的解决方案包括三个组成部分：

Chrome浏览器。
代理，一个修改Javascript的Node.js应用程序。
代理配置程序，Chrome扩展程序，告知Chrome使用代理。

如果您预计所有这些都会变得非常复杂，您可以使用NW.js为此创建专用应用。 NW.js非常通用，您基本上可以将其用作可编程Chrome 。

这种方法的好处：

NW.js禁用受信任代码的跨源策略。因此，您可以创建跨源iframe（不要忘记添加nwdisable和nwfaketop属性），并通过jQuery以编程方式与其进行交互。
NW.js支持所有Node.js API。您可以将代理设置为应用的集成部分。您将不再需要担心手动启动和终止它，因为如果代理是外部Node.js应用程序，您将需要这样做。
NW.js支持所有Chrome扩展程序API，包括chrome.proxy。您可以将代理配置程序作为应用程序的集成部分。

Answer 2

使用代码段：

<强>参考

如何在运行时编辑html文件中的内联javascript？

2 个答案:

修改Javascript

设计代理

配置Chrome以使用代理

更好的方法：创建专用应用