Google Chrome 扩展与 Panel 通信

Question

我正在尝试开发一个简单的 Chrome 扩展程序。它只需要从我的网页访问对象 myVar 并将其作为表格打印到面板中。 （我用的是 Yeoman 生成器，所以基本上什么都有）

background.js // to add a runTime.onMessage listener
contentscript.js // to inject custom.js, add a listener to a custom event and fire the runTime.sendMessage
custom.js // to retrieve myVar and dispatch the custom event.
devtools.js // to create the extension Panel

devtools.html // contains just devtools.js
panel.html // basic html structure of my panel, no js.

所以，我能够做的就是将自定义脚本注入网页并使用事件侦听器和 chrome 消息传递 MyVar。

我缺少的是如何与面板交互，我有点迷茫。

一旦初始化，我不知道如何调试、访问它的 DOM、与 background.js 或 contentscript.js 通信。

有什么想法吗？

谢谢！

Answer 1

一旦 [面板] 初始化，我不知道如何调试、访问其 DOM、与 background.js 或 contentscript.js 通信。

• 要调试它，您可以将开发工具面板分离到一个窗口中，然后使用 Ctrl/Cmd + Shift + I invoke Dev Tools for that .

• 它是一个框架，所以它是一个独立的文档；要访问它的 DOM，你需要一个脚本。

• 为了进行通信，开发工具面板可以访问chrome.runtime 消息传递函数来启动与后台的通信，尽管其他方式似乎是不可能的。一般用chrome.runtime.connect打开一个端口，在后台脚本中对应chrome.runtime.onConnect，用于双向通信。另外，sender 对象将包含 DevTools 附加到的选项卡 ID。

• 无法与内容脚本直接通信；您需要使用背景作为代理。这是old but thorough answer。