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

1回15分でサクッと開発。今回はポップアップの作成。

投稿: 2021年8月2日 (最終更新: 2023年5月21日) • 読了目安: 5 分
Chrome 拡張機能を作って公開しよう② 〜ポップアップの作成〜
画像: Jackson So via Unsplash

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

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

ポップアップとは

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

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

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

今回作っていくもの

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

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

イメージはこんな感じです↓

拡張機能のイメージ

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

設定ファイルを作る

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

拡張機能開発用のフォルダを作って、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拡張機能のアイコン。16x1648x48128x128の3種類の大きさを用意しなくてはならない。アイコンの画像は後ほど配布します。
actionポップアップに関する設定。

default_titleで、拡張機能のアイコンにカーソルをホバーした時に表示されるテキストを指定。

default_iconで、ブラウザのURLバーの右側に表示される、拡張機能のアイコンを指定。ここでは、先程のiconsで指定した48x48の画像を流用。

default_popupで、ポップアップとして表示させるHTMLファイルを指定。

アイコン

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

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

ダウンロード

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

本家様

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

フォルダ

HTML ファイルの作成

それでは、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も作成し、以下のコードを記述してください。

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

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

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

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

ファルダの中身

テストする

ここまで、

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

を作成してきました。

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

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

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

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

拡張機能のリスト

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

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

ポップアップ

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

拡張機能をピン留め

まとめ

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

いかがでしたか?

次回は、このポップアップを更に充実させていきます!お楽しみに!




「Chrome 拡張機能を作ろう」の記事一覧

  1. 環境構築
  2. ポップアップ作成(閲覧中)
  3. 仕様に沿って開発
  4. コピー機能実装
  5. 権限を減らす
  6. コンテキストメニューの作成
  7. Webストアに公開