Google Chrome Extensions(Google Chrome 拡張機能)のアイコンをhtml5 canvasで描画してみた

GoogleChrome拡張機能をつくりたくなったのでつくってみました。 そのとき、アイコン画像をcanvasを使って表示させたいなと思い検索したのですが、普段プログラムを書くことがない初心者の私が理解できるような情報を直ぐに見つけることができませんでした。それらしい、いくつかの検索結果を組み合わせてやっと表示させることができました。検索しても思うような情報が手に入らないって苦痛だったりします。もしかしたら誰かの役に立つかもしれないと思いメモしておきます。

 

jsファイルに、

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
//ここに描画の内容をかく

var imageData = context.getImageData(0,0,19,19);
chrome.browserAction.setIcon({imageData:imageData});

 

とかいたら表示されました。
表示されているから合ってると思うんですが、なにぶん、素人ですので実は自信がなかったりします。もし、危険な間違いがあったらご指摘ください。

[閉じる]