2.3 Popup・Options Pages

Popupページ

ツールバーアイコンクリック時に表示される小さなUI。

// manifest.json
{
  "action": {
    "default_popup": "popup/popup.html"
  }
}

// popup.js
document.getElementById('btn').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  await chrome.tabs.sendMessage(tab.id, { action: 'run' });
});

Optionsページ

拡張機能の設定画面。

// manifest.json
{
  "options_ui": {
    "page": "options/options.html",
    "open_in_tab": false
  }
}

// options.js - 設定の保存
document.getElementById('save').addEventListener('click', async () => {
  await chrome.storage.sync.set({
    theme: document.getElementById('theme').value
  });
});

UI設計のポイント

• Popup推奨サイズ: 300〜400px幅
• ダークモード対応を検討
• キーボード操作対応