この記事は、先日ブログに投稿したものと同じ内容です。ぜひ、ブログの方もご覧ください。

拡張機能を作るシリーズ第2弾！今回は拡張機能のポップアップを作成していきます！

これでかなり拡張機能っぽくなります。

ポップアップとは

拡張機能のアイコンをクリックした時に出てくるもののことです。ここから拡張機能の設定や操作を行うことができます。拡張機能を使ったことがあれば、一度は目にしたことがあるでしょう。

実は、このポップアップは、HTMLとCSSでできています！

ということで、サクッと作っちゃいましょう！

今回作っていくもの

前回、「作るものはお楽しみ」と言っておきましたが、今回作っていく拡張機能が、ついに決まりました。

それは、「開いているページのタイトルとURLをコピーする拡張機能」です。

イメージはこんな感じです。(汚くてすみません)↓

では、早速作っていきましょう！

設定ファイルを作る

ブラウザに、「これはこのような拡張機能ですよ」と教えてあげるための、設定ファイルを作っていきます。

拡張機能開発用のフォルダを作って、manifest.json を作成してください。その後、下のコードを記述してください。

manifest.json

{
    "name": "タイトルとURLをコピー",
    "subheading": "ページのタイトルとURLを簡単にコピーできます。",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
      "16": "icon_16x16.png",
      "48": "icon_48x48.png",
      "128": "icon_128x128.png"
  },
    "action": {
      "default_title": "タイトルとURLをコピー",
      "default_icon": "icon_48x48.png",
      "default_popup": "popup.html"
    }
  }

では、このmanifest.jsonについて解説していきます。

名称	説明
`name`	拡張機能の名称
`subheading`	拡張機能の説明。ブラウザの「拡張機能の管理」ページなどに表示される。
`version`	拡張機能のバージョン。　1.0→1.0.1→1.0.2→...→1.1→...→2.0 のように新しくなっていく。アップデートのたびにバージョン番号を新しくしていく。
`manifest_version`	この設定ファイル(`manifest.json`)の仕様のバージョン。ここでは最新の `3` を指定。
`icons`	拡張機能のアイコン。`16x16`、`48x48`、`128x128`の3種類の大きさを用意しなくてはならない。アイコンの画像は後ほど配布します。
`action`	ポップアップに関する設定。 `default_title`で、拡張機能のアイコンにカーソルをホバーした時に表示されるテキストを指定。 `default_icon`で、ブラウザのURLバーの右側に表示される、拡張機能のアイコンを指定。ここでは、先程の`icons`で指定した`48x48`の画像を流用。 `default_popup`で、ポップアップとして表示させるHTMLファイルを指定。

アイコン

アイコンは下のリンクからダウンロードできます。

.zip形式ですので、解凍して拡張機能の開発用フォルダの一番上の階層に、3つの画像を配置してください。

ダウンロード

今回は、「ICOOON MONO」様からお借りしました。この場をお借りして御礼申し上げます。

本家様

なお、現在のフォルダの中身はこのようになっています。

HTML ファイルの作成

それでは、HTML ファイルを記述してポップアップを作っていきます。

開発用フォルダの一番上の階層に、popup.html を作成し、以下のコードを記述してください。

popup.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
    <p class="hello">Hello, world</p>
    <script src="popup.js" defer></script>
</body>
</html>

同様に、popup.cssも作成し、以下のコードを記述してください。

popup.css

body{
    width: 400px;
}
.hello{
    color: #333;
    font-size: 30px;
}

最後に、popup.jsを作成し、以下のコードを記述してください。

popup.js

setTimeout(() => {
    alert("Hello, world! (from js)");
}, 700);

現時点でのフォルダの中身はこのようになっています。

テストする

ここまで、

設定ファイル(manifest.json)
HTMLファイル(popup.html)
CSSファイル(popup.css)
JavaScriptファイル(popup.js)

を作成してきました。

それでは、ちゃんと動作するかテストしてみましょう。

テストの手順は以下のとおりです。

Chrome で chrome://extensions を開く
画面右上の「デベロッパーモード」をオン
「パッケージ化されていない拡張機能を読み込む」
拡張機能の開発用フォルダを「開く」

このように、拡張機能がリストに追加されていれば成功です。

リストに追加されていることを確認できたら、URLバーの右側にある「パズルのピースのマーク」をクリックすると表示される拡張機能の一覧に、「タイトルとURLをコピー」という拡張機能が追加されているはずなので、クリックして開いてみてください。

このようなものが表示された後、「Hello, world! (from js)」というアラートが表示されたら完璧です！

なお、拡張機能の一覧のピンのマークをクリックすると、URLバーの右側に固定されるので、今後テストをする際に便利です。

まとめ

ポップアップ付き拡張機能の作成には、manifest.json、HTMLファイル、JavaScript ファイル、CSS ファイルが必要である。
manifest.jsonは拡張機能の情報を、ブラウザに伝えるためのファイルである。
HTML、CSS、JavaScript でポップアップを作成する。ここは、普通のWebアプリと変わらない。
Chromeの「デベロッパーモード」を使えば、拡張機能を簡単にテストできる。

いかがでしたか？

次回は、このポップアップを更に充実させていきます！

なお、今回扱ったコードは、こちらから見られます。

【連載一覧】

Chrome 拡張機能を作って公開しよう② 〜ポップアップの作成〜