Chrome DevTools扩展是否有预处理脚本的替代方案？ [英] Is there an alternative to preprocessorScript for Chrome DevTools extensions?

问题描述

我想为Chrome开发人员创建一个自定义分析器，作为Chrome DevTools Extension。要做到这一点，我必须测试一个网站的所有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扩展非常具体（可能是对其他浏览器的扩展），我要求这是在采取不同的路线（例如专用应用程序）之前的最后一招。

h2_lin>解决方案

使用Chrome调试协议。

首先，使用 DOMDebugger.setInstrumentationBreakpoint 和 eventName：scriptFirstStatement作为参数来为每个脚本的第一条语句添加一个断点。

其次，在调试器域中，有一个名为<$ c的事件$ C> scriptParsed 。听取它，如果调用，使用 Debugger.setScriptSource 更改源代码。

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

在半伪代码中的示例：

  //防止正在执行的代码
 cdp.sendCommand（DOMDebugger .setInstrumentationBreakpoint，{
 eventName：scriptFirstStatement
}）; 
 
 //启用调试器域以接收其事件
 cdp.sendCommand（Debugger.enable）; 
 $ b $ cdp.addListener（message，（event，method，params）=> {
 //脚本已准备好被编辑
 if（method === Debugger.scriptParsed）{
 cdp.sendCommand（Debugger.setScriptSource，{
 scriptId：params.scriptId，
 scriptSource：`console.log（edited script $ {params.url }）;`
}，（err，msg）=> {
 //编辑完成后，恢复执行代码
 cdg.sendCommand（Debugger.resume）; 
}）; 
} 
}）; 
  

上面的实现并不理想。它可能应该监听断点事件，使用关联的事件数据进入脚本，编辑脚本然后继续。听取 scriptParsed 然后恢复调试器是两件事情不应该在一起，它可能会产生问题。尽管如此，它只是一个更简单的例子。

I want to create a custom profiler for Javascript as a Chrome DevTools Extension. To do so, I'd have to instrument all Javascript code of a website (parse to AST, inject hooks, generate new source). This should've been easily possible using chrome.devtools.inspectedWindow.reload() and its parameter preprocessorScript described here: https://developer.chrome.com/extensions/devtools_inspectedWindow.

Unfortunately, this feature has been removed (https://bugs.chromium.org/p/chromium/issues/detail?id=438626) because nobody was using it.

Do you know of any other way I could achieve the same thing with a Chrome Extension? Is there any other way I can replace an incoming Javascript source with a changed version? This question is very specific to Chrome Extensions (and maybe extensions to other browsers), I'm asking this as a last resort before going a different route (e.g. dedicated app).

解决方案

Use the Chrome Debugging Protocol.

First, use DOMDebugger.setInstrumentationBreakpoint with eventName: "scriptFirstStatement" as a parameter to add a break-point to the first statement of each script.

Second, in the Debugger Domain, there is an event called scriptParsed. Listen to it and if called, use Debugger.setScriptSource to change the source.

Finally, call Debugger.resume each time after you edited a source file with setScriptSource.

Example in semi-pseudo-code:

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

The implementation above is not ideal. It should probably listen to the breakpoint event, get to the script using the associated event data, edit the script and then resume. Listening to scriptParsed and then resuming the debugger are two things that shouldn't be together, it could create problems. It makes for a simpler example, though.

这篇关于Chrome DevTools扩展是否有预处理脚本的替代方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！