概要
これは初心者のブラウザ拡張機能 Advent Calendar 2024の14日目の記事です。
サイドバーを作る方法を記載します。
サイドバーとは
ブックマークや履歴などを表示する際にブラウザの左側に出てくる画面のことです。
具体的なコード
Javascriptは使用せずに、シンプルにサイドバーを表示するだけの拡張機能を作ります。
manifest.json
{
"browser_specific_settings": {
"gecko": {
"id": "the-town-sample-sidebar@example.com"
}
},
"manifest_version": 2,
"name": "init-extention",
"version": "0.1",
"description": "サイドバーサンプル",
"icons": {
"48": "icons/icon-48.png"
},
"sidebar_action": {
"default_title": "Sample Sidebar",
"default_panel": "sidebar.html",
"default_icon": "icons/icon-48.png"
},
"permissions": [
"tabs",
"notifications"
]
}
sidebar_actionでタイトル、使用するHTMLファイル、アイコンを指定します。
sidebar.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を作ります。
このような形でサイドバーが作られます。
