Chrome拡張は、名前の通りChromeブラウザに追加できる拡張機能のことを指し、利用することでChromeをカスタマイズすることできる。Chrome ウェブストア からインストールできるだけでなく、自作することもできる。
今回はChrome拡張の自作入門として、Youtubeを開くとアラート（ポップアップ）が表示されるシンプルなものを作成してみた。
環境
動作を確認するためのChromeブラウザと、コードを書くためのエディタが必要。Chrome拡張はかなり古いバージョンから利用可能な機能となっており*1、現在利用中のもの、もしくは新規にインストールしたもので確認すればよい。
構成
最低限、設定を書くmanifest.jsonと、実行するスクリプトの中身を書くcontent.jsファイルがあれば実行できる*2。
SampleChromeExtension
└── src
├── content.js
└── manifest.json
manifest.json の編集
Chrome拡張の設定を書く。manifest_versionは、最新版の3を指定した。name, version, description は名前の通りそれぞれChrome拡張の名前、バージョン、説明文を表す。
content_scritpsの中がChrome拡張で実行する内容になる。matchesに一致するURLの場合に、jsの内容を実行する。
{
"name": "Sample",
"version": "1.0.0",
"manifest_version": 3,
"description": "Sample Chrome Extension",
"content_scripts": [{
"matches": ["https://www.youtube.com/*"],
"js": [
"content.js"
]
}]
}
content.js の編集
Chrome拡張で処理する内容を書く。今回はアラートを出すだけなので、alert文だけをこのファイルに書いた。
window.alert('Youtubeを開きました');
Chromeへの適用
Chrome拡張の管理画面（ chrome://extensions/ ）を開き、右上の「デベロッパーモードを有効にする」を確認してから、左上の「パッケージ化されていない拡張機能を読み込む」を実行。
ディレクトリごと（上記の構成だとsrcディレクトリ）選択して読み込み。完了すると、管理画面に表示されるようになる。
動作確認
適用が完了すると、デフォルトで有効になっているのでこのまま動作確認ができる。Youtubeを開くと、ポップアップでアラートが表示されることが確認できた。
ここまでで、一通りChrome拡張の作成から適用までをやってみることができた。単純な処理を実行するだけのものであれば、この構成でcontent.jsの中身を拡充していけば同じように作ることができそう。
参考サイト
- Getting Started - Chrome Developers
*1:2010年のバージョン4.0.249.78から利用可能になっている: https://chromereleases.googleblog.com/2010/01/stable-channel-update_25.html
*2:今回のようなシンプルな実行内容であればこれで十分だが、この他にも設定画面やデザインのためのHTMLやCSSファイル、Chrome拡張のアイコンを示すImageファイルなどが配置できる
