Chrome拡張のつくり方　超入門

Chrome拡張機能のつくり方について、初心者向けに実例を交えて説明します。

本記事では、特定の種類のwebページで自作のJavascriptを実行するだけのシンプルな拡張機能をつくってみます。

なお、まず試したい方はGitHubからCloneするか、以下のボタンからダウンロードしてブラウザに登録してください。

拡張機能の構成

今回開発する拡張機能は、以下のような構成になっています。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の作成

manifest.jsonは、Chrome拡張の設定ファイルです。拡張機能の名前や機能、拡張機能が読み取れる情報の範囲などを設定します。

{
     "name" : "minimum extension", // 拡張機能の名前
     "version" : "1.0.0",　// バージョン
     "manifest_version": 3, // 3を指定
     "description" : "Almost minimum extension for beginner",
     //アイコン画像の相対パスを指定
     "icons": {
         "16": "images/icon16.png",
         "32": "images/icon32.png",
         "48": "images/icon48.png",
         "128": "images/icon128.png"
     },
     "content_scripts": [{
         "matches" : ["https://www.google.com/search*"],
         "js" : [
             "content-script.js"
         ]
     }],
     "permissions" : [
         "activeTab"
     ]
 }

“Name”, “version”, “manifest_version”, “description”, “icon”キーは、基本項目ですので必ず書いてください。

ブラウザの拡張機能管理画面で表示される拡張機能の基本情報です。

以下、manifest.jsonでポイントとなる部分を説明していきます。

content_scripts

Webページで実行したいjavascriptに関する項目です。
“js” キーにjavascriptファイル本体のパスを指定します。”matches”キーに、jsを実行するページのURLパターンを指定します。

今回は、googleの検索結果画面に対してjavascriptを実行していくので、https://www.google.com/search *としました。

ワイルドカード＊を含みますので、以下のようにヒットします。

permissions

Chrome拡張がアクセスできる範囲を指定する項目です。ここでは、”activeTab”を指定しています。”activeTab”を指定すると、現在アクティブなタブ（一番上に表示されていて、操作中のタブ）にのみアクセスが可能で、非アクティブなタブに表示されている内容などは取得できません。

セキュリティ上の理由から、拡張機能の動作に不要な情報にはアクセスしないよう設定しておく必要があります。

content-script.jsの作成

content-script.jsに、実際に実行されるスクリプトをかいていきましょう。

const titles = document.querySelectorAll('h3');
if (titles){
    for (var i = 0; i < titles.length; i ++){
        titles[i].style.color = 'red';  // レッドにハイライト表示する
    }
}

ページ内の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拡張の作り方 入門の解説を終わります。お疲れ様でした。