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

Question

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

我知道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 中，这样当它包含特殊字符（例如;,/?:@&=+$.

你的background.js看起来像：

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

清单.json (MV2):

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