1

I would like to customize the design (view) of the extension action button of my Chrome Extension.

I would like to know if it is possible to use html and not only a picture. I would like the button to show text and number. i would like to be able to update the text and number.

I did look it the happy if i could generate an image with the needed informations and change the default button icon. But i did not found anything.

In advance thanks

Shire
  • 398
  • 2
  • 9

1 Answers1

1

To create a dynamic browser action icon, use the HTML5 Canvas element; create a canvas, add images and/or text to it, then pass the canvas' image data to chrome.browserAction.setIcon.

Here's a small example (please note that this uses jQuery to create the canvas element):

$('body').append('<canvas id="myCanvas" width="19" height="19"></canvas>');
var myCanvas = document.getElementById('myCanvas');
var context = myCanvas.getContext('2d');
context.fillStyle = "blue";
context.font = "normal 9px Arial";
context.fillText("foo", 0, 19);
chrome.browserAction.setIcon({ imageData: context.getImageData(0, 0, 19, 19) });

Keep in mind that you only have 19x19 pixels to work with, so the font probably needs to be really small.

Depending on your needs, you could get creative with creating text as images and adding images to the canvas instead, and/or using chrome.browserAction.setBadgeText.

For further reading, see:

Community
  • 1
  • 1
Chris McFarland
  • 6,059
  • 5
  • 43
  • 63
  • Is it possible to have more than 19 pixels ? – Shire Aug 10 '13 at 13:50
  • I looked up the docs i don't think it is possible to have more and not possible to have a bar or something that has a length of 200 px or so. – Shire Aug 10 '13 at 13:58
  • @Shire Hmm, the [documentation](http://developer.chrome.com/extensions/browserAction.html#icon) says you can use larger sizes for the icon, but it resizes it to 19x19. You can't have a toolbar. – Chris McFarland Aug 10 '13 at 15:39