google chrome扩展画布图标 [英] google chrome extension canvas icon

问题描述

我尝试将扩展图标设置为画布图像。我似乎无法得到它设置。我只想得到基本的工作和扩展从那里。我可以设置图像与文件结构中的图像，但我想能够动态更新文本。

我尝试了几种方法让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）; 
} 
  

解决方案

假设 document.getElementById（'canvas'）返回一个元素。如果你在一个定义为脚本的后台页面中运行它，它将是空的。

你实际上不需要在DOM中有一个元素上班。只需为此创建一个新的元素。

此外，请注意，您正在使用与背景相同的颜色写入文本;所以它是看不见的。

将它放在一起（并微调坐标）：

 code> draw（）; 
 
 function draw（）{
 var canvas = document.createElement（'canvas'）; //创建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）
}）; 
} 
  

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

解决方案

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

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