Chrome Extensionってどうやってつくるの？
はじめに
Chromeブラウザの拡張機能って奴がJavaScriptで作られてるらしい。ってことで簡易的なものを作成してみたので、メモ。
このメモではウェブストアに公開とかAPIをつかったりとかはしません。
あくまで、Chrome Extension初見の人が初見の人の為に、環境構築の手助けになりたいためのメモ です。
詳しく知りたい方は↓
今回のソース
予備知識
マニフェスト (manifest.json)
必ず必要となるファイル(らしい)
詳細は、公式マニュアルに任せるとして、簡単な説明としては、作る拡張機能はどういったものかを記載したJSONってこと。例えば、拡張機能のアイコンはどういったものか？それを押したとき、どのファイルを表示すればよいか？などを記載する。
今回生成するmanifest.json
{
"manifest_version": 3,
"name": "Chrome Extension Exercises",
"description": "Chrome Extension, TypeScript, React",
"version": "0.0.0",
"chrome_url_overrides": {
"newtab": "overrides/index.html"
},
"action": {
"default_popup": "popup/index.html",
"default_icon": "images/icon.png"
},
"icons": {
"16": "images/risu16.png",
"32": "images/risu32.png",
"48": "images/risu48.png",
"128": "images/risu128.png"
}
}
chrome_url_overrides
デフォルトの Chrome ページのオーバーライドを定義します。
つまり、新規タブを作ったときに表示する画面をデフォルトのものから変更することが可能です。
action
Google Chrome ツールバーの拡張機能のアイコンを制御します。
アイコンの見た目や押下したときの画面を定義できます。
icons
拡張機能のアイコンを定義します。
これは、Google Chrome ツールバー上のアイコンとは別となります。
作ったものの説明
技術的なもの
-
TypeScriptでのReactフレームワーク - CSSは
tailwindcssを使用 -
Viteを使用して、ビルド
機能的なもの
- 拡張機能のアイコン押下時のポップアップ表示
- 新規タブの画面変更
構築
１. react + ts + vite の環境を作成する
npm create vite@latest my-vue-app -- --template react-ts
２. プロジェクトディレクトリに入ってgit初期化
cd my-vue-app
git init
３. npmモジュールをインストール
npm install
４. 必要なモジュールをインストール
npm install -D @types/node
npm install -D @crxjs/vite-plugin@beta
npm install -D tailwindcss @tailwindcss/vite
５. 不要ファイルを削除
６. コーディング
npm run dev
で画面(ブラウザ)を確認しながら作成できる
７. ビルド
npm run build
プロジェクトディレクトリ配下にdistディレクトリが作成され、まとまったファイル達が配置される
８. 拡張機能として登録
Chromeの拡張機能を管理する画面にて、「パッケージされていない拡張機能を読み込む」でdistディレクトリを指定する
まとめ
今回、Chrome Extensionを初めて触ってみるってことで中身はほぼないものを作成したが、既存にある拡張機能を見ても分かる通り色々なことができそうだ。