Chrome DevTools 扩展是否有预处理器脚本的替代方案？

Question

我想为 Javascript 创建一个自定义分析器作为 Chrome DevTools 扩展。为此，我必须检测网站的所有 Javascript 代码（解析为 AST、注入钩子、生成新源）。这应该很容易使用chrome.devtools.inspectedWindow.reload()，preprocessorScript这里描述了它的参数：https : //developer.chrome.com/extensions/devtools_inspectedWindow。

不幸的是，此功能已被删除（https://bugs.chromium.org/p/chromium/issues/detail?id=438626），因为没有人使用它。

您知道我可以通过 Chrome 扩展程序实现相同目的的任何其他方式吗？有没有其他方法可以用更改后的版本替换传入的 Javascript 源？这个问题非常针对 Chrome 扩展程序（也可能是其他浏览器的扩展程序），我将其作为走不同路线（例如专用应用程序）之前的最后手段。

Answer 1

使用 Chrome 调试协议。

首先，使用DOMDebugger.setInstrumentationBreakpointwitheventName: "scriptFirstStatement"作为参数向每个脚本的第一个语句添加断点。

其次，在调试器域中，有一个名为 的事件scriptParsed。聆听它，如果被呼叫，则用于Debugger.setScriptSource更改来源。

最后，Debugger.resume每次编辑源文件后调用setScriptSource.

半伪代码示例：

// Prevent code being executed
cdp.sendCommand("DOMDebugger.setInstrumentationBreakpoint", {
  eventName: "scriptFirstStatement"
});

// Enable Debugger domain to receive its events
cdp.sendCommand("Debugger.enable");

cdp.addListener("message", (event, method, params) => {
  // Script is ready to be edited
  if (method === "Debugger.scriptParsed") {
    cdp.sendCommand("Debugger.setScriptSource", {
      scriptId: params.scriptId,
      scriptSource: `console.log("edited script ${params.url}");`
    }, (err, msg) => {
      // After editing, resume code execution.
      cdg.sendCommand("Debugger.resume");
    });        
  }
});

上面的实现并不理想。它可能应该侦听断点事件，使用关联的事件数据访问脚本，编辑脚本，然后恢复。侦听scriptParsed然后恢复调试器是两件事不应该放在一起，这可能会产生问题。不过，它提供了一个更简单的示例。