chrome浏览器扩展浏览器操作与onClick冲突

Question

使用React，并尝试构建一个Chrome浏览器扩展程序，该扩展程序将：1.单击扩展按钮时，打开一个弹出窗口（带有反应路线和视图）2.当单击弹出窗口中的按钮时，我想从浏览器活动选项卡DOM

中提取信息。

当我将其添加到清单中时：

"browser_action": {"default_popup": "index.html"}

弹出窗口确实打开，我可以与弹出窗口中的不同页面进行交互。

然后我尝试利用内容和后台功能，将其添加到manifest.json中：

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],

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

content.js文件：

/*global chrome*/
console.log("CHROME EXTENSION -- content.js running")
chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
    console.log(message.txt);
    if (message.txt === "hello") {
        let paragraphs = document.getElementsByTagName('p');
        for (let elt of paragraphs) {
            elt.style['background-color'] = '#FF00FF';
        }
    }
}

background.js文件：

/*global chrome*/
console.log("CHROME EXTENSION -- background.js running")

// LOCATION A

chrome.browserAction.onClicked.addListener(buttonClicked);

function buttonClicked(tab) {
    console.log("CLICKED !!!");
    console.log(tab);
    let msg = {
        txt: "hello"
    }
    chrome.tabs.sendMessage(tab.id, msg)
    // LOCATION B
}

我也阅读了有关browserAction.onClicked的内容：Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.

而且这个^确实是正确的：单击弹出窗口，（检查扩展控制台）我只得到background.js文件的第一个日志，没有其他内容。

没有清单中的弹出窗口设置，我单击扩展按钮，然后我可以更改活动的浏览器DOM，并且可能会发回我感兴趣的元素（尚未尝试过），但是弹出窗口和我的react应用程序会成功。 t显示。

在清单中设置了弹出窗口后，我可以使用自己创建的弹出视图和GUI-但是我没有与活动浏览器DOM的连接。

我还尝试将其注入background.js中的几个位置：

chrome.browserAction.setPopup({popup: 'index.html'});

当我在LOCATION A中设置它时-就像通过清单文件设置弹出窗口一样。当我在LOCATION B中进行设置时-它会触发代码，直到我设置弹出窗口为止-这样我就可以看到该标签，但是我没有收到来自DOM的任何消息（因此该弹出窗口随后会打开，此处的任何点击都只会打开/关闭没有任何进一步的消息发送/接收的弹出窗口）

所以...从那时起，我一直在寻找解决方案。

我也阅读了这些文章：1.Chrome extension browser action event not firing2. Chrome extension popup showing by condition

根据第二个链接的答案，特别是因为Array.observe已过时，因此“花式”解决方案是不可能的。 “适当的”解决方案-我只是不太了解（pcTabs？）

[我看着chrome.browserAction.openPopup，但我不太了解。

我该怎么做？

我是响应和前端开发的新手，所以，如果我忘记输入任何重要信息，或者上面的代码出错，请告诉我。

Answer 1

browserAction.onClicked在通过default_popup或browserAction.setPopup定义弹出html时不起作用，因为在这种情况下不需要后台脚本：您可以像往常一样在弹出脚本中处理点击操作就像您popup.html中的<script src=popup.js></script>。

弹出页面（及其脚本）在每次显示弹出窗口时都会运行，因此只需将代码放在popup.js的开头，它将每次都运行。当弹出窗口关闭时，其脚本不会运行。