Chrome.browserAction.onClicked trigger with function

Question

I want to trigger a click that listens for the following code:

chrome.browserAction.onClicked.addListener(function(tab) {});

The reason is because I have a working extension that listens in the background script (addListener above) and runs some scripts when clicked:

 chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(tab.id, {file: 'abc.js'}); chrome.tabs.executeScript(tab.id, {file: 'xxx.js'}); }); 

And now I want to call this "onClicked" from the context menu:

 var myContextPage = chrome.contextMenus.create({"title": myTitle, "contexts":["page"], "onclick": fctContext}); 

So, I thought the easiest way is to have a "click" in fctContext. Maybe there is a better way, but I can not solve my problem. I also tried to run "executeScript", but this does not work either.

Thanks in advance!

// Update

Solution of answers: This solution works:

 //Shared code. When the argument length is two, it is coming from the context // menu, while a single argument is coming from the browser action. function fctContext() { var tab = arguments.length == 2 ? arguments[1] : arguments[0]; // Do whatever you want with the tab. } // Browser Action chrome.browserAction.onClicked.addListener(fctContext); // Context Menu chrome.contextMenus.create({ title: myTitle, contexts: ['page'], onclick: fctContext }); 

Solution after testing some other things:

 function fctStart() { chrome.tabs.getSelected(null, function(tab){ chrome.tabs.executeScript(tab.id, {file: 'abc.js'}); chrome.tabs.executeScript(tab.id, {file: 'xxx.js'}); }); } 

In this case, fctStart() works from anywhere without having to skip the tab.

Answer 1

Remember that arguments are optional in JavaScript. Each function has an associated arguments object. These arguments act like an array. In your case, one of them requires that while the other does not. The presence of N arguments is the same in one function (browser action) than the presence of M arguments in another (context menu), the only difference between these two arguments is arguments.callee , which provides a way to reference the actual code inside the function itself, you don’t have to worry about it if you want something basic.

Your fctContext may be the exchange code between your browser click and your context menu. I did something similar in the "Update all tabs" extension.

Find this.reload in https://github.com/mohamedmansour/reload-all-tabs-extension/blob/master/js/reload_controller.js , you will notice that this.reload used for the context menu and browser action, you just pass the code.

UPDATED with the example arguments baked in:

In your case, you do the same.

 // Shared code. When the argument length is two, it is coming from the context // menu, while a single argument is coming from the browser action. function fctContext() { var tab = arguments.length == 2 ? arguments[1] : arguments[0]; // Do whatever you want with the tab. } // Browser Action chrome.browserAction.onClicked.addListener(fctContext); // Context Menu chrome.contextMenus.create({ title: myTitle, contexts: ['page'], onclick: fctContext }); 

The problem with the above approach is maintainability if API changes can break. Personally, I prefer to explicitly state arguments. Thus, the user does not need to search the array of arguments.

 function fctContext(tab) { // Do whatever you want with the tab. } // Browser Action chrome.browserAction.onClicked.addListener(fctContext); // Context Menu chrome.contextMenus.create({ title: myTitle, contexts: ['page'], onclick: function (detail, tab) { fctContext(tab) } }); 

Hope this helps!

Answer 2

In your specific example, you do not need to pass tab.id , since it will use the current page by default:

 function fctContext() { chrome.tabs.executeScript(null, {file: 'abc.js'}); chrome.tabs.executeScript(null, {file: 'xxx.js'}); } 

If you need a tab, then:

 function fctContext(tab) { chrome.tabs.executeScript(tab.id, {file: 'abc.js'}); chrome.tabs.executeScript(tab.id, {file: 'xxx.js'}); } chrome.browserAction.onClicked.addListener(fctContext); chrome.contextMenus.create({"title": myTitle, "contexts":["page"], "onclick": function(info, tab) { fctContext(tab); }});