Chrome 拡張機能を作って公開しよう② 〜ポップアップの作成〜
投稿: 2021年8月2日 (最終更新: 2023年12月9日) • 5 分 で読了 • 2,117 語1回15分でサクッと開発。今回はポップアップの作成。
拡張機能を作るシリーズ第2弾!今回は拡張機能のポップアップを作成していきます!
これでかなり拡張機能っぽくなります。
拡張機能のアイコンをクリックした時に出てくるもののことです。ここから拡張機能の設定や操作を行うことができます。拡張機能を使ったことがあれば、一度は目にしたことがあるでしょう。
実は、このポップアップは、HTMLとCSSでできています!
ということで、サクッと作っちゃいましょう!
前回、「作るものはお楽しみ」と言っておきましたが、今回作っていく拡張機能が、ついに決まりました。
それは、「開いているページのタイトルとURLをコピーする拡張機能」です。
イメージはこんな感じです↓
では、早速作っていきましょう!
ブラウザに、「これはこのような拡張機能ですよ」と教えてあげるための、設定ファイルを作っていきます。
拡張機能開発用のフォルダを作って、manifest.json
を作成してください。その後、下のコードを記述してください。
{
"name": "タイトルとURLをコピー",
"subheading": "ページのタイトルとURLを簡単にコピーできます。",
"version": "1.0",
"manifest_version": 3,
"icons": {
"16": "icon_16x16.png",
"48": "icon_48x48.png",
"128": "icon_128x128.png"
},
"action": {
"default_title": "タイトルとURLをコピー",
"default_icon": "icon_48x48.png",
"default_popup": "popup.html"
}
}
では、このmanifest.json
について解説していきます。
名称 | 説明 |
---|---|
name | 拡張機能の名称 |
subheading | 拡張機能の説明。ブラウザの「拡張機能の管理」ページなどに表示される。 |
version | 拡張機能のバージョン。 1.0→1.0.1→1.0.2→…→1.1→…→2.0 のように新しくなっていく。アップデートのたびにバージョン番号を新しくしていく。 |
manifest_version | この設定ファイル(manifest.json )の仕様のバージョン。ここでは最新の 3 を指定。 |
icons | 拡張機能のアイコン。16x16 、48x48 、128x128 の3種類の大きさを用意しなくてはならない。アイコンの画像は後ほど配布します。 |
action | ポップアップに関する設定。default_title で、拡張機能のアイコンにカーソルをホバーした時に表示されるテキストを指定。default_icon で、ブラウザのURLバーの右側に表示される、拡張機能のアイコンを指定。ここでは、先程のicons で指定した48x48 の画像を流用。default_popup で、ポップアップとして表示させるHTMLファイルを指定。 |
アイコンは下のリンクからダウンロードできます。
.zip
形式ですので、解凍して拡張機能の開発用フォルダの一番上の階層に、3つの画像を配置してください。
今回は、「ICOOON MONO」様からお借りしました。この場をお借りして御礼申し上げます。
なお、現在のフォルダの中身はこのようになっています。
それでは、HTML ファイルを記述してポップアップを作っていきます。
開発用フォルダの一番上の階層に、popup.html
を作成し、以下のコードを記述してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<p class="hello">Hello, world</p>
<script src="popup.js" defer></script>
</body>
</html>
同様に、popup.css
も作成し、以下のコードを記述してください。
body{
width: 400px;
}
.hello{
color: #333;
font-size: 30px;
}
最後に、popup.js
を作成し、以下のコードを記述してください。
setTimeout(() => {
alert("Hello, world! (from js)");
}, 700);
現時点でのフォルダの中身はこのようになっています。
ここまで、
manifest.json
)popup.html
)popup.css
)popup.js
)を作成してきました。
それでは、ちゃんと動作するかテストしてみましょう。
テストの手順は以下のとおりです。
chrome://extensions
を開くこのように、拡張機能がリストに追加されていれば成功です。
リストに追加されていることを確認できたら、URLバーの右側にある「パズルのピースのマーク」をクリックすると表示される拡張機能の一覧に、「タイトルとURLをコピー」という拡張機能が追加されているはずなので、クリックして開いてみてください。
このようなものが表示された後、「Hello, world! (from js)」というアラートが表示されたら完璧です!
なお、拡張機能の一覧のピンのマークをクリックすると、URLバーの右側に固定されるので、今後テストをする際に便利です。
manifest.json
、HTMLファイル、JavaScript ファイル、CSS ファイルが必要である。manifest.json
は拡張機能の情報を、ブラウザに伝えるためのファイルである。いかがでしたか?
次回は、このポップアップを更に充実させていきます!お楽しみに!
「Chrome 拡張機能を作ろう」の記事一覧
関連記事
2021年7月30日 • 3 分 で読了
Chrome 拡張機能を作って公開しよう① 〜環境構築〜
環境構築するほどのことでもないが。
2021年7月29日 • 2 分 で読了
Jekyll について
Jekyll について説明します。