首页 > 解决方案 > Firefox AddOn 扩展中 contextMenu 选项的可见性

问题描述

我正在编写我的第一个 Firefox 附加扩展,它主要通过文本框上的右键单击上下文菜单工作。

我希望能够根据用户在其上执行右键单击事件的文本框中当前是否选择了任何文本来显示/隐藏单个选项。

我已经能够使用内容脚本和背景脚本之间的消息来了解它的基础知识......

content.js...
window.oncontextmenu = function(e) {
  if (e && e.target && (e.target.nodeName == "TEXTAREA" || (e.target.nodeName == "INPUT" && e.target.type == "text"))) {
    var selectedText = "";
    if (e.target.selectionStart < e.target.selectionEnd) {
      selectedText = e.target.value.substring(e.target.selectionStart, e.target.selectionEnd);
    }
    browser.runtime.sendMessage({ "action": "additemvisible", "selectedText": selectedText});
  }
};

background.js...
browser.runtime.onMessage.addListener(function(message) {
  if (message && message.action) {
    if (message.action == "additemvisible") {
      addSelectedText = message.selectedText;
      browser.menus.update("addtextitem", { visible: addSelectedText != "" });
    }
  }
});

问题是在显示上下文菜单,消息似乎通过了 background.js 脚本,因此菜单项的可见性基于先前的状态,而不是当前状态。

有没有更好的方法来编写这个,以便 contextMenu 项目根据当前情况可见?

标签: javascriptfirefoxfirefox-addoncontextmenu

解决方案


contexts您可以使用该属性设置何时显示上下文菜单项。在您的情况下,您似乎对网页上的选定文本感兴趣,有selected上下文(可以在此处找到完整的上下文列表)。

单击菜单项时,所选文本将发送到菜单项的单击侦听器,这是一个示例:

browser.contextMenus.create({
  id: "log-selection",
  title: "Process Selection",
  contexts: ["selection"],
  onclick: (info, tab) => {
    console.log(info.selectionText);
  }
});

推荐阅读