タブルーレット - 私の最初の拡張機能

私の現在の目標は、拡張機能フレームワークのバックグラウンド機能を利用するシンプルな Chrome 拡張機能を作成することです。

要約すると、バックグラウンド スクリプトは Service Worker として動作し、主にユーザーとの直接対話を必要としないタスクを処理するように設計されています。

その重要な役割の 1 つは、通信ハブまたはイベント ハンドラーとして機能し、ブラウザー拡張機能アーキテクチャにおける唯一の永続的で信頼性の高いコンポーネントとして機能することです。一時的なコンテンツ スクリプト、ポップアップ、オプション ページとは異なり、バックグラウンド サービス ワーカーは終了時に自動的に再起動して受信イベントを処理することで継続性を確保します。

バックグラウンド スクリプトのこの機能を拡張機能の中央コントローラーとして利用する予定です。

使用例

この最初の Chrome 拡張機能は非常に簡単です。拡張機能のアクション アイコンのクリックをリッスンし、ルーレットのような動作をトリガーして応答します。ルーレットは、1 つのタブがランダムに選択されたままになるまでの短期間、ユーザーのブラウザで現在開いているタブを順番にアクティブにします。

ご覧のとおり、この拡張機能は実用的な目的を持たず、純粋に学習演習を目的としています。

マニフェスト

{
  "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 ウェブストアと拡張機能管理インターフェイスで使用するためにマニフェストで指定されたアイコンに加えて、最も重要な追加点は action 属性です。この属性は、ツールバー アイコンをクリックしたときの拡張機能の動作を構成します。この例では、ユーザー操作時にタブ ルーレットを開始するように Service Worker に指示します。

考慮する
私のコードでは 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,
});

windowId を指定せずに chrome.tabs.query を使用すると、開いているすべてのブラウザ ウィンドウのすべてのタブが返されるのに対し、アクティブなウィンドウのタブのみが必要だったため、最初は混乱しました。これにより、リスト内のタブの数が増えるため、予期しない結果が発生しました。

この動作を理解すると、タブを順番にアクティブにすることが簡単になりました。最終的にランダムなタブが選択されるまで、タブのプロパティを更新して各タブを順番にアクティブに設定するだけです。

{
  "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"
  }
}

私が達成したいもう 1 つの目標は、タブがアクティブになるペースを調整することでした。最初は速く、最後に近づくにつれて遅くなります。これを達成するには、最初のテストで使用したネイティブの setInterval 関数では不十分でした。代わりに、調整可能な間隔を作成できる小さなユーティリティを実装し、必要に応じてタイミングを動的に変更する方法を提供しました。

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

これで終わりです。遊び心のある使用例を備えたシンプルな拡張機能は、ブラウザ拡張機能の世界をさらに深く掘り下げる口実として機能します。詳細に興味がある場合は、ソース コードも共有します。

ああ、私はこのプロジェクトを使用して出版プロセスを検討しましたが、これは非常に簡単であることがわかりました。今はレビューと最終的な出版を待っているところです。

https://github.com/ivaneffable/tabRoulette

以上がタブルーレット - 私の最初の拡張機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。