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

chrome.tabs 與 chrome.scripting

這兩個 API 通常只能在 Background 或 Popup／Options 這類擴充功能自己的頁面中呼叫（Content Script 不能用），負責取得瀏覽器分頁資訊，以及動態把程式碼注入指定分頁——是 Content Scripts 提到「動態注入」的具體實作方式。

chrome.tabs：查詢與操作分頁

// 取得目前作用中的分頁（最常用的寫法）
const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
console.log(activeTab.url, activeTab.title);

// 開啟新分頁
chrome.tabs.create({ url: "https://developer.chrome.com/docs/extensions" });

// 更新目前分頁網址
chrome.tabs.update(activeTab.id, { url: "https://example.com" });

chrome.tabs.query 回傳的 Tab 物件包含 id、url、title、favIconUrl 等資訊，是與特定分頁互動前一定會先呼叫的方法。

chrome.scripting：動態注入程式碼

比起在 manifest.json 靜態宣告 content_scripts（每個符合網址的頁面都會自動注入），chrome.scripting.executeScript 讓你只在需要的當下才注入，通常綁在使用者點擊工具列圖示的事件上：

chrome.action.onClicked.addListener(async (tab) => {
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content.js"],
  });
});

也可以直接注入一段函式，不需要另外的檔案，適合簡單的邏輯：

chrome.scripting.executeScript({
  target: { tabId: activeTab.id },
  func: () => {
    document.body.style.filter = "grayscale(1)";
  },
});

搭配 "permissions": ["activeTab", "scripting"]（不需要 host_permissions），Chrome 會在使用者主動觸發時暫時授權存取當前分頁，符合權限最小化原則，也是 Chrome 官方建議的預設做法。

靜態宣告 vs. 動態注入

下一步

接著看 chrome.action 與其他互動 API，認識工具列圖示、右鍵選單、通知與鬧鐘。