谷歌浏览器扩展画布图标 [英] google chrome extension canvas icon

问题描述

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

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.

我尝试了几种方法来设置 chrome.browserAction.setIcon 无济于事.我希望这不是我遗漏的简单东西.

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.

谢谢

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

推荐答案

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

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.

您实际上并不需要在 DOM 中有一个元素才能工作.只需为此创建一个新元素即可.

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

这篇关于谷歌浏览器扩展画布图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！