从 Firefox 扩展中的后台脚本调用内容脚本函数的最佳方法是什么？

Question

我想调用在扩展的内容脚本中实现的函数，该函数从后台脚本中的函数获取网页中选定的文本，该函数稍后将在连接到菜单项的侦听器中调用。

这可能吗？最短的方法是什么？

以下是相关代码片段：

清单.json

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

内容.js

var text = "";
    
function highlightedText() {
  text = content.getSelection();
}

背景.js

function listenerFunction() {

    highlightedText();
    
    /* Doing various stuff that have to use the text variable */
  }
  
    browser.menus.onClicked.addListener((info, tab) => {
    highlightedText();
  });

显然，上面的代码不起作用，因为“突出显示”的函数现在从后台脚本中可见。

那么，让代码工作的最快/最短的方法是什么？

Answer 1

好的。我不得不从我自己的一个私人扩展中抄袭这个，但要点是这样的：

在后台脚本中设置菜单，并为 onclick 属性分配一个函数：

browser.menus.create({
  id: 'images',
  title: 'imageDownload',
  contexts: ['all'],
  onclick: downloadImages
}, onCreated);

仍在同一脚本中获取当前选项卡信息，并向内容脚本发送消息。

function getCurrentTab() {
  return browser.tabs.query({ currentWindow: true, active: true });
}

async function downloadImages() {
  const tabInfo = await getCurrentTab();
  const [{ id: tabId }] = tabInfo;
  browser.tabs.sendMessage(tabId, { trigger: 'downloadImages' });
}

内容脚本侦听消息：

browser.runtime.onMessage.addListener(data => {
  const { trigger } = data;
  if (trigger === 'downloadImages') doSomething();
});

处理完成后，将新消息传递回后台脚本。

function doSomething() {
  const data = [1, 2, 3];
  browser.runtime.sendMessage({ trigger: 'downloadImages', data });
}

在一个单独的后台脚本中，我有如下内容：

browser.runtime.onMessage.addListener(data => {
  const { trigger } = data;
  if (trigger === 'downloadImages') ...
});