Chrome拡張機能作成の基礎【ファイル・構造編】

最近、趣味で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の記述、データのやり取りや保存について紹介しようと思います。

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

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。