ここまで、ページの色を変えたり、文字を取得したりしてきました。これらはContent Scripts（コンテンツスクリプト） の仕事でした。
しかし、拡張機能にはもう一つ重要な役割を持つ Service Worker（サービスワーカー） というプログラムが存在します。
どちらもJavascriptで記載されていて、ページに沿った動作なども行うためちょっとわかりにくかもしれません。
ここでつまづく人がとても多いので、まずはこの2つの違いをハッキリさせましょう。
Content Script と Service Worker の違い
Content Script と Service Worker の違いを一言で言うと、動作する場所が違います。
Content Scriptは今開いているWebページの中で動作し、Service Workerはブラウザの裏側（バックグラウンド）で動作するイメージです。
| content script | service worker | |
|---|---|---|
| 動く場所 | Webページ内 | ブラウザの裏側（バックグラウンド） |
| イメージ | 表、最前線 | 裏、司令塔 |
| できること | ページの文字や色を変える (DOM操作) | ブラウザ全体のイベントを監視する |
| 寿命 | ページを閉じたら終了 | イベントが起きればいつでも起動 |
よく例えれるのはレストランです。
Content Script は「ウェイター」です。
お客様（Webページ）の目の前にいて、料理を出したり、お皿を片付けたり（ページ操作）します。
お客様が帰ったら（タブを閉じたら）、そのテーブルでの仕事は終わりです。
Service Worker は「店長（厨房）」です。
お客様の席（Webページ）には直接行けません（Service Workerは裏方にいるため、document.getElement… などのページ操作ができません）。
その代わり、「店が開いた（インストール時）」、「予約の電話が鳴った（イベント発生）」、「全ウェイターへの指示出し」など、店全体の管理を行います。
実装
上記を踏まえて、Service Workerを使用してコンテキストメニュー(右クリックすると表示されるメニュー）を追加してみます。
コンテキストメニューには「Googleを開く」という項目が追加されて、これをクリックするとGoogleのページが開くようにします。
これは特定のWebページの中ではなく、ブラウザ自体の機能を追加する仕事なので、Service Workerの担当です。
まずはデスクトップなど任意の場所に新しいフォルダを作成します。名前は contextMenus等、何でも大丈夫です。
このフォルダの中に「manifest.json」、「background.js」という２つのファイルを作成します。
テキストエディタ（メモ帳やVS Codeなど）を開いて、以下のコードをコピー＆ペーストして保存してください。
manifest.json（設定ファイル）
{
"name": "右クリックメニュー追加",
"version": "1.0",
"manifest_version": 3,
"permissions": ["contextMenus"],
"background": {
"service_worker": "background.js"
}
}
１． permissions: [“contextMenus”]
右クリックメニューを操作する権限を設定します。
２． background
この拡張機能の裏方として background.js と指定します。
background.js（サービスワーカー）
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "my-menu",
title: "Googleを開く",
contexts: ["all"]
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "my-menu") {
chrome.tabs.create({ url: "https://www.google.com" });
}
});
１． chrome.runtime.onInstalled.addListener
「拡張機能がインストール（または更新）された瞬間」だけ動くイベントです。
右クリックメニューの作成は1回だけ行えば良いので、この中に書きます。これがないと、ブラウザを起動するたびにメニューを二重、三重に作ろうとしてエラーになることがあります。
２． chrome.contextMenus.create
実際にメニューを追加する設定です。
id: メニューの識別番号です。自分で好きな名前をつけます（プログラムで判定するのに使います）。
title: 実際に画面に表示される文字です。
contexts: どこで右クリックした時に表示するかを決めます。[“all”] なら画像の上でもリンクの上でもどこでも表示されます。
３． chrome.contextMenus.onClicked.addListener
「メニューがクリックされた時」に動くイベントです。
カッコの中の info には「どのメニューが押されたか」、tab には「どのタブで押されたか」という情報が入っています。
４． if (info.menuItemId === “my-menu”)
「押されたのが、 “my-menu” だった場合」という確認です。
他の拡張機能や、自分の拡張機能内で複数のメニューを作った時に、どれが押されたかを区別するために必要です。
５． chrome.tabs.create
新しいタブを開く命令です。
裏方（Service Worker）は直接画面を操作できませんが、このように「タブを開く」「閉じる」といったブラウザ全体の操作は得意分野です。
実行
「拡張機能をインストールして実行する」を参考にして拡張機能インストールして、任意のページで右クリックするとコンテキストメニューが開き「Googleを開く」という項目があることを確認できます。
この「Googleを開く」という項目をクリックすると「https://www.google.com/」のページが開きます。
