Context menus in Chrome extensions

Question

I've searched and searched and searched for a solution to this but every source I come across seems to assume I already have profound knowledge of Chrome extensions, even Google's help pages

I know the very basics of Chrome extensions and I made one with some basic content scripts. However, now I'm looking to make one that involves context menus.

Let's say when you highlight words and right-click them, you see the option Search '<highlighted words>' on Google and when clicked, it opens http://www.google.com/search?q=<highlighted words> in a new tab. I know this exists in Chrome and I'm sure there have been a billion extensions replicating it, but this is only an example for me to build off of.

How can I do this?

Answer 1

Script should look like this:

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

And manifest.json:

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

Here you have how to load extension: http://developer.chrome.com/extensions/getstarted.html

Answer 2

The answer from Bartlomiej Szalach is too old. It will not work on Chrome Version 80.0.3987.163 (April 2020).

According to the documentation,

onclick: A function that is called back when the menu item is clicked. Event pages cannot use this; instead, they should register a listener for contextMenus.onClicked.

The background.js should be modified as follows:

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)