こんにちは。以前の私は「Chrome拡張を自作して、なめこの雪を降らせてみた」という記事を書きました。
ただ、改めて読み返してみると分かりやすい記事ではなかったので、改めてブラウザ拡張の入門的な記事を書いてみました。
- なめこで学ぶブラウザ拡張
- ブラウザ拡張の全体像
- マニフェストを書く
- Google検索のロゴにお気に入りのなめこを表示する
- ブラウザ拡張をデバッグモードで動かす
- 注意事項：インターネット上のHTMLを書き換えるわけではない
- さいごに
なめこで学ぶブラウザ拡張
サンプルを作りました。以下は動くサンプルになっておりますので、そのままでもブラウザ(Google Chrome や Firefox 等)で読み込むことができます。
なお、本サンプルですが、Googleの検索ページのロゴに、お気に入りのなめこを表示するブラウザ拡張となっております。Googleの検索ロゴは、特定の記念日によって差し替わることがありますが、自分でなめこの日を制定して差し替えてみたというわけです。
んふんふ。
さて、ここからは技術的な解説になります。
ブラウザ拡張の全体像
本サンプルには、以下のファイルが入っています。
「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
なめこの画像は、旧なめこパラダイスの「おまけ」コンテンツで配布されている画像を使用しました。
マニフェストを書く
ブラウザ拡張の仕様は、とてもシンプルです。絶対に必要なのは「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個のキャラクターにマッチします
なお、ブラウザ拡張にはある程度の統一仕様があります。困ったら「MDN web docs」を見ましょう。「Edge、Chrome、Firefox」をはじめとした各ブラウザの対応状況が書いてあります。
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.
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"); });
ブラウザ拡張をデバッグモードで動かす
ブラウザ拡張を動かす(Google Chrome)
「Google Chrome」では「chrome://extensions/」にアクセスします。
- 画面右上のデベロッパーモードを有効にする
- パッケージ化されていない拡張機能を読み込む
これで完了です。
ブラウザ拡張を動かす(Firefox)
「Firefox」では「about:debugging」にアクセスします。
- 一時的なアドオンを読み込む
- サンプルの「manifest.json」を選択する
これで完了です。
注意事項：インターネット上のHTMLを書き換えるわけではない
本サンプルでは、Google検索のロゴをお気に入りのなめこにする実装を行ないました。このように、HTMLを書き換えるコードは、簡単に開発することができます。
ただ、一点だけ注意点があります。本サンプルのコードはブラウザ上で動作し、ローカルのHTMLを書き換えています。つまり、インターネット上のHTMLを書き換えているわけではありません。
この違いは混同しやすいのですが、とても重要です。インターネット上のHTMLを直接書き換え(改ざん)するような行為は、状況によっては犯罪となります。ブラウザ拡張を開発するような方であれば、何かしらのWeb系の開発に携わっている方が多いと思いますので、必ず知っておきましょう。
ホームページやファイルの改ざん｜不正アクセスとは？｜どんな危険があるの？｜基礎知識｜国民のための情報セキュリティサイト
さいごに
ブラウザ拡張は、とても簡単に開発することができます。さらに、コードによっては、一つのブラウザ拡張でクロスブラウザに対応することも可能です。
困ったら、MDNのドキュメントを見ましょう。
Firefoxの拡張機能は、クロスブラウザーの互換性が高く、さらに公式ドキュメントに各ブラウザの対応表まで記載されています。
実際にブラウザ拡張を使うかどうかはともかくとして、エクセルのマクロ感覚で、ブラウザも拡張することができるという選択肢は、知っておいた方が良いと思います。
ブラウザ拡張というのは、こんなにもお手軽であり、皆様の手の届くところにあるのです。