【Chrome拡張機能】空白のポップアップを表示させる。
今回はgooglechrome拡張機能で空白のポップアップを表示させてみます。
まず、拡張機能に必要なファイルを入れるためのフォルダを作成します。別にどこでもいいのですが、cドライブ直下に拡張機能のフォルダを入れるためのフォルダを作っておくとわかりやすいかもしれません。
フォルダの中には、
アイコン用の画像ファイル(19×19ピクセル)
マニフェストファイル(.json)
HTMLファイル
などを入れます。
マニフェストファイルは拡張機能の名前や動作説明、アイコンやアイコンを押したときに動作するファイルなどを設定するファイルです。今回はこんな風に書いてみました。
{ "name":"Test", //拡張機能の名前を設定 "version":"1.0", //バージョン管理 "description":"The test extension.", //拡張機能の説明 "browser_action":{ "default_icon":"icon.png", //アイコン "popup":"popup.html" //アイコンを押したときにポップアップするHTMLファイル } }
アイコンを押すと、popup.htmlというファイルがポップアップされるように設定しました。popup.htmlは
<style> body{ min-width:300px; min-height:300px; } </style>
としています。単純に高さと幅の最小値を設定しただけですね。これに加えてアイコンを用意すれば、準備は完了です。あとはこれをchromeに読み込んでやれば(前回記事の参考リンクをご覧ください)アイコンが右上リストに表示され、それをクリックするとポップアップが表示されます。