思いついた機能があり、これは便利だろうと思ってChrome拡張を作ってみたい気分になりました。
とはいえ、作ったことがなかったのでやり方が分からず調べたのでその事を少しまとめます。
Chrome拡張の作り方
Chrome拡張はWebサイトを作るのと同様に、HTML,CSS,JavaScriptで作ります。
一つ違うものがあり、manifest.jsonです。
Manifestの内容は公式サイトに詳しく書いてあります。
自分の場合は下記のような構成でChrome拡張を作りました。
{
"manifest_version": 2,
"name": "name",
"description": "description",
"version": "1.0.0",
"browser_action": {
"default_icon": "icon-16.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["js/backgroundPage.js"],
"persistent": false
},
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png"
}
}
Manifestがやっていることは、Chrome拡張を登録するときにどのファイルを読み込むか、権限など設定するためのものです。
開発するために
Chrome拡張のリポジトリを公開している人もたくさん公開してる人もいますので、いくつか調べてみると作り方やコードは参考になります。
またChrome拡張自体のリポジトリではなく、Chrome拡張をつくるためのスターターキット的なものを公開されてる方もいます。
私の場合はReact&TypeScriptで作りたかったので、こちらのリポジトリをフォークして作成しました。
このリポジトリではyarn devを実行すれば、BuildとWatchが走ります。
Chrome拡張はWebページを作るのと少々異なるので、きちんとChrome拡張として登録して開発します。
登録は、chrome://extensionsにアクセスしてデベロッパーモードを有効にしたら、、「パッケージ化されていない機能拡張を読み込む」を実行するとディレクトリの登録を促されるので先程ビルドされたdisstを登録すればChrome拡張として扱えるようになります。
開発してるときの注意
普通の開発だと、デベロッパーツールでconsoleでデバックできますがChrome拡張は通常のconsoleではデバックできません。
Chrome拡張で表示したHTMLの方で「検証」を起動させれば登録したChrome拡張の確認ができます。
最後に
作ってみると思ってたよりいつもWebシステムを作るのと変わらずに作れました。
今まではChrome拡張は使う側でしたが、アイデア次第で自分も便利機能を作れるようになると開発する領域が増えて嬉しいです。