Chrome拡張機能のつくり方について、初心者向けに実例を交えて説明します。
本記事では、特定の種類のwebページで自作のJavascriptを実行するだけのシンプルな拡張機能をつくってみます。
ほぼ最小構成のChrome拡張機能を開発し、機能をブラウザで確認する
なお、まず試したい方はGitHubからCloneするか、以下のボタンからダウンロードしてブラウザに登録してください。
Download今回開発する拡張機能は、以下のような構成になっています。minimum-extensionディレクトリを作成し、その中に必要なファイルを作っていきます。
minimum-extension ├ manifest.json ├ content-script.js └ images ├ icon16.png ├ icon32.png ├ icon48.png └ icon128.png
manifest.jsonが拡張機能の設定ファイル、content-script.jsが実行したいjavascript、画像ファイルは拡張機能のアイコン画像です。
manifest.jsonは、Chrome拡張の設定ファイルです。拡張機能の名前や機能、拡張機能が読み取れる情報の範囲などを設定します。
上記コードでは説明の都合上jsonc形式（参考）で記述していますが、通常のjsonファイルにはコメントを書き込めません。ご自身で作成される際は注意してください。
“Name”, “version”, “manifest_version”, “description”, “icon”キーは、基本項目ですので必ず書いてください。
これらはブラウザの拡張機能管理画面で表示される拡張機能の基本情報です。
以下、manifest.jsonでポイントとなる部分を説明していきます。
Webページで実行したいjavascriptに関する項目です。
“js” キーにjavascriptファイル本体のパスを指定します。”matches”キーに、jsを実行するページのURLパターンを指定します。
今回は、googleの検索結果画面に対してjavascriptを実行していくので、https://www.google.com/search *としました。
ワイルドカード＊を含みますので、以下のようにヒットします。
| URL | 検索ワード | 結果 |
|---|---|---|
| https://www.google.com/search?q=cat | “cat” | ヒットする |
| https://www.google.com/search?q=foo+bar+baz | “foo bar baz” | ヒットする |
| https://www.google.com/ | なし | ヒットしない |
| https://mozilla.org/ | なし | ヒットしない |
Chrome拡張がアクセスできる範囲を指定する項目です。ここでは、”activeTab”を指定しています。”activeTab”を指定すると、現在アクティブなタブ（一番上に表示されていて、操作中のタブ）にのみアクセスが可能で、非アクティブなタブに表示されている内容などは取得できません。
セキュリティ上の理由から、拡張機能の動作に不要な情報にはアクセスしないよう設定しておく必要があります。
content-script.jsに、実際に実行されるスクリプトをかいていきましょう。
ページ内のh3見出しを探して、見出し色をレッドにハイライトするシンプルなスクリプトです。
Manifest.json で、googleの検索結果のURLパターンを指定しましたね。
Googleの検索結果画面では、検索結果のサイトタイトルが見出しh3で表示されています。
このスクリプトを検索結果画面で実行すると、検索されたサイトタイトルがレッドにハイライトされます。
以上で、拡張機能本体の作成は終了です。
次章で、ブラウザで拡張機能を読み込んで、検索結果画面でサイトタイトル色が変わっているか確認してみましょう。
新規拡張機能の読み込みは、メニュー → 拡張機能 → 拡張機能を管理 から拡張機能管理画面を開いて行います。
拡張機能管理画面を開いたら、「パッケージ化されていない拡張機能を読み込む」を選択し、開いたポップアップから「minimum-extension」ディレクトリを選択します。
拡張機能が正常に読み込まれたら、拡張機能のリストに「minimum extension」が表示されるはずです。
拡張機能の読み込みが終わったら、googleの検索結果画面にアクセスして、機能が反映されていることを確認してみましょう。
検索結果のサイトタイトル色が変更されているのが分かりますね。
また、google検索結果画面以外のwebページでは、見出しのハイライトは起こりません。manifest.jsonの、”matches”キーに指定したURLパターンでしか、content-script.jsが実行されないからですね。
実用的なChrome拡張を作るには、content-script.jsにより複雑なスクリプトを記述したり、content-scriptとは別のjsファイルを作っていきます。そちらは、別記事に記載します。
以上で、Chrome拡張の作り方 入門の解説を終わります。お疲れ様でした。
