如何在Firefox WebExtensions中从后台与侧边栏脚本进行通信？ （反之亦然）

Question

我正在将我的扩展从SDK迁移到WebExtensions，我找不到后台脚本和侧边栏之间的通信方式。我的想法是在用户点击上下文菜单时传递用户突出显示的文本和一些额外的信息。我需要在“selected-text”输入中复制这个选项，但我不能从脚本中操纵侧边栏的DOM ... :(

browser.contextMenus.create({
  id: "save-highlighted-data",
  title: browser.i18n.getMessage("save-data"),
  contexts: ["all"],
  onclick: function(info,tab){ 

    //I got the highlighted data
    console.log("Selected text: " + info.selectionText);

    browser.sidebarAction.setPanel({ 
      panel: browser.extension.getURL("/sidebar/annotation.html")   
    }).then(function(){ 

      //In this context, "this" = the chrome window. But I can not change the document
      //  of the sidebar
      //console.log("window", this.document.querySelector("#selected-text"));
    }); 
  },
  command: "_execute_sidebar_action" //This toggles the sidebar 
});

有什么想法吗？我查看了GitHub仓库中的侧边栏示例，但是他们只是打开一个侧栏，没有更多的侧边栏切换操作（"_execute_sidebar_action"）

Answer 1

扩展程序的背景，内容，侧边栏等脚本可以使用runtime.sendMessage()和runtime.onMessage.addListener()

相互通信

AFAIK，目前侧边栏和内容DOM之间没有任何直接联系。

您可以使用tabs.query()获取有效标签（可见标签）或任何其他标签

function logTabs(tabs) {
  for (let tab of tabs) {
    // tab.url requires the `tabs` permission
    console.log(tab.url);
  }
}

function onError(error) {
  console.log(`Error: ${error}`);
}

var querying = browser.tabs.query({currentWindow: true, active: true});
querying.then(logTabs, onError);

或者

chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
  // tabs[0] is the active tab
});

然后，您可以将tabs.executeScript()与tabs.query()（即tabs[0].id）中的 tabId 一起使用，将JavaScript代码注入页面（DOM）并进行交互用它的DOM。