How to run script on ContextMenu Click Chrome Extension

Question

I'm tried to run script on ContextMenu Click event. I'm used example ContextMenu which have manifest:

{
"name": "Context Menus Sample (with Event Page)",
"description": "Shows some of the features of the Context Menus API using an event page",
"version": "0.7",
"permissions": ["contextMenus"],
"background": {
"persistent": false,
"scripts": ["sample.js"]
},
"manifest_version": 2
}

sample.js:

function onClickHandler(info, tab) {
chrome.tabs.executeScript(null,
  {code:"document.body.style.backgroundColor='" + e.target.id + "'"});
};
chrome.contextMenus.onClicked.addListener(onClickHandler);
chrome.runtime.onInstalled.addListener(function() {
var contexts = ["page","selection","link","editable","image","video",
              "audio"];
for (var i = 0; i < contexts.length; i++) {
var context = contexts[i];
var title = "Test '" + context + "' menu item";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
                                     "id": "context" + context});
}

chrome.contextMenus.create({"title": "Oops", "id": "child1"}, function() {
if (chrome.extension.lastError) {
  console.log("Got expected error: " + chrome.extension.lastError.message);
  }
   });
});

and i also change onclick handler to:

function onClickHandler(info, tab) {
chrome.tabs.executeScript(null, {file: "content.js"});
};

when content.js is:

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("text", "gi"), "replaced");

but both of that doesn't working. How to solve it?

What *exactly* is shown in the [various appropriate consoles for your extension](http://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? — Makyen, Mar 04 '17 at 02:06
Please [edit] the question to be on-topic: include a [mcve] that duplicates the problem. For Chrome extensions/Firefox WebExtensions this almost always means including your *manifest.json* and some of the background, content, and/or popup scripts/HTML. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. — Makyen, Mar 04 '17 at 02:10

score 2 · Accepted Answer · answered Dec 11 '18 at 06:32

Because this question has hundreds of views so I will answer this my old question to help anyone who has the same problem. The answer is based on wOxxOm's comment. I just need to add activeTab permission to the manifest. So should be like this:

{
"name": "Context Menus Sample (with Event Page)",
"description": "Shows some of the features of the Context Menus API using an event page",
"version": "0.7",
"permissions": ["contextMenus","activeTab"],
"background": {
"persistent": false,
"scripts": ["sample.js"]
},
"manifest_version": 2
}

My script before doesn't work because I have code that needs to read/change current active tab content. activeTab permission gives an extension temporary access to the currently active tab when the user invokes the extension - for example by clicking its browser action.

How to run script on ContextMenu Click Chrome Extension

1 Answers1