JavaScriptを使用してChrome拡張アイコンを動的に変更する

Question

一定の時間内に残っている時間を表示する予定のクロム拡張機能を作成しています。 37:03が残っているときにこれを行います（変数timeLeftに保存されています）.AdBlockerはブロックされている広告の量を表示するようにロゴを動的に変更します（写真参照）

Answer 1

browser Actionを見てみましょう、あなたはBadgeと呼ばれて言った、あなたは動的にロゴを変更するbrowserAction.setBadgeTextを使用することができます

ブラウザアクションは、必要に応じてバッジを表示することができます - 。上に積層されたテキストのビットをアイコン。バッジを使用すると、拡張機能の状態に関する少量の情報を表示するブラウザアクションを簡単に更新できます。

バッジのスペースが限られているため、4文字以下にする必要があります。

browserAction.setBadgeTextとbrowserAction.setBadgeBackgroundColorを使用して、バッジのテキストと色をそれぞれ設定します。

Answer 2

榛原愛の答えは、ABPの場合に何が起こるかを説明し、あなたが<canvas>に欲しいものを塗るとimageDataを結果で、アイコンを更新することにより、動的なアイコンを作ることができ、一般的に最も簡単な方法であることに注意してください。

Google Mail Checker sample extensionの例を見ることができます。drawIconAtRotation()の機能を参照してください。

これは、伝えたい情報がテキストでないか、バッジに収まらない（そして「XX：XX」がすでにそれを圧迫している）場合に便利です。