Question

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

我知道Chrome扩展程序的基础知识，并且我使用了一些基本内容脚本。但是，现在我想制作一个涉及上下文菜单的工具。

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

我该怎么做？

Answer 1

脚本应如下所示：

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

Answer 2

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)

Answer 3

改进了 ahnquan 的答案，因此 chrome.contextMenus.create 不会在每次后台脚本调用时调用，并且还将 highlighted text 编码为 URI，以便它在包含特殊字符时不会中断，例如 {{ 1}}。

您的 background.js 将如下所示：

;,/?:@&=+$

和 manifest.json：

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)
    });
})

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

3 个答案: