Chrome扩展：在右键菜单中添加功能

Question

如何在浏览器的右键菜单中添加功能？例如，在右键菜单中追加 something，并执行我的扩展程序中的函数 dosomething()。

- Skizit

Answer 1

我使用contextMenu API做了一个简单的扩展程序 - 链接
希望这可以作为一个很好的示例。

manifest.json -

{
  "manifest_version": 2,
  ...
  ...
  "permissions": [
      "contextMenus", 
      "tabs"],
  ...
  ...
  "background": {
    "page": "background.html",
    "scripts": ["main.js"]
  }
}

主文件.js -

 searchUrbanDict = function(word){
    var query = word.selectionText;
    chrome.tabs.create({url: "http://www.urbandictionary.com/define.php?term=" + query});
 };

chrome.contextMenus.create({
 title: "Search in UrbanDictionary",
 contexts:["selection"],  // ContextType
 onclick: searchUrbanDict // A callback function
});

有关不同上下文类型的更多信息-链接

- Anurag-Sharma

Answer 2

通过使用上下文菜单APIhttps://developer.chrome.com/docs/extensions/reference/contextMenus/找到了解决方法。

- Skizit

Answer 3

Anurag-Sharma的答案针对manifest v3进行了更新:

manifest.json -

{
    "name": "terapeak",
    "description": "easy way to research ebay products",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": [
        "contextMenus",
        "tabs"
    ],
    "background": {
        "service_worker": "main.js"
    }
}

main.js

searchTerapeak = function(word){
    var query = word.selectionText;
    chrome.tabs.create({url: "https://www.ebay.com/sh/research?dayRange=365&sorting=-avgsalesprice&tabName=SOLD&keywords="
+ query});  };

chrome.contextMenus.removeAll(function() {
    chrome.contextMenus.create({
     id: "1",
     title: "Terapeak this!",
     contexts:["selection"],  // ContextType
    }); })

chrome.contextMenus.onClicked.addListener(searchTerapeak);

为什么每次都需要 removeAll：

为什么chrome.contextMenus会创建多个条目？

- Jeffrey Kozik