Tab Roulette - 我的第一個擴展

我目前的目標是創建一個簡單的 Chrome 擴展，利用擴展框架的後台功能。

回顧一下，後台腳本作為服務工作者運行，主要設計用於處理不需要直接使用者互動的任務。

它的關鍵角色之一是充當通訊中心或事件處理程序，作為瀏覽器擴充架構中唯一持久且可靠的元件。與短暫的內容腳本、彈出視窗或選項頁面不同，後台服務工作執行緒在終止處理傳入事件時會自動重新啟動，從而確保連續性。

我計劃利用後台腳本的這種功能作為我的擴充功能的中央控制器。

用例

第一個 Chrome 擴充功能將非常簡單。它將偵聽擴充功能操作圖示上的點擊，並透過觸發類似輪盤賭的行為進行回應。輪盤賭將在短時間內按順序啟動目前在使用者瀏覽器中開啟的選項卡，直到隨機選擇一個選項卡。

如您所見，此擴充沒有實際目的，而純粹是作為學習練習。

清單

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

除了清單中指定的用於 Chrome Web Store 和擴充功能管理介面的圖示之外，最重要的新增是操作屬性。此屬性配置單擊工具列圖示時擴充的行為。在我們的例子中，它指示服務工作線程在用戶互動時啟動選項卡輪盤​​賭。

考慮到
我的程式碼使用 ES 導入，但如前所述，service_worker 沒有明確聲明為模組。怎麼還有效？

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

這些導入由 Vite 在捆綁過程中處理和解決。

背景

如前所述，後台腳本將監聽操作圖示的點擊並啟動選項卡輪盤​​作為回應。

chrome.action.onClicked.addListener(async () => {
 ...
})

要強調的偵聽器邏輯的關鍵方面：首先，我需要收集目前在活動視窗中開啟的所有標籤。這很重要，因為我的程式碼需要引用這些選項卡才能按順序循環瀏覽它們。

const currentWindow = await chrome.windows.getCurrent();
const windowTabs = await chrome.tabs.query({
  windowId: currentWindow.id,
});

我最初在使用 chrome.tabs.query 而不指定 windowId 時感到困惑，因為它返回所有打開的瀏覽器視窗中的所有選項卡，而我只想要活動視窗中的選項卡。由於清單中的選項卡數量較多，這導致了意外結果。

一旦我了解這種行為，按順序啟動選項卡就變得簡單了。它只涉及更新選項卡屬性以按順序將每個選項卡設定為活動狀態，直到最終選擇隨機選項卡。

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

我想要實現的另一個目標是調整選項卡啟動的速度 - 快速啟動並在接近結束時減慢速度。為了實現這一點，我在初始測試中使用的本機 setInterval 函數是不夠的。相反，我實現了一個小實用程序，它允許我創建一個可調整的間隔，提供一種根據需要動態修改其時間的方法。

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

就是這樣——一個帶有有趣用例的簡單擴展，作為深入研究瀏覽器擴展世界的藉口。如果您對詳細資訊感到好奇，我也會與您分享原始程式碼。

哦，我還使用這個專案來探索發布過程，我發現這非常簡單。現在就等審稿和最終發表了。

https://github.com/ivaneffable/tabRoulette

以上是Tab Roulette - 我的第一個擴展的詳細內容。更多資訊請關注PHP中文網其他相關文章！