Chromeブラウザの拡張機能を作ってみる

唐突に拡張機能を作ってみたくなったので、最低限の環境を作る方法をメモしておきます。
参考にしたのはこちらの記事
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の知識があれば開発することができるので、ぜひ挑戦してみてください。