バッジやアイコンの変更

Chrome拡張機能における「バッジ」や「アイコンの変更」は、ユーザーに視覚的な通知や状態表示を提供するための重要なUI要素です。以下では、バッジとアイコンの概要、および変更方法について詳しく説明します。

---

1. バッジ（Badge）とは

バッジは、Chrome拡張機能のツールバーアイコンに重ねて表示される小さな文字列（通常は数値や短いテキスト）です。通知件数や状態表示などに利用されます。

バッジの主な操作

バッジは chrome.action API を使って制御します（Manifest V3の場合）。

バッジのテキストを設定する

javascript
chrome.action.setBadgeText({ text: "3" });

空文字列を指定すると非表示になります。

javascript
chrome.action.setBadgeText({ text: "" });

バッジの背景色を設定する

javascript
chrome.action.setBadgeBackgroundColor({ color: "#FF0000" });

バッジのテキスト色を設定する（一部環境のみ）

javascript
chrome.action.setBadgeTextColor({ color: "#FFFFFF" });

※setBadgeTextColor はManifest V3以降に追加された機能です。

---

2. アイコン（Icon）とは

拡張機能のツールバー上に表示される画像です。状態に応じてアイコンを変更することで、視覚的にフィードバックを与えることができます。

アイコンの変更方法

単一の画像に変更

javascript
chrome.action.setIcon({ path: "icons/active_icon.png" });

解像度に応じて複数のサイズを指定

javascript
chrome.action.setIcon({
  path: {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
});

---

3. 使用例：状態に応じてバッジとアイコンを変更

javascript
// 条件に応じてバッジとアイコンを設定
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === "update") {
    chrome.action.setBadgeText({ text: "ON" });
    chrome.action.setBadgeBackgroundColor({ color: "#00AA00" });
    chrome.action.setIcon({ path: "icons/enabled.png" });
  } else if (message.type === "clear") {
    chrome.action.setBadgeText({ text: "" });
    chrome.action.setIcon({ path: "icons/disabled.png" });
  }
});

---

4. manifest.json の設定例

json
{
  "manifest_version": 3,
  "name": "Badge and Icon Example",
  "version": "1.0",
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    },
    "default_title": "バッジとアイコンの例"
  },
  "permissions": ["storage"],
  "background": {
    "service_worker": "background.js"
  }
}

---

補足

• chrome.browserAction は Manifest V2 のAPIで、Manifest V3 では chrome.action に統合されました。

• バッジとアイコンの動的な変更は background.js や popup.js から行うのが一般的です。