Chrome 扩展程序中的上下文菜单

Posted 2023-02-19

【中文标题】Chrome 扩展程序中的上下文菜单

【英文标题】：Context menus in Chrome extensions

【发布时间】：2012-11-26 20:04:18

【问题描述】：

我已经搜索并搜索了此问题的解决方案，但我遇到的每个来源似乎都假设我已经对 Chrome 扩展程序有深入的了解，甚至是 Google 的帮助页面

我了解 Chrome 扩展程序的基本知识，并使用一些基本内容脚本制作了一个。不过，现在我想做一个涉及上下文菜单的菜单。

假设当您突出显示单词并右键单击它们时，您会看到选项Search '<highlighted words>' on Google，单击时会在新选项卡中打开http://www.google.com/search?q=<highlighted words>。我知道这存在于 Chrome 中，并且我确信已经有十亿个扩展复制它，但这只是我构建的一个示例。

我该怎么做？

【问题讨论】：

你错过了这个教程，这正是你的问题tomoprogramming.blogspot.fr/2013/08/…

问题发表于2012年。教程2013年。不能错过不存在的东西。

【参考方案1】：

Manifest v3 已发布，因此为了改进 Lucas Mendonca 的回答，您只需将 manifest.json 更改为：

    "manifest_version": 3,
    "name": "App name",
    "version": "1.0",
    
    "permissions": ["contextMenus"],
    "background":  
        "service_worker": "background.js",
        "persistent": false
    

【参考方案2】：

改进了 ahnquan 的答案，因此不会在每个后台脚本调用中调用 chrome.contextMenus.create，并且还将 highlighted text 编码为 URI，因此当它包含特殊字符（例如 ;,/?:@&=+$）时它不会中断。

您的 background.js 将如下所示：

chrome.runtime.onInstalled.addListener(function() 
    chrome.contextMenus.create(
        "title": 'Search Google for "%s"',
        "contexts": ["selection"],
        "id": "myContextMenuId"
    );
);
    
chrome.contextMenus.onClicked.addListener(function(info, tab) 
    chrome.tabs.create(  
        url: "http://www.google.com/search?q=" + encodeURIComponent(info.selectionText)
    );
)

还有 manifest.json：

    "manifest_version": 2,
    "name": "App name",
    "version": "1.0",
    
    "permissions": ["contextMenus"],
    "background":  
        "scripts": ["background.js"],
        "persistent": false
    

【参考方案3】：

Bartlomiej Szalach 的回答太老了。它不适用于 Chrome 版本 80.0.3987.163（2020 年 4 月）。

根据文档，

onclick：单击菜单项时回调的函数。活动页面不能使用这个；相反，他们应该为 contextMenus.onClicked 注册一个监听器。

background.js应该修改如下：

const CONTEXT_MENU_ID = "MY_CONTEXT_MENU";
function getword(info,tab) 
  if (info.menuItemId !== CONTEXT_MENU_ID) 
    return;
  
  console.log("Word " + info.selectionText + " was clicked.");
  chrome.tabs.create(  
    url: "http://www.google.com/search?q=" + info.selectionText
  );

chrome.contextMenus.create(
  title: "Search: %s", 
  contexts:["selection"], 
  id: CONTEXT_MENU_ID
);
chrome.contextMenus.onClicked.addListener(getword)

【讨论】：

一个很好的答案，但我很确定 Chrome 会抛出，因为 chrome.contextMenus.create 将在每次调用后台脚本时被调用（考虑到每次调用都使用相同的 ID）将导致错误。

【参考方案4】：

脚本应如下所示：

function getword(info,tab) 
  console.log("Word " + info.selectionText + " was clicked.");
  chrome.tabs.create(  
    url: "http://www.google.com/search?q=" + info.selectionText
  );

chrome.contextMenus.create(
  title: "Search: %s", 
  contexts:["selection"], 
  onclick: getword
);

还有 manifest.json：

    "name": "App name",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Your description",
    "permissions": [
      "contextMenus"
     ],
    "background":  
      "scripts": ["script.js"]
    

这里有如何加载扩展：http://developer.chrome.com/extensions/getstarted.html

【讨论】：

将这两个文件（manifest.json 和 script.js）放在一个文件夹中。就是这样！

完美运行。我找不到这么简单的解释。谢谢！

这个答案来自 2012 年。现在是 2018 年，我注意到 chrome.contextMenus 现在在内容脚本中未定义，它仅适用于后台脚本。