Google Chrome & Firefox ブラウザ拡張入門〜なめこで学ぶブラウザ拡張〜

こんにちは。以前の私は「Chrome拡張を自作して、なめこの雪を降らせてみた」という記事を書きました。

ただ、改めて読み返してみると分かりやすい記事ではなかったので、改めてブラウザ拡張の入門的な記事を書いてみました。

なめこで学ぶブラウザ拡張
ブラウザ拡張の全体像
マニフェストを書く
Google検索のロゴにお気に入りのなめこを表示する
ブラウザ拡張をデバッグモードで動かす
- ブラウザ拡張を動かす(Google Chrome)
- ブラウザ拡張を動かす(Firefox)
注意事項：インターネット上のHTMLを書き換えるわけではない
さいごに

なめこで学ぶブラウザ拡張

サンプルを作りました。以下は動くサンプルになっておりますので、そのままでもブラウザ(Google Chrome や Firefox 等)で読み込むことができます。

なお、本サンプルですが、Googleの検索ページのロゴに、お気に入りのなめこを表示するブラウザ拡張となっております。Googleの検索ロゴは、特定の記念日によって差し替わることがありますが、自分でなめこの日を制定して差し替えてみたというわけです。

んふんふ。

f:id:konosumi:20180527164457p:plain

f:id:konosumi:20180527164615p:plain

さて、ここからは技術的な解説になります。

ブラウザ拡張の全体像

本サンプルには、以下のファイルが入っています。

「jquery-3.3.1.min.js」は、jQueryの公式サイトからダウンロードしたJSであり、実質覚える必要があるのは「manifest.json」と「main.js」だけです。

.
├── icons
│   ├── nameko.jpg
│   ├── nameko_48.jpg
│   └── nameko_96.jpg
├── jquery-3.3.1.min.js
├── main.js
└── manifest.json

なめこの画像は、旧なめこパラダイスの「おまけ」コンテンツで配布されている画像を使用しました。

namepara.com

マニフェストを書く

ブラウザ拡張の仕様は、とてもシンプルです。絶対に必要なのは「manifest.json」だけです。

マニフェストには、ブラウザ拡張の基本情報を書きます。以下は、本サンプルにおける実際の設定ファイルです。

マニフェストにおいて最も重要なのは「content_scripts」であり、そこに実際に開発したブラウザ拡張の動作設定を書くことになります

{
    "manifest_version": 2,
    "name": "Google Search Nameko",
    "description": "Learning Browser extension with Nameko.",
    "version": "0.1",
    "icons": {
        "48": "icons/nameko_48.jpg",
        "96": "icons/nameko_96.jpg"
    },
    "content_scripts": [
        {
            "matches": [
                "https://www.google.com/",
                "https://www.google.co.jp/",
                "https://www.google.com/search*",
                "https://www.google.co.jp/search*"
            ],
            "js": ["jquery-3.3.1.min.js", "main.js"],
            "run_at": "document_end"
        }
    ]
}

content_scripts/matches

「content_scripts/matches」には、どのサイトでブラウザ拡張を使いたいのかを記述します。ここをしっかり記述しないと、想定外のサイトでブラウザ拡張が発動してしまうため、慎重に書きましょう。

本サンプルでは、Googleの検索ページでのみブラウザ拡張が動作する設定としています。

"matches": [
    "https://www.google.com/",
    "https://www.google.co.jp/",
    "https://www.google.com/search*",
    "https://www.google.co.jp/search*"
],

記法は正規表現ライクのように思えますが、正確には異なりまして「URLパターンマッチング」の仕様に準拠する書き方となります。

"*" は 0個以上のキャラクターにマッチします

"?" はちょうど 1個のキャラクターにマッチします

引用：URL パターンにマッチする

なお、ブラウザ拡張にはある程度の統一仕様があります。困ったら「MDN web docs」を見ましょう。「Edge、Chrome、Firefox」をはじめとした各ブラウザの対応状況が書いてあります。

manifest.json - Mozilla | MDN

content_scripts/js

ブラウザ拡張で動作するJavaScriptを設定します。ここで注意する必要があるのは、順番くらいです。

JavaScriptは読み込む順番が重要でして、例えば本サンプルでは「main.js」でjQueryを使用しています。そうすると「main.js」はjQueryが読み込まれていない状態では、正しく動作しません。

そこで、先にjQueryを読みこむ順番としているのです。

"js": ["jquery-3.3.1.min.js", "main.js"],

詳しくは、以下のドキュメントを参照してください。

content_scripts - Mozilla | MDN*

content_scripts/run_at

「run_at」は、ブラウザ拡張の起動タイミングです。「(先 => 後)document_start => document_end => document_idle」の順です。

startの状態では、まだHTMLのDOMは読み込み中の状態です。おそらく、多く使われるのは「document_end」や「document_idle」になるかと思います。

"document_start": corresponds to loading. The DOM is still loading.

"document_end": corresponds to interactive. The DOM has finished loading, but resources such as scripts and images may still be loading.

"document_idle": corresponds to complete. The document and all its resources have finished loading.

引用： content_scripts - Mozilla | MDN

Google検索のロゴにお気に入りのなめこを表示する

さて、いよいよ「main.js」です。jQueryを使って、Googleの検索ロゴをお気に入りのなめこに差し替えます。

本記事はあくまでブラウザ拡張の入門であり、jQueryの細かい解説は行いません。但し、いたって平易なjQueryで記述しております。何をやっているのかは、比較的分かりやすいかと思います。

重要なのは、以下のコードがブラウザ上で動きますよという点です。ブラウザ拡張というのは、このように動作するのです。

$(document).ready(function() {
    var namekoImage = "https://raw.githubusercontent.com/konosumi/learning-browser-extension-with-nameko/master/icons/nameko.jpg";

    // 検索ページのロゴ
    var searchLogo = $("a#logo").children('img');
    searchLogo.attr("src", namekoImage);
    searchLogo.attr("srcset", namekoImage);
    searchLogo.attr("width", "60");
    searchLogo.attr("height", "60");

    // トップページのロゴ
    var topHpLogo = $("img#hplogo");
    topHpLogo.attr("src", namekoImage);
    topHpLogo.attr("srcset", namekoImage);
    topHpLogo.attr("width", "80");
    topHpLogo.attr("height", "80");
});