google-chrome-extension - 通过 Chrome 扩展程序的页面操作弹出窗口与事件选项卡上的内容脚本进行通信

Question

我不知道如何在内容脚本和页面操作弹出窗口之间传递数据。

我从以下简单的框架开始，它显示了标题中带有减号破折号的任何页面的页面操作:

• 扩展 list (manifest.json):

  {
     …
     "permissions": ["http://example.org/*"],
     "background": {"scripts": ["background.js"]},
     "page_action": {"default_popup": "popup.html", …},
     "content_scripts": {
       "matches": ["http://example.org/*"],
       "js": ["content.js"]
     }
  }
  

• 后台脚本(background.js):

  chrome.extension.onRequest.addListener(function (msg, sender, respond) {
    if (msg && msg.what === "match") {
      console.log("Match:", msg.title);
      chrome.pageAction.show(sender.tab.id);
    }
  }
  

• 内容脚本 (content.js)，检查文档标题:

  var title = document.title;
  if (title.indexOf("-") >= 0) {
    chrome.extension.sendRequest({"what": "match", "title": title});
  }
  

现在，在页面操作的弹出窗口中，我想显示匹配的页面标题。不是最后加载的页面的标题(如使用 this answer 完成的)，而是事件选项卡的标题。

我的第一个想法是向内容脚本发送查询，但根据文档 chrome.extension.sendMessage 会将其发送给所有监听器(即我的所有内容)所有选项卡上的脚本)，没有任何明确的定义我将收到回复。另外，我无法使用 chrome.tabs.sendMessage，因为它需要 tabId。尝试使用 chrome.tabs.getCurrent 查找当前选项卡将返回 null，因为查询来自非选项卡上下文(来自弹出窗口)。

我想我可能可以使用 chrome.tabs.executeScript 进行通信，但这感觉很脏。

不过，我相信，这是一件基本的事情，应该非常简单，但我只是错过了一些东西。请有人帮助我，最好是提供示例代码？

更新:我发现 Mappy example extension它使用 chrome.tabs.onUpdated 来跟踪事件选项卡。不幸的是，这需要 tabs 权限。就我个人而言，我希望尽可能使用最少的权限。

那么，不幸的是，权限系统设计很糟糕，我别无选择，只能这样做，还是有任何解决方法？如果 chrome.pageAction.onClicked 事件处理程序(提供我需要的 Tab 对象)允许我显示弹出窗口，我会很高兴...

Answer 1

我认为您需要在弹出窗口中添加 onClick 事件监听器:

chrome.pageAction.onClicked.addListener(function(tabs.Tab tab) {...});

查看文档 here .

事件监听器的回调将为您提供 tabId，这肯定是事件选项卡。