lisz-works

技術系だけど関係ないこと多い系ブログ

Chrome拡張ボタンでポップアップ画面が表示されるのを作ってみた

【スポンサーリンク】

Chrome ロゴ

Chrome拡張のボタンを押すと、ポップアップ画面が表示されて何かをするものがありますよね?

pushbuletのポップアップ表示

今回は、そのようなアプリの足掛かりとなる、ポップアップ画面の表示を行うまでをご紹介していきます。

やりたいこと

Chrome拡張のボタンを押すと、ポップアップ表示が出てくる拡張があります。

これと同じように、ポップアップ表示をする拡張を作っていきます。

ついでにボタンのアイコンも指定します。

ちなみに今回は、コチラのサイトを参考に作成しました。

risaiku.net

やりかた

まずはこれらのファイルを準備します。

  1. icon128.png
  2. popup.html
  3. manifest.json

では、それぞれのファイルの詳細を説明していきます。

アイコン

アイコンは、128x128のPNGファイルを適当に準備します。

ぼくはこんなのを用意しました。

icon128.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"
  }
}

以前のスクリプトタイプのものと異なるのは

www.lisz-works.com

  1. 「icons」を追加
  2. 「content_scripts」がない
  3. 代わりに、「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へ入れるだけです。

入れ方は前回同様なので、コチラをご参照ください。

www.lisz-works.com

実行してみる

Chromeへインストールが完了すると、メニューボタン左側に設定していたアイコンが表示されます。

コレを押すと……

こんな感じでポップアップが出てきます。

popup表示 完成

成功ですね!

あとがき

いかがでしたでしょうか?

このpopup.htmlやらをいじっていけば、よくあるChrome拡張になるのではないでしょうか。

試しに何か作ってみたいところですね