概要
これは初心者のブラウザ拡張機能 Advent Calendar 2024の16日目の記事です。
ブラウザ拡張機能から呼び出すページを作ります。
拡張機能用ページとは
拡張機能固有の設定や何らかの処理を行うためのページのことです。新しくWindowを作ったりタブを開いて表示します。
具体的なコード
ここではコンテキストメニューから新しいWindowを作ってみます。
manifest.json
{
"browser_specific_settings": {
"gecko": {
"id": "the-town-sample-extpage@example.com"
}
},
"manifest_version": 3,
"name": "init-extention",
"version": "0.1",
"description": "拡張機能ページサンプル",
"icons": {
"48": "icons/icon-48.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"menus"
]
}
background.js
browser.menus.create(
{
id: "sample",
title: "sample menu",
contexts: ["page"],
}
);
function createPage() {
let createData = {
type: "popup",
url: "page.html",
width: 500,
height: 300,
};
let creating = browser.windows.create(createData);
}
browser.menus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "sample") {
createPage();
}
});
コンテキストメニューがクリックされたらcreatePage関数を呼び出します。内部でbrowser.windows.create()関数を使いWindowを作ります。
page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="dark light">
</head>
<body>
<h1>拡張機能ページ</h1>
<p>これはサンプルページです</p>
</body>
</html>
表示するページ用のHTMLファイルです。
拡張機能を読み込ませてコンテキストメニューをクリックすると、下記画像のようにポップアップが出ます。
