Chrome拡張のボタンを押すと、ポップアップ画面が表示されて何かをするものがありますよね？
今回は、そのようなアプリの足掛かりとなる、ポップアップ画面の表示を行うまでをご紹介していきます。
やりたいこと
Chrome拡張のボタンを押すと、ポップアップ表示が出てくる拡張があります。
これと同じように、ポップアップ表示をする拡張を作っていきます。
ついでにボタンのアイコンも指定します。
ちなみに今回は、コチラのサイトを参考に作成しました。
やりかた
まずはこれらのファイルを準備します。
- icon128.png
- popup.html
- manifest.json
では、それぞれのファイルの詳細を説明していきます。
アイコン
アイコンは、128x128のPNGファイルを適当に準備します。
ぼくはこんなのを用意しました。
至って適当ですね(笑)
表示するポップアップ画面
ポップアップ画面は、HTMLで作成します。
今回は、文字を表示するだけの簡単な画面を用意しました。
<html> <head> <title>popup-test</title> </head> <body> <p>test popup</p> </body> </html>
マニフェストファイル
マニフェストファイルはこんな感じです。
{ "name": "MyTestChromePopupExtention", "version": "0.0.1", "manifest_version": 2, "description": "Test popup extention", "icons": { "128": "icon128.png" }, "browser_action": { "default_title": "", "default_icon": "icon128.png", "default_popup": "popup.html" } }
以前のスクリプトタイプのものと異なるのは
- 「icons」を追加
- 「content_scripts」がない
- 代わりに、「browser_action」が追加
icons
アイコンは3種類のサイズを指定できるようです。
拡張機能のアイコンです。サイズは 128x128, 48x48, 16x16 があるといいようです。それぞれ、Chrome ウェブストアや拡張機能の管理ページやファビコンとかに使われます。
画像の形式は png が推奨されています。
manifest.json
“icons”: {
“16”: “icon16.png”,
“48”: “icon48.png”,
“128”: “icon128.png”
},
参考：Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
ただ128だけ設定でも普通に動作しているので、特に問題ないかと思われます。
ホーム画面や拡張管理画面、ボタン等、サイズの異なるものを表示するのに設定しておいた方が良い、ということなのでしょうか？
browser_actionとcontent_scripts
「content_scripts」はスクリプトを設定する場合のもののようです。
今回はスクリプトではなく、ポップアップ画面の表示を行う為、これは削除します。
代わりに「browser_action」を設定して、ポップアップ画面の設定を行います。
"browser_action": { "default_title": "", "default_icon": "icon128.png", "default_popup": "popup.html" }
各要素の概要はコチラ。
| 要素 | 概要 |
|---|---|
| default_icon | ボタンのアイコンを指定 |
| default_title | ボタンのツールチップで表示されるタイトルを指定(省略時はnameが使用される) |
| default_popup | クリック時にポップアップされるHTMLを指定 |
default_titleの省略時に使われる「name」は、今回のmanifest.jsonの場合、先頭要素にある「name」です。
作ったファイルをChromeへ
ここまで作ったらあとはChromeへ入れるだけです。
入れ方は前回同様なので、コチラをご参照ください。
実行してみる
Chromeへインストールが完了すると、メニューボタン左側に設定していたアイコンが表示されます。
コレを押すと……
こんな感じでポップアップが出てきます。
成功ですね！
あとがき
いかがでしたでしょうか？
このpopup.htmlやらをいじっていけば、よくあるChrome拡張になるのではないでしょうか。
試しに何か作ってみたいところですね
