ふと、自分のためのChrome 拡張を作ってみようかと
ふと、日々の仕事を効率化するための「Chrome 拡張」を自作してみようと思いました。
あくまで自分だけが使うものなのでストアで公開するつもりはなく、Google Chrome のデベロッパーモードで使えればそれでOK。
JavaScript とHTML は多少理解していますが、Chrome 拡張の作り方はさっぱり分からないので、自分がやりたいことや欲しい機能をひとつひとつ明確にしながら、学んだことを備忘録的に記事化してみようと思います。
今回やりたいこと
ということで今回は、この先のChrome 拡張開発の下準備として、「空っぽの（機能が一切ない）Chrome 拡張を作り、Google Chrome（ブラウザ）に認識させる」ということをやってみたいと思います。
Chrome 拡張を作るうえで必要なもの
- Google Chrome（ブラウザ）
- テキストエディタ
だけで良いようです。
個人的な都合として、セキュリティの都合でVisual Studio Code（コードエディタ）が使えないことが多いので、上記2つだけで作れるのは大変ありがたいです。
Chrome 拡張の構成
基本的にはフォルダの中に
- manifest.json（設定ファイル）
- html（UIというかレイアウトを記述したファイル的な？）
- css（デザインを記述したファイル）
- js（JavaScriptを記述したファイル）
- images（アイコン画像など）
があれば良いようですが、下準備的な「空っぽの（機能が一切ない）Chrome 拡張」を作りたいのであればmanifest.json（設定ファイル）だけあれば良いようです。
manifest.json （マニフェストファイル）とは？
軽く調べた感じだと、これはちょっとややこしそう。。。とりあえず深掘りは後日やるとして、最低限は下記を記述すれば「空っぽの（機能が一切ない）Chrome 拡張」を作れるようです。
{
"name": "Chrome 拡張の名前",
"description": "説明文",
"version": "バージョン表記",
"manifest_version": 3
}
"manifest_version" についてもまた後日。
実際に作ってみよう
1. 適当な場所にフォルダを作成
今回はフォルダ名を「MyFirstChromeExtension」にしようと思います。
2. フォルダ直下に「manifest.json」を作成
「MyFirstChromeExtension」フォルダ直下にテキストファイルを新規作成し、ファイル名を「manifest」に。そして既存の拡張子（.txt）をJSON ファイルの拡張子（.json）に書き換えます。
なお念のため、ディレクトリ構成は以下のようになります。
MyFirstChromeExtension
┗ manifest.json
3. manifest.json に下記を記述
"name": "My First Chrome Extension",
"description": "初めてのChrome 拡張開発。",
"version": "2023.09.15.001",
"manifest_version": 3
}
"version" については、アップデートの内容（メジャー／マイナー／バグフィックス）に応じてバージョン表記の上げ方を決めるのが面倒なので、とりあえず「年.月.日.連番」にしておこうかと思います。
4. Chrome（ブラウザ）で拡張機能の「デベロッパーモード」を有効にする
5. 「MyFirstChromeExtension」を読み込む
読み込みが完了すると、以下のスクリーンショットのような状態になります。
拡張機能として認識していますね。
以上で今回の目的は達成しました。
次の作業は？
デフォルトのアイコン [M] を画像に差し替えてみようと思います。