我們在 Day 19 的時候有提到透過 chrome.tabs.sendMessage API來傳送資料
今天我們來詳細 Tabs API 介紹吧！

在多分頁情境下，我們常常需要「知道使用者正在看哪一個分頁」或「讓 content script 在目前頁面做事」。這時候就會需要使用 Tabs API

什麼是 Tabs API？

chrome.tabs 提供了許多跟瀏覽器「分頁（tab）」有關的功能：

• 取得目前使用中的分頁資訊
• 切換、關閉、更新分頁
• 對特定分頁的 content script 發送訊息

使用前(有些功能需要設定權限)

1. 在 manifest.json 新增 permissions(tabs / activeTab)

   {
      "name": "My extension",
      ...
      "permissions": [
        "tabs"
      ],
      ...
    }
   

使用方法

1. chrome.tabs.create
   • 開啟新頁籤(此方法不需要 permissions)

   chrome.runtime.onInstalled.addListener(({reason}) => {
      if (reason === 'install') {
        chrome.tabs.create({
          url: "onboarding.html"
        });
      }
    });
   

2. chrome.tabs.query(queryInfo, callback)
   • 用來取得目前的分頁資訊，例如當前作用中的分頁。

     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
          const activeTab = tabs[0];
          console.log("目前作用中的分頁：", activeTab);
        });
     

3. chrome.tabs.update(tabId, {muted})
   • 將特定頁籤靜音

    //方法一
    async function toggleMuteState(tabId) {
      const tab = await chrome.tabs.get(tabId);
      const muted = !tab.mutedInfo.muted;
      await chrome.tabs.update(tabId, {muted});
      console.log(`Tab ${tab.id} is ${muted ? "muted" : "unmuted"}`);
    }
   
    //方法二
    function toggleMuteState(tabId) {
      chrome.tabs.get(tabId, async (tab) => {
        let muted = !tab.mutedInfo.muted;
        await chrome.tabs.update(tabId, { muted });
        console.log(`Tab ${tab.id} is ${ muted ? "muted" : "unmuted" }`);
      });
    }
   

4. chrome.tabs.move
   • 移動頁籤

     chrome.tabs.onActivated.addListener(moveToFirstPosition);
   
      async function moveToFirstPosition(activeInfo) {
        try {
          await chrome.tabs.move(activeInfo.tabId, {index: 0});
          console.log("Success.");
        } catch (error) {
          if (error == "Error: Tabs cannot be edited right now (user may be dragging a tab).") {
            setTimeout(() => moveToFirstPosition(activeInfo), 50);
          } else {
            console.error(error);
          }
        }
      }
   

5. chrome.tabs.sendMessage(tabId, message, responseCallback?)
   • 往指定的分頁發送訊息，讓 content script 接收處理。

     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
          chrome.tabs.sendMessage(tabs[0].id, { action: "getMRTitle" }, (response) => {
            console.log("收到 MR 標題：", response.title);
          });
        });
     

chrome.runtime.sendMessage vs. chrome.tabs.sendMessage

1. chrome.runtime.sendMessage
   • 發送訊息給 background（或從 background 廣播出去）。
   • 適合「全域廣播」或「單一入口背景邏輯」的情境。
2. chrome.tabs.sendMessage
   • 對指定的 tabId 發送訊息，只有該分頁注入的 content script 才能接收到。
   • 適合「針對特定分頁操作」的情境，例如：
     • 在某個 tab 執行 DOM 操作
     • 讓 content script 更新當前頁面資料

參考來源

• Chrome 官方文件：Tabs API
• Chrome 官方文件：Content script 通訊