跳轉至

建立 2026-09-17 更新 2026-09-17

chrome.action 與其他互動 API

除了 Popup 與 Content Script，Chrome 還提供幾個讓擴充功能主動與使用者互動的 API：控制工具列圖示、加上右鍵選單、跳出系統通知、定時執行工作。這些多半只需要在 Background 呼叫幾行程式碼，投資報酬率很高。

:material-toolbar: chrome.action：工具列圖示

若 manifest.json 沒有設定 default_popup，點擊圖示會觸發 onClicked；也可以動態改變圖示上的角標文字（badge）：

chrome.action.onClicked.addListener((tab) => {
  console.log("被點擊的分頁：", tab.url);
});

// 在圖示右下角顯示數字角標
chrome.action.setBadgeText({ text: "3" });
chrome.action.setBadgeBackgroundColor({ color: "#4285F4" });

chrome.contextMenus：右鍵選單

manifest.json（片段）
{ "permissions": ["contextMenus"] }
background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "save-selection",
    title: "儲存選取的文字",
    contexts: ["selection"],
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  console.log("使用者選取了：", info.selectionText);
});

contexts 可以是 "selection"（選取文字時）、"image"、"link"、"page" 等，決定選單在什麼情境下出現。

chrome.notifications：系統通知

manifest.json（片段）
{ "permissions": ["notifications"] }

chrome.notifications.create({
  type: "basic",
  iconUrl: "icons/icon128.png",
  title: "筆記已儲存",
  message: "你的筆記已經同步完成。",
});

chrome.alarms：定時任務

Service Worker 會休眠，不能用 setInterval 做長時間的定時任務（休眠後就會停止），要用 chrome.alarms 讓 Chrome 代為排程，時間到會自動喚醒 Service Worker：

chrome.alarms.create("daily-sync", { periodInMinutes: 60 * 24 });

chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === "daily-sync") {
    // 執行每日同步邏輯
  }
});

小結

API 用途 需要的 permission
chrome.action 控制工具列圖示、角標 不需額外宣告（action 本身在 manifest 設定）
chrome.contextMenus 加入右鍵選單項目 contextMenus
chrome.notifications 跳出系統通知 notifications
chrome.alarms 排程定時任務，取代 setInterval alarms

這些 API 讓擴充功能不只是被動等待使用者點擊 Popup，而能主動在對的時機出現。認識完常用 API 後，前往 進階主題，了解權限設計、除錯技巧與如何發布到 Chrome Web Store。