I am using chrome.contextMenus.create function to create context menus in my Chrome extension. But it creates extra options.

I gave permission in my manifest.json file, added this function my background.js file and added it my manifest.json file.

Why this is happening ?

function getword(info,tab) {
  console.log("Word " + info.selectionText + " was clicked.");
  chrome.tabs.create({  
    url: "=" + info.selectionText,
  });           
}
chrome.contextMenus.create({
  title: "Search: %s", 
  contexts:["selection"], 
  onclick: getword,
});

I am using chrome.contextMenus.create function to create context menus in my Chrome extension. But it creates extra options.

I gave permission in my manifest.json file, added this function my background.js file and added it my manifest.json file.

Why this is happening ?

function getword(info,tab) {
  console.log("Word " + info.selectionText + " was clicked.");
  chrome.tabs.create({  
    url: "http://www.google./search?q=" + info.selectionText,
  });           
}
chrome.contextMenus.create({
  title: "Search: %s", 
  contexts:["selection"], 
  onclick: getword,
});

• javascript
• google-chrome
• google-chrome-extension
• contextmenu

• 1 Could you please provide the actual code you use for creating parent-child context menus? And when did you call chrome.contextMenus.create? I guess you didn't wrap your function into something like chrome.runtime.onStartup event which causes the function will be called everytime extension is activated. – Haibara Ai Commented Jul 5, 2016 at 0:06

1 Answer 1

Your background code will execute multiple times - at least on each browser start / extension reload, and at most every time an Event page ("persistent": false) wakes up.

chrome.contextMenus.create does what it says on a tin - creates a new entry. Every time it's run. Which would be fine, as normally you want to setup everything when your extension is run, but context menu entries actually persist between extension reloads - so they keep piling up.

There are two approaches here:

1. Assign an ID to your context entry (which is an arbitrary string); in this case, calling create again with the same ID will overwrite it raise an error, not create a new one.

   chrome.contextMenus.create({
     title: "Search: %s",
     id: "search",
     contexts:["selection"], 
     onclick: getword,
   });
   

   This is useful anyway to manipulate / refer to the entry later anyway.

2. Wipe your context menu entries before calling create:

   chrome.contextMenus.removeAll(function() {
     chrome.contextMenus.create({
       // ...
     });
   });
   

   This may seem superfluous, but it's the easiest way to ensure that "old" context menu entries from previous versions of your extension don't linger.

Of course, you can bine the two.

A couple further remarks:

• If you are actually using "persistent": false Event page, note that using onclick attribute is not allowed, as it will be invalidated by extension unload. A more robust way is to use chrome.contextMenus.onClicked event - the ID of the menu item will be passed to it to distinguish between options.

• Since you very rarely need to update the context menu items, it's best to hide them away in corresponding events, chrome.runtime.onStartup and/or chrome.runtime.onInstalled.

  However, be aware that you open yourself to a bug in a very rare bination of circumstances:

  1. The extension is installed but disabled.
  2. An update happens while it is disabled.
  3. This update actually should change context menu in either of those events.
  4. Then, the extension is enabled again.

  In those circumstances, neither event will fire. This is a bug.