Run script each time Chrome extension icon clicked

Google ChromeGoogle Chrome-Extension

Google Chrome Problem Overview


How do I write a chrome extension such that every time a user clicks the icon, my script is run but no popup is opened? (I would look this up in the docs myself but for whatever reason they suddenly stopped working, 404ing every page, as I got to this point).

I'm assuming it's just setting up the manifest correctly. Here's what I have now:

{
  "name": "My Extension",
  "version": "0.1",
  "description": "Does some simple stuff",
  "browser_action": {
    "popup" : "mine.html",
    "default_icon": "logo.png"
  },
  "permissions": [
	"notifications"
  ]
}

Google Chrome Solutions


Solution 1 - Google Chrome

Remove popup from your browser_action section of the manifest and use background pages along with browser Action in the background script.

chrome.browserAction.onClicked.addListener(function(tab) { alert('icon clicked')});

Solution 2 - Google Chrome

First, if you don't want to show a popup, remove "popup" : "mine.html" from your manifest.json (shown in your question).

Your manifest.json will look something like this:

{
  "name": "My Extension",
  "version": "0.1",
  "manifest_version" : 2,
  "description": "Does some simple stuff",
  "background" : {
    "scripts" : ["background.js"]
  },
  "browser_action": {
    "default_icon": "logo .png"
  },
  "permissions": ["activeTab"]
}
  • Note that manifest_version must be there and it must be 2.
  • Note that the activeTab permission has been added.
  • Note that you can only do one thing when the browser action button is clicked: either you can show a popup, or you can execute a script, but you can't do both.

Second, to execute a script when the icon is clicked, place the code below in your background.js file (the filename is specified in your manifest.json):

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, {file: "testScript.js"});
});

Finally, testScript.js is where you should put the code you want to execute when the icon is clicked.

Solution 3 - Google Chrome

Instead of specifying a popup page, use the chrome.browserAction.onClicked API, documented here.

Solution 4 - Google Chrome

If you want to follow the manifest 3 then you should do:

chrome.action.onClicked.addListener(function (tab) {
    console.log("Hello")
});

Further note that you will not see the Hello in normal console, to see the hello go to extensions menu and click on inspect views in front of the specific extension menu.

Solution 5 - Google Chrome

you need to add a background file. but firstly ou need to add an attribute in manifest.json like,

"background":{
	"scripts":["background.js"]
}

now name a file in your extension folder as background.js there is a way of sending objects from background to your content scripts suppose your content script is named content.js then what you need to do is write this code snippet in background.js file

chrome.browserAction.onClicked.addListener(sendfunc);
function sendfunc(tab){
    msg={txtt:"execute"};
    chrome.tabs.sendMessage(tab.id,msg);
}

what the above code is doing is sending an object named msg to content page and this msg object has a property txtt which is equal to "execute". what you need to do next is compare the values in content script as

chrome.runtime.onMessage.addListener(recievefunc);
function receivefunc(mssg,sender,sendResponse){
    if(mssg.txtt==="execute"){
      /*  
         your code of content script goes here
      */
    }
}

now whenever you click the extension icon an object named msg is sent from background to content. the function "recievefunc()" will compare its txtt property with string "execute" if it matches your rest of the code will run.

note: msg,txtt,sendfunc,receivefunc,mssg all are variables and not chrome keywords so you can use anything you want.

hope it helps.

:)

Solution 6 - Google Chrome

In manifest 3 you might do it like this

// manifest.json

  "background": {
  "service_worker": "back.js"
},

// back.js

chrome.action.onClicked.addListener(tab => { 
chrome.tabs.create({
    url: 'index.html'
  });
 });

Solution 7 - Google Chrome

This was just what I needed but I should add this: If all you need is a one-time event like when a user clicks on the extension's icon, then Background Pages is a waste of resources as it will run in the background ALL the time. Use Event Pages instead:

"background": {
    "scripts": ["script.js"],
    "persistent": false
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEndophageView Question on Stackoverflow
Solution 1 - Google ChromearunkumarView Answer on Stackoverflow
Solution 2 - Google Chromeyogesh kumarView Answer on Stackoverflow
Solution 3 - Google ChromeBoris SmusView Answer on Stackoverflow
Solution 4 - Google ChromeR. GurungView Answer on Stackoverflow
Solution 5 - Google ChromerishuvermaView Answer on Stackoverflow
Solution 6 - Google ChromeSal7_oneView Answer on Stackoverflow
Solution 7 - Google ChromeJustAGuyView Answer on Stackoverflow