CODEWITHSUNDEEP
buttongoogle-chrome-extensionaction
Shire
Shire

Reputation: 398

Chrome Extension - Custom design for the chrome action button

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

Upvotes: 1

Views: 688

Answers (1)

Chris McFarland
Chris McFarland

Reputation: 6169

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:

Upvotes: 1

Related Questions