Chrome Extension - Custom design for the chrome action button -

i customize design (view) of extension action button of chrome extension.

i know if possible use html , not picture. button show text , number. able update text , number.

i did happy if generate image needed informations , change default button icon. did not found anything.

in advance thanks

to create dynamic browser action icon, use html5 canvas element; create canvas, add images and/or text it, pass canvas' image data chrome.browseraction.seticon.

here's small example (please note uses jquery create 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 have 19x19 pixels work with, font needs small.

depending on needs, creative creating text images , adding images canvas instead, and/or using chrome.browseraction.setbadgetext.

for further reading, see:

• how can write text on html5 canvas element?
• drawing text using canvas