如何使用 Chrome 浏览器扩展来监控和解析 devtools 控制台中的输出？

【问题标题】：How can I use a Chrome browser extension to monitor and parse the output in the devtools console?如何使用 Chrome 浏览器扩展来监控和解析 devtools 控制台中的输出？
【发布时间】：2020-09-17 04:12:59
【问题描述】：

我正在构建一个 chrome 扩展程序，它应该有助于调试在网站上运行的软件。该软件可以启用调试模式，这将导致大量使用console.log 输出到控制台。

我想使用我的 chrome 扩展来解析控制台消息并在 UI 中显示重要事件以便更快地进行调试。但是，我没有看到用the API 简单地做到这一点的方法。有什么我想念的吗？我应该覆盖console.log 函数吗？我该怎么做呢？

【问题讨论】：

标签： google-chrome google-chrome-extension browser-extension

【解决方案1】：

有两种方法。

覆盖page context 中的console.log、console.warn 等（这很重要！）。有很多例子（这里是random one）。在您的情况下，它会更简单，因为您只需调用原始方法并通过 CustomEvent 将参数传输到您的内容脚本 (example)，这将累积它们。
将chrome.debugger API 与Console.messageAdded 或Runtime.consoleAPICalled 事件一起使用。这将在整个浏览器中显示一个关于调试器处于活动状态的消息栏，除非您通过使用--silent-debugger-extension-api 命令行运行 chrome 将其全局隐藏，但如果您不小心安装了使用 chrome.debugger API 的恶意扩展程序，这会有些危险。

【讨论】：

很棒的答案。我很欣赏这些例子，很高兴听到我在正确的轨道上。