【Chrome拡張開発】拡張機能アイコンのクリック時にポップアップを表示する

最近Chrome拡張を開発してみてるので、その開発メモです。基本的には以下のGoogleの公式リファレンスを参考にしてます。

参考：chrome.browserAction | Reference | Chrome for Developers

やりたいこと#

こんな感じで、Chromeのツールバーにある拡張機能のアイコンをクリックしたら、設定画面的なものを表示させたいです。

実現方法#

manifest.jsonに以下を追記します。

1
"browser_action": {
2
  "default_icon": "icon.png",                // ツールバーに表示される拡張機能のアイコン。無くても可（デフォルトアイコンになる）。
3
  "default_title": "Hide Unnecessary Site",  // ツールバーの拡張機能アイコンにマウスオーバーしたときに表示されるテキスト。無くても可。
4
  "default_popup": "popup.html"              // 拡張機能アイコンをクリックしたときに表示されるHTML
5
},

最低限必要なのは"default_popup"になります。ここに設定したpopup.htmlをこんな感じで作ってみます。

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
  </head>
5
  <body>
6
    <h3>Chrome Extension Template</h3>
7
  </body>
8
</html>

Chromeにこの拡張機能を読み込ませて、ツールバーの拡張機能アイコンをクリックしてみます。

無事popup.htmlの内容が表示されました。でも、なんだかポップアップが小さいような。。。

調べてみると、cssでwidthを設定すればうまい具合の大きさにできそうです。

参考：google chrome extension - popup.html - change width? - Stack Overflow

上記を参考にcssでmin-widthを指定してみます。

1
body {
2
  min-width: 300px;
3
}

そしてこのcssをpopup.htmlで読み込みます。

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <link rel="stylesheet" type="text/css" href="popup.css">
5
  </head>
6
  <body>
7
    <h3>Chrome Extension Template</h3>
8
  </body>
9
</html>

無事いい感じの大きさでポップアップを表示できました。