Hi Dai Gei Ho~ 我是Winnie ~

在此篇文章中，我們要來針對 Tab 頁籤的操作 與 監聽事件 使用方法來進行介紹。

如果大家還有印象，在前面文章中，不管是 Content Script 的介紹、還是相關程式的應用，多少會看到關於 chrome.tabs 的蹤影，像是 Extension間的資料傳遞、Cotent Script動態注入程式的使用方法，

這是為什麼呢？

因為 chrome.tabs API 主要是用來 與瀏覽器頁籤互動，像是針對頁籤來新增、修該、排列順序，是在API中常使用的方法之一。

但因為其相關應用實在是有點多，所以在30天的文章目錄編排中，將他獨立一篇出來進行相關方法的使用介紹。

註冊

首先，依照慣例，如果要使用 chrome.tabs相關方法，我需在Manifest 中的Permissions權限中 宣告 tabs，如需存取當前 active 頁籤（網頁）的權限，同時也需要宣告 activeTab。

{
    "name": "MyExtension",
    ...
    "permissions":["tabs", "activeTab"]
    ...
}

常見 Chrome Tabs API

因為在 Chrome.tab 操作現有頁籤方法有點多，我們將功能切分為 操作改變頁籤 、 查詢頁籤資訊 和 頁籤事件觸發 來做方法介紹。

操作頁籤 :

建立新頁籤

可以透過 chrome.tabs.create()方法，以物件型別 指定url(key)的網址(value)。

chrome.tabs.create({
     url: 'onboarding.html'
});

關閉頁籤

這邊刪除頁籤數量可以是一個或是多個，如需要刪除多個頁籤，可以將第一個參數改為陣列型別，放置多個tabId。

chrome.tabs.remove(
  tabIds: number | number[],
  callback?: function,
)

移動頁籤位置

透過chrome.tabs.move 方法可以將一個或多個頁籤移動至當前所在視窗的新位置，或者移動到新視窗中。

但需注意，頁籤只能在普通窗口（window.type === "normal"）間移動。

 chrome.tabs.move(
  tabIds: number | number[],
  moveProperties: object,
  callback?: function,
)

重新載入頁籤

chrome.tabs.reload(
  tabId?: number,
  reloadProperties?: object,
  callback?: function,
)

回上一頁

chrome.tabs.goBack(
  tabId?: number,
  callback?: function,
)

查詢頁籤資訊:

取得特定頁籤

透過 chrome.tabs.query() ，透過帶入的條件選項可以篩選出所要的頁籤，如果沒有帶入條件，則會取得所有頁籤。

以下程式為例:

透過 設定 active為 true 即可取得 當前頁面。

const getCurrentTab= async ()=>{
  let queryOptions = { active: true, lastFocusedWindow: true };
 
  let [tab] = await chrome.tabs.query(queryOptions);
  
  return tab;
}

取得當前Background執行頁籤

透過chrome.tabs.getCurrent方法可以取得當前所在的頁籤資訊，但需注意如果在非頁籤環境下調用則可能返回 undefined（例如，Background或 Popup）。

chrome.tabs.getCurrent(
  callback?: function,
)

關於 條件設置選項細節可以查詢 文件內容

相關事件監聽器

onCreated

chrome.tabs.onCreated為創建頁籤時觸發，回傳參數為 tab 基本資訊，像是 tabId、URL等

chrome.tabs.onCreated.addListener((tab)=>{})

onUpdated

chrome.tabs.onUpdated為頁籤更新時觸發，不論點擊連結有新增頁籤、重載頁面，只要Url更換就會觸發。

chrome.tabs.onUpdated.addListener((tabId: number, changeInfo: object, tab: Tab)=>{})

onActivated

chrome.tabs.onActivated為切換頁籤時觸發。

當該事件發生時，如果網頁還沒載入完成有可能取不到url，所以建議可以設置onUpdated事件來取得當前觸發頁籤的 url。

chrome.tabs.onActivated.addListener((activeInfo: object)=>{})

onRemoved

chrome.tabs.onRemoved當關閉頁籤時觸發。

chrome.tabs.onRemoved.addListener((tabId: number, removeInfo: object)=>{}}])

訊息傳遞

一次性請求:

  chrome.tabs.sendMessage(tabs[0].id, { from: 'background.js' }, (response)=>{
   console.log(response.from);
 });
 

長時間請求:

chrome.tabs.connect(tabId, object connectInfo)

關於 頁籤訊息傳遞 方法，因為在前天文章中已介紹過了，這邊可能就不再多以描述了，詳情請見 -> Extension間的資料傳遞

那以上就是 Tab 頁籤操作常見應用的介紹，那想在這邊預告一下，在明天文章關於Extension常見方法篇就要吿一個段落了（呼，接下來要進入Vite 與Extension的開發使用篇了，再請各位敬請期待下(坑來了。

那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

今日有感而發:

一個下午，今天去了以前學校附近的 北美館
看了幾個展，跟朋友聊著以前
走著走著...才發現
當初習以為常的日常 是現在少數不多的美好

今天想分享一首 -> 下一站茶山劉