谷歌浏览器扩展画布图标 [英] 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屋!