Question

我正在制作一个Chrome扩展程序，它覆盖了当前网页上的div选项。

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

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

点击default_popup，其中会显示一些扩展程序设置
切换叠加开启
全屏覆盖图覆盖当前网页
关闭default_popup模式
叠加仍然存在，因为基于React的扩展程序仍在运行
点击default_popup再次显示扩展程序设置
切换覆盖关闭

我已经关注了我在Google上可以找到的每个教程，并解析了我可以在GitHub中找到的每个React Chrome扩展程序，这是我之后出现的问题。

任何人都可以提供一个示例或准确描述实现上述步骤需要做些什么吗？

我从任何教程或代码探索中找不到的最重要的事情是如何将React App注入Chrome扩展并让它与default_popup模式对话？

Answer 1

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

$centre_jurisdiction = isset($data['data']['ctj']) ? $data['data']['ctj'] : "";
$state_jurisdiction = isset($data['data']['stj']) ? $data['data']['stj'] : "";

然后在background.js文件中，您可以使用onMessage

侦听从contentScript或browserAction脚本发出的事件

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

并使用sendMessage像这样

从弹出窗口发送消息

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

请注意：如果您要向content scripts发送消息，请使用tabs API sendMessage instead

如何通过default_popup模式与长时间运行的React Chrome Extension进行通信？

1 个答案: