谷歌浏览器扩展程序画布图标

Question

我正在尝试将扩展图标设置为画布图像。但是我似乎无法设置它。我只想让基础功能正常工作，然后再进行扩展。我可以使用文件结构中的图像设置图标，但我希望能够稍后动态更新文本。

我尝试了几种方法来使chrome.browserAction.setIcon设置成功，但都没有成功。我希望我没有错过什么简单的东西。

谢谢

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

- the squatch

Answer 1

假设document.getElementById('canvas')返回一个元素，那么您的代码将正常工作。但是如果您在作为脚本定义的后台页面上运行它，它将是空的。

实际上，您不需要在DOM中有一个元素就可以使它工作。只需为此创建一个新元素即可。

另外，请注意您正在使用与背景相同的颜色编写文本，因此它是不可见的。

将它们组合起来（并稍微调整一下坐标）：

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

- Xan

---

谢谢，createElement 就是我所缺少的。 - the squatch