33

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

我知道 Chrome 扩展的基础知识，并且我用一些基本的内容脚本制作了一个。但是，现在我正在寻找一种涉及上下文菜单的方法。

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

我怎样才能做到这一点？

4

4 回答 4

71

脚本应如下所示：

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

于 2012-12-09T00:45:54.847 回答
28

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)

于 2020-04-05T05:33:31.617 回答
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
    }
}
于 2021-05-13T12:58:33.043 回答
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
    }
}
于 2021-12-22T17:18:13.443 回答