button - Chrome 拡張機能 - クロム アクション ボタンのカスタム デザイン

Question

Chrome 拡張機能の拡張アクション ボタンのデザイン (ビュー) をカスタマイズしたいと考えています。

画像だけでなくhtmlも使えるか知りたいです。ボタンにテキストと数字を表示したいと思います。テキストと番号を更新できるようにしたいと思います。

必要な情報を含む画像を生成し、デフォルトのボタン アイコンを変更できれば幸いです。しかし、私は何も見つかりませんでした。

事前に感謝

Answer 1

動的ブラウザ アクション アイコンを作成するには、HTML5 Canvas 要素を使用します。キャンバスを作成し、それに画像やテキストを追加してから、キャンバスの画像データを に渡しますchrome.browserAction.setIcon。

canvas以下に小さな例を示します (要素の作成に jQuery を使用していることに注意してください)。

$('body').append('<canvas id="myCanvas" width="19" height="19"></canvas>');
var myCanvas = document.getElementById('myCanvas');
var context = myCanvas.getContext('2d');
context.fillStyle = "blue";
context.font = "normal 9px Arial";
context.fillText("foo", 0, 19);
chrome.browserAction.setIcon({ imageData: context.getImageData(0, 0, 19, 19) });

作業するピクセルは 19x19 ピクセルしかないため、おそらくフォントを非常に小さくする必要があることに注意してください。

必要に応じて、テキストを画像として作成し、代わりにキャンバスに画像を追加したり、chrome.browserAction.setBadgeText.

詳細については、以下を参照してください。

• HTML5 キャンバス要素にテキストを書き込むにはどうすればよいですか?
• キャンバスを使用したテキストの描画