google chrome extension canvas icon

Question

I am trying to set the extension icon to a canvas image. I can\'t seem to get it to set. I just want to get the basics working and expand from there. I can set the icon with

Answer 1

Your code works correctly under the assumption document.getElementById('canvas') returns an element. If you're running this in a background page defined as a script, it will be empty.

You don't actually need to have an element in the DOM for it to work. Just create a new element just for this.

Also, note that you're writing text using the same color as the background; so it's invisible.

Putting it together (and nudging the coordinates a bit):

draw();

function draw() {
  var canvas = document.createElement('canvas'); // Create the canvas
  canvas.width = 19;
  canvas.height = 19;

  var context = canvas.getContext('2d');
  context.fillStyle = "#262626";
  context.fillRect(0, 0, 19, 19);

  context.fillStyle = "#FFFFFF";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.font = "11px Arial";
  context.fillText("69F", 8, 8);

  chrome.browserAction.setIcon({
    imageData: context.getImageData(0, 0, 19, 19)
  });
}