1

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

我已经想到的可能的解决方案：

  • Greasemonkey / TamperMonkey / 在运行时注入我自己的：不会解决我的问题，因为脚本嵌套在匿名范围内，无法从外部访问。

  • 中间人代理：从长远来看是不可行的，而且为了我必须做的事情而设置太多（我会保留它作为最后的手段）。

我怎么解决这个问题？

4

2 回答 2

1

修改 Javascript

Javascript 可以用acorn 或解析esprima。

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

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

关于对第三方 Javascript 进行自动修改的一些准则：

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

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

设计代理

因为显然你不能在运行时修改 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 以使用代理

出于显而易见的原因，您不想永久弄乱系统代理设置或浏览器代理设置。您不希望您的所有网络流量都通过您自己手写的（可能是骇人听闻的）代理传输。

因此，Chrome 扩展 APIchrome.proxy将对您有所帮助，原因如下：

  1. 代理只会影响 Chrome，不会影响其他应用程序。
  2. 您可以使用绕过列表来确保只有某些流量通过代理。
  3. 您可以随时启用或禁用代理。

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

更好的方法：创建一个专用的应用程序

当前的解决方案包括三个组件：

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

如果您预计所有这一切都会变得非常复杂，您可以使用NW.js为此创建一个专用应用程序。NW.js 用途广泛，您基本上可以将它用作可编程的 Chrome。

这种方法的好处：

  1. NW.js 禁用受信任代码的跨域策略。因此，您可以创建一个跨域iframe（不要忘记添加nwdisable和nwfaketop属性），并通过 jQuery 以编程方式与之交互。
  2. NW.js 支持所有 Node.js API。您可以使代理成为您应用程序的集成部分。您将不再需要担心手动启动和终止它，如果代理是外部 Node.js 应用程序，您就需要这样做。
  3. NW.js 支持所有 Chrome 扩展 API，包括chrome.proxy. 您可以使代理配置器成为您应用程序的集成部分。
于 2017-04-30T16:13:50.317 回答
0

使用片段：

Chrome 片段实时编辑拖放 Quirksmode 内联 JavaScript

参考

于 2017-09-15T13:43:42.370 回答