Updating an extension button dynamically - inspiration required

Question

I am building an extension where I want to be able to add a signifier to the extension button when the extension in the code has been activated. I was hoping I could add text to the extension button (top right)

Here is a simple scenario. Let's say my extension monitors browsing and gets the tab url, in my extension I have a list of domains to watch for.

Watch for these domains www.website1.com www.website2.com

If a user visits a domain in the watched list I want to indicate this somehow, by adding some text somewhere - I was hoping in the top right of the browser where the extensions buttons are. I don't really want to use a notification window as I want something unobtrusive. The text that I want to display would just be a few letters but different for different urls.

Does anyone have any inspiration?

Thanks

score 109 · Accepted Answer · edited Aug 11 '20 at 09:53

109

You may change the extension icon like this:

chrome.browserAction.setIcon({path: icon});

There is also a 'badge' - small box over the extension icon that shows ie. number of unread messages in gmail extension. You can manipulate it like this:

chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
chrome.browserAction.setBadgeText({text:"?"});

It is also possible to generate icon dynamically on a canvas element and then display it like this:

chrome.browserAction.setIcon({imageData:canvasContext.getImageData(0, 0, canvas.width,canvas.height)});

Note that you must call this from your background script, since the content script will not have permission!

edited Aug 11 '20 at 09:53

sdgfsdh

33,689
26
132
245

answered Jan 17 '12 at 12:34

Konrad Dzwinel

36,825
12
98
105

2

Important to note that you cannot access the chrome.browserAction from inside a content script. It will work if called from something in the extension context like background or popup scripts – sirclesam Apr 04 '19 at 22:10
The above dynamic example is nice, but it's incomplete – where to get canvasContext from in background.js? Mozilla Extension documentation (compatible with Chrome) has a great example of how to draw a canvas at the bottom of their setIcon example page: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/setIcon – Niko Dunk Jan 20 '20 at 19:53

score 4 · Answer 2 · answered Apr 04 '19 at 22:14

tl;dr: Call it from background.js

I googled around this comment because I was trying to call a chrome.browserActions function from my content script

It's only accessible to scripts that are running as part of a chrome extension, since content_scripts are the same as client scripts you'd have to access them through the chrome.* api's

and to fix some addition headaches I had the call for setBadge text needs to look like:

chrome.browserAction.setBadgeText({text: 'ASDF'});

You can put as many characters as you want, but only 4 or so will appear. I got hung up on what the object property needed to be.

score 2 · Answer 3 · edited Oct 11 '12 at 02:53

You can also set a timeout to check changes on the system every x minutes, and then update de badge.

On my extension, I have an task counter called inside a notification function. Something like :

$.getJSON(
    "http://mydomain/notifications?ajax=1&callback=?",
    function(data){
        var result = data.retorno;
        if(result.length > 0){
            var totalItens = result[0].total
        } else {
            var totalItens = 0;
        }
        chrome.browserAction.setIcon({path: '19.png'});
        chrome.browserAction.setBadgeText({text:''+totalItens+''});

        for(var i=0; i<result.length; i++){

          var imagem = 'http://mydomain/myimage';
          var titulo = 'mytitle';
          var desciption = 'mydescription';

          var urlNot = 'http://mydomain/mypageOnclick';

          var not = new Notifier(urlNot);
          not.Notify(
              imagem,     // The image.
              titulo,     // The title.
              desciption  // The body.
          );

        }

    }
);

paul · Answer 4 · 2020-12-10T20:31:22.540

You have to change in 3 files.

manifest.json

Check this code added

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

script.js

Add the following code:

   const msg = 'updateIcon'
   chrome.runtime.sendMessage({ message: msg }, function(response) {
   });

background.js

Add the following code:

  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  console.log(request);
  // Callback for that request
  chrome.browserAction.setIcon({path: "/assets/icon.png"});
  });

Updating an extension button dynamically - inspiration required

4 Answers4

Linked