技術Note

最近、趣味でChromeのプラグインを作りました。基本的なHTML、CSS、JSの知識のみで思ったより簡単につくれたので記事にしようと思います。

今回は、必要なファイルとその役割について紹介します。

サンプルとして練習に作った、右クリックで選択した画像をサムネイルにし、現在のwebページをブックマークに追加し、プラグインのポップアップで確認できるをプラグインを参考に紹介しようと思います。

ディレクトリ・ファイルについて

ディレクトリ

今回作ったプラグインのディレクトリ構造はこのような形です。初めての作成だったことと自分がわかりやすい構造にしたのでよくあるものとは違うかもしれません。
ですが、manifest.json以外は任意のパスを指定するので決まりはないと思います。
その中でも重要なもの、役割の解説が必要なものを紹介していきます。

any_page_bookmarker
├ js
│ ├ background.js
│ ├ page.js
│ └ popup.js
├ bar-icon.png
├ main_pop.html
└ manifest.json

manifest.json

この中でいちばん重要なのは「manifest.json」です。

このファイルには以下の情報が含まれます。

• このプラグインの情報
• 各所で使うファイルの指定
• プラグインに付与する権限
• 使用するURL

記述の参考を上げるとこのような形です。

（本来JSONファイルにコメントは書けませんが便宜上わかりやすいように書いています。コピペするときは消してね。）

{
  "manifest_version": 3, // このファイルの書き方のバージョン
  "name": "Any_Page_Bookmarker", // プラグインの名前
  "short_name": "A.P.B", // プラグインの略称
  "version": "1.0.0", // プラグインのバージョン
  "description": "どんなサイトでもブックマークできるプラグイン", // プラグインの説明
  "background": { // バックグラウンドで動かすJSの設定
    "service_worker": "./js/background.js" // その動かすJS
  },
  "content_scripts": [{ // Webページ側で動かすJSの設定
    "matches":[ // 対象のwebページ
      "http://*/*",
      "https://*/*"
    ],
    "js": ["./js/page.js"] // Webページで動かすJS
  }],
  "action": {// ブラウザの上のバーに表示する設定
    "default_icon": "bar-icon.png", // アイコン
    "default_popup": "main_pop.html" // アイコンをクリックしたときに開くHTML
  },
  "permissions": [ // このプラグインに持たせる権限・ストアに出す場合は最低限にしないと審査に通らない
    "background",
    "activeTab",
    "contextMenus",
    "storage"
  ]
}

（本来JSONファイルにコメントは書けませんが便宜上わかりやすいように書いています。コピペするときは消してね。）（大事なことなので2回）

上記のjsonは今回作りたいプラグインに必要な権限や書いておいた方がいいものをしっかり書いていますが、極端な話、特定のページで指定のjsファイルを動かすだけならこれだけでも大丈夫です。

test_plugin
├ manifest.json
└ page.js

{
  "manifest_version": 3,
  "name": "Any_Page_Bookmarker",
	"version": "1.0.0",
  "content_scripts": [{
    "js": ["./page.js"],
    "matches":[
      "http://*/*",
      "https://*/*"
    ]
  }]
}

background.js、page.js

もう一つ重要なファイルは、「background.js」（service_workerで指定）と「page.js」（content_scriptsのjsで指定）です。

これらのファイルの役割を比較しながら説明すると、以下のようになります。

background.jsはブラウザのバックグラウンドや表示していないページ、ポップアップ内などで動作します。

page.jsはブラウザで表示しているwebページ内で動作します。

それぞれの役目ですが

background.jsではデータの取得や保存、ブラウザに対する動作の記述（例: 右クリックメニューの追加、インストール時の動作設定）を行います。

page.jsでは表示しているWebページの情報取得やDOM操作を行います。

それぞれのファイルにできること、できないことがありますので、適切なファイルで行いたい作業を行います。

main_pop.html

最後にmain_pop.html（actionのdefault_popupで指定）になります。

ツールバーのアイコンをクリックすると吹き出しのようにウィンドウが表示されますよね？その内容を作成するのがこのファイルです。

scriptタグやlinkタグでファイルを読み込むこともできますがポップアップ内ではデフォルトでbackground.jsが読み込まれています。
制作中background.jsの動作をコンソールで確認したいときはポップアップで検証を起動し確認します。
エラーは拡張機能管理のタブにも表示されるのですがデータの形などを確かめたいときはこちらを使いconsole.logで確認します。

基本的なファイルの構造はたったの以上です。

あとはpage.jsにJSを書けばWebページ上に好きなことができますし、ツールバーの設定したアイコンをクリックすればmain_pop.htmlにコーディングした内容が表示されます。

ね？簡単でしょう。

次回、Chrome拡張機能特有のJavaScriptの記述、データのやり取りや保存について紹介しようと思います。

それをつかいどのようにデータを取得したり、表示したり、保存したりするか解説していきます。