google-chrome-extension - 如何获取 chrome 扩展的调试信息

Question

我编写了一个 DOM 树保护器 Chrome 扩展来检查 DOM 树是否发生了变化。我在 background_page 中有 js 文件，如何在其他测试 html 文件中获取这些 console.logs()？我现在只能找到当我点击 generate_background_page.html 时 chrome://extensions/ 的调试信息。那么如何获取其他网页的信息呢？感谢回复。

Answer 1

在调试 chrome 扩展时，我发现非常有用的一件事是使用 chrome 开发人员工具的“检查元素”功能。如果您有要调试的页面或元素（例如在扩展程序的弹出窗口中）：

Open up Developer Tools
Wait for your popup to appear (if its not already up)
Switch to the Elements view on Developer Tools
Click the magnifying glass at the bottom so you can select an element
Click on an element in the page you want to debug (e.g. the popup page)

现在，您的 Sources 视图和其他视图对齐以匹配您单击的元素。控制台现在将让您查看该上下文中的变量。

如果您无法使扩展程序正常工作，可能有很多原因。

1. 您的所有脚本是从扩展目录加载的还是从站点提供的？Chrome 不会从外部站点加载脚本，除非通过 https 并且在提供脚本的站点被列入白名单之后。有关详细信息，请参阅Chrome 内容安全政策 。
2. 要检查 DOM，您需要将内容脚本注入正在加载的页面中。你确定你做对了吗？manifest.json 必须正确完成，否则您的内容脚本将无法加载。
3. 为了让您的内容脚本和扩展程序进行通信，您必须发布和接收消息。更多信息可在此处获得。

也许我最好的建议是你仔细遵循Chrome 扩展“教程”，直到你有一些工作，然后修改它以满足你的需要。