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 an image in the file structure but I want to be able to dynamically update the text later.

I tried a few ways to get chrome.browserAction.setIcon to set to no avail. I hope it is not something simple I am missing.

Thanks

//chrome.browserAction.setIcon({imageData: draw()});
draw();

function draw() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  canvas.width = 19;
  canvas.height = 19;
  context.fillStyle = "#262626";
  context.fillRect(0, 0, 19, 19);
  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)
  });
  //return context.getImageData(0, 0, 19, 19);
}

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)
  });
}