唐突に拡張機能を作ってみたくなったので、最低限の環境を作る方法をメモしておきます。
参考にしたのはこちらの記事
https://qiita.com/RyBB/items/32b2a7b879f21b3edefc
個人的にAmazon検索の隠しパラメータを手軽に利用できる拡張機能を作って公開してみました
https://chromewebstore.google.com/detail/amazon%E8%A3%8F%E6%8A%80%E6%A4%9C%E7%B4%A2/gbgfbnmcnkhddoahjhehomlccblhbedi?hl=ja&utm_source=ext_sidebar
Chrome拡張機能の概要
Chromeには様々な拡張機能を追加できます。
Chromeの拡張機能はJavaScriptで作成できるので、意外と気軽に作成出来ます。
今回は特定のURLを開くとポップアップが表示される拡張機能を作ります。
Chrome拡張機能の最低限の構成
Chrome拡張機能で最低限必要なのは以下の2ファイルになります
それぞれのファイルの中身は以下のとおりです。
manifest.jsonの中身
{
"name": "MinimalProject",
"version": "1.0.0",
"manifest_version": 3,
"description": "ダイアログを表示します",
"permissions": [],
"content_scripts": [{
"matches": ["https://www.google.co.jp/*"],
"js": [
"content.js"
]
}]
}content.jsの中身
window.alert('google.co.jpを開きました');以上です。これだけで拡張機能として動作します。
Chromeに開発中の拡張機能をインストールする
開発中の拡張機能をChromeにインストールします。
まずは拡張機能の管理画面を開きます。
右上にあるデベロッパーモードをONにします
「パッケージ化されていない拡張機能を読み込む」をクリックします
ディレクトリの選択画面が表示されるので、manifest.jsonとcontent.jsが入っているディレクトリを選択します
拡張機能が追加されたことを確認します
動作確認を行う
今回作成した拡張機能は「https://www.google.co.jp」にアクセスしたときにポップアップ(アラート)を表示する設定になっています。
拡張機能を有効化した状態でgoogle.co.jpにアクセスしてください。
ポップアップが表示されました
以上です
以上で最低限のChrome拡張機能の作成と動作確認まで紹介しました。
意外と手軽に作成できることがおわかりいただけたかと思います。
今回は特定のURLにアクセスしたときに動作するタイプの拡張機能となりますが、他にもいろいろなタイプの拡張機能が作成出来ます。
JavaScriptの知識があれば開発することができるので、ぜひ挑戦してみてください。
