[Chrome Extension] Tabs

chrome.tabs

// 撈出所有 tabs（manifest.json 中的 permission 要加上 tabs）
chrome.tabs.query({}, (tabs) => console.log('tabs', tabs));

chrome.tabs.query

chrome.tabs.query(object queryInfo, function callback)

Query all tabs

特別留意，若想 query 所有的 tabs 需要先在 manifest.json 中定義 tabs 才可以 query 到所有 tab：

// 撈出所有 tabs（manifest.json 中的 permission 要加上 tabs）
chrome.tabs.query({}, (tabs) => console.log('tabs', tabs));

// manifest.json
{
  "permissions": [
    "activeTab",
    "tabs"  // 可以 query 到所有 tab 的 url
  ]
}

Query URL

要特別留意，如果要用 url 的方式進行 query，想要被 query 到的 url 必須先在 manifest.json中的 permission 內定義。

例如，若我想要 query https://developer.chrome.com/* 的網址：

chrome.tabs.query({ url: ['https://developer.chrome.com/*'] }, (tabs) => {});

則需要在 manifest.json 中設定該 url 在 permission 內，或者可以直接定義 tabs 就可以 query 到所有 tab 的 url：

// manifest.json
{
  "permissions": [
    "activeTab",
    "https://developer.chrome.com/*" // query 特定 url
  ]
}

⚠️ 注意：可以透過定義 tabs query 到的 tab 不代表可以透過 executeScript 注入 contentScript。

chrome.tabs.executeScript

• 要特別留意，tabId 是選擇性填寫的，如果沒填寫的話預設會使用 activeTab
• 當使用 executeScript 來注入 contentScript 時，對於要被注入的 tab，該網站的 URL 必須被定義在 manifest.json 中的 permission 內才能被 executeScript：

chrome.tabs.executeScript(integer tabId, object details, function callback)

// 不填 tabId 的話，預設會使用 activeTab（只需要在 permissions 中定義 "activeTab" 權限）
chrome.tabs.executeScript({ file: 'contentScript.bundle.js' });

例如，如果我在 query 到 url 後想要在該 tab 注入 contentScript：

chrome.tabs.query({ url: ['https://developer.chrome.com/*'] }, (tabs) => {
  if (tabs.length === 0) return;

  tabs.forEach((tab) => {
    chrome.tabs.executeScript(tab.id, {
      file: 'contentScript.js',
    });
  });
});

雖然有在 manifest.json 中的 permission 定義 tabs，但若沒有定義該 URL，則會無法注入 contentScript 到該 tabs 內：

// manifest.json
{
  "permissions": [
    "activeTab",
    "tabs",
    "https://developer.chrome.com/*" // 若沒定義出 URL 將無法直接對此 tab 使用 executeScript
  ]
}

chrome.tabs.getCurrent

取的當前程式執行的 tab，在非 tab 的情況下有可能會得到 undefined（例如，background page、popup view）。

chrome.tabs.getCurrent((tab) => {...})