如何通过default_popup模式与长期运行的React Chrome扩展进行通信？

Question

我正在制作一个Chrome扩展程序，该扩展程序将选择div覆盖在当前网页上。

我花了很多时间研究如何使用React开发Chrome扩展程序以及以常规方式注入HTML和JS的方法。 需要更多特定于React的信息来将其组合在一起。

我的目标是实现这一目标：

1. 单击default_popup ，其中显示了一些扩展程序设置

2. 切换覆盖开启

3. 全屏覆盖覆盖当前网页

4. 退出default_popup模态

5. 因为基于React的扩展仍在运行，所以覆盖仍然存在

6. 单击default_popup ，它再次显示扩展程序设置

7. 切换覆盖关闭

我遵循了我在Google上可以找到的所有教程，并剖析了我在GitHub上可以找到的每个React Chrome扩展，这是我后来提出的问题。

谁能提供一个例子或确切描述完成上述步骤需要做什么？

在任何教程或代码拼写中找不到的最重要的事情是如何将React App作为Chrome扩展注入，并使其与default_popup模态对话？

Answer 1

要在弹出窗口（我假设您的意思是此处的browserAction）和任何打开的选项卡之间进行通信，最简单的方法是通过后台脚本。 所以在manifest.json中添加

"background": {
   "scripts": ["background.js"]
}

然后在background.js文件中，您可以使用onMessage监听从contentScript或browserAction脚本发出的事件

//background.js
chrome.runtime.onMessage.addListener( function(message){
    // do some actions depending on message object
    // e.g. add or remove overlay with tabs api 
} 

并使用sendMessage这样从您的弹出窗口发送消息

chrome.runtime.sendMessage({ action: "TOGGLE_OVERLAY", toVisible: true}) 

请注意：如果要将消息发送到内容脚本 ，则应使用Tabs API sendMessage代替