サイドパネルを開く

引き続き、 Service Worker（サービスワーカー）を使用した拡張機能を作成します。

今回はサイドパネルを開く拡張機能です。

まずはデスクトップなど任意の場所に新しいフォルダを作成します。名前は open-sidepanel等、何でも大丈夫です。

このフォルダの中に「manifest.json」、「background.js」、「sidepanel.tml」という３つのファイルを作成します。

テキストエディタ（メモ帳やVS Codeなど）を開いて、以下のコードをコピー＆ペーストして保存してください。

manifest.json （設定ファイル）
background.js （サービスワーカー）
sidepanel.html （表示画面）
実行

manifest.json （設定ファイル）

{
    "manifest_version": 3,
    "name": "サイドパネルを開く",
    "version": "1.0",
    "permissions": [
        "sidePanel"
    ],
    "action": {
        "default_title": "サイドパネルを開く"
    },
    "background": {
        "service_worker": "background.js"
    },
    "side_panel": {
        "default_path": "sidepanel.html"
    }
}

１． permissions: [“sidePanel”]
サイドパネル機能を使うための必須権限です。

２． action
アイコンの設定です。
【重要】ここに default_popup を書きません。もし書いてしまうと、クリックした時にサイドパネルではなくポップアップが表示されてしまいます。

３． background
「クリック時の挙動」を設定するために、裏方プログラム（background.js）を指定します。

４． side_panel
サイドパネルとして表示するファイル（sidepanel.html）を指定します。

background.js （サービスワーカー）

chrome.runtime.onInstalled.addListener(() => {
    chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});

１． chrome.sidePanel.setPanelBehavior
サイドパネルの「振る舞い」を設定することを意味します。

２． { openPanelOnActionClick: true }
「アクション（アイコン）がクリックされたら、パネルを開くことを有効にする」という意味です。
この1行を書くことで、ブラウザが「このアイコンが押されたらポップアップじゃなくてサイドパネルを出せばいい」と理解してくれます。

sidepanel.html （表示画面）

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

クリックした時に表示されるのサイドパネルの中身です。普通のWebページと同じHTMLで作ります。

実行

「拡張機能をインストールして実行する」を参考にして拡張機能インストールして、アイコンをクリックするとサイドパネルが表示されます。