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

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

404  |  Page Not Found  |  Chrome for Developers
developer.chrome.com

やりたいこと

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

実現方法

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

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

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

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h3>Chrome Extension Template</h3>
  </body>
</html>

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

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

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

popup.html - change width?
How do I change the width of popup.html? I've attempted changing the width of the div in it but that seems to have no ef...
stackoverflow.com

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

/* popup.css */
body {
  min-width: 300px;
}

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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="popup.css">
  </head>
  <body>
    <h3>Chrome Extension Template</h3>
  </body>
</html>

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

コメント