今回は開いているページのURLを取得して、サイドパネルに表示する拡張機能です。
まずはデスクトップなど任意の場所に新しいフォルダを作成します。名前は get-url-panel 等、何でも大丈夫です。
このフォルダの中に「manifest.json」、「background.js」、「sidepanel.html」、そしてプログラムを書くための「sidepanel.js」という４つのファイルを作成します。
テキストエディタ（メモ帳やVS Codeなど）を開いて、以下のコードをコピー＆ペーストして保存してください。
manifest.json （設定ファイル）
{
"manifest_version": 3,
"name": "URL取得パネル",
"version": "1.0",
"permissions": [
"sidePanel",
"tabs"
],
"action": {
"default_title": "URLを表示"
},
"background": {
"service_worker": "background.js"
},
"side_panel": {
"default_path": "sidepanel.html"
}
}
１． permissions: [“sidePanel”, “tabs”]
前回に加え、新たに "tabs" という権限を追加しました。
URLなどのタブ情報を取得するためには、この権限申請が必須になります。
２． background, side_panel
これらは前回と同様、アイコンクリック時の挙動と、表示するファイルを指定しています。
background.js （サービスワーカー）
chrome.runtime.onInstalled.addListener(() => {
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});
前回と全く同じコードです。
「アイコンをクリックしたらサイドパネルを開く」という設定をインストール時に行います。
sidepanel.html （表示画面）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>URL Display</title> </head> <body> <h1>現在のURL</h1> <p id="url-text">取得中...</p> <script src="sidepanel.js"></script> </body> </html>
１． <p id=”url-text”>
ここに取得したURLを表示します。
あとでJavaScriptから操作するために、id="url-text" というIDを付けています。
２． <script src=”sidepanel.js”></script>
「ここで sidepanel.js を読み込みこむように設定。
HTMLだけではURLを取得できないため、JavaScriptファイルを読み込みます。
sidepanel.js （ロジック）
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const currentUrl = tabs[0].url;
document.getElementById("url-text").innerText = currentUrl;
});
URLを取得するためのプログラムです。
１． chrome.tabs.query
ブラウザのタブ情報を問い合わせる命令です。
{ active: true, currentWindow: true } と指定することで、「現在見ているウィンドウの、アクティブな（開いている）タブ」を特定します。
２． tabs[0].url
見つかったタブの情報から、URL（アドレス）を取り出しています。
３． document.getElementById(“url-text”).innerText
HTMLファイルに作った id="url-text" の場所を探し出し、その文字（innerText）を、取得したURLに書き換えています。
実行
「拡張機能をインストールして実行する」を参考にして拡張機能インストールして、アイコンをクリックしてみてください。
サイドパネルが開き、現在見ているページのURLが表示されれば成功です！
