谷歌浏览器扩展画布图标答案

【问题标题】：google chrome extension canvas icon谷歌浏览器扩展画布图标
【发布时间】：2015-03-15 02:49:48
【问题描述】：

我正在尝试将扩展图标设置为画布图像。我似乎无法设置它。我只想让基础工作并从那里扩展。我可以在文件结构中设置带有图像的图标，但我希望以后能够动态更新文本。

我尝试了几种方法来设置 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);
}

【问题讨论】：

标签： javascript canvas google-chrome-extension icons

【解决方案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)
  });
}

【讨论】：

谢谢，createElement 正是我所缺少的。