TypescriptでChrome Extension
Mon, Feb 15, 2021Aquabidのオークションページ、画像がないのが大変わかりづらいのでマウスオーバーで画像を表示するChrome extensionを作ってみた(なんと需要がなさそうな、、、)。 今までChrome extensionを作るときはなんか他人が作ったテンプレートみたいなのを使っていたんだけど、たくさん仲間を連れてくるのが鬱陶しくて今回mozillaのweb-extを使ってみたので、メモ。
まあ結局バンドラが仲間をたくさん連れてくるわけですが、、、。
(ぐぐるとJavascripterの書いたっぽいextensionのHowto記事も見つかるんだけど、彼らってどうも余計なパッケージを入れたがる傾向があるんですよね。ぼくはminimalなほうがいいと思うんですが。)
ディレクトリ構成
まあ何でもいいんだけど、こんな感じかな。まず、適当にgit init
して、npm init
しておく。
|
+-- src/ (Typescript置き場)
|
+-- APP_NAME/ (extensionの中身置き場)
| |
| +-- manifest.json (extensionのマニフェスト)
|
+-- package.json
マニフェストを手で打つのは苦痛なので、mozillaがこんなページを提供してくれているのでありがたく使わせていただこう。
TSコンパイラ設定
(トランスパイラとコンパイラの違いにうるさい人たちいるけど一緒だよね)
Javascript界隈はいつものようにスタンダードというものがないので、自分でバンドラをチョイスをする必要がある。ぐじぐじコンフィグを書きたくないのでParcelを使った。Typescriptも勝手にやってくれてうれしい。 プロジェクトルートで
npm install parcel-bundler typescript --save-dev
する。するとpackage.jsonのscripts
エントリ中でparcel
コマンド、tsc
コマンドが使えるようになる(npm run parcel
とかできるようになる)。parcel
コマンドにtsを食わせるとtscを通してくれるっぽいので、それを踏まえてなんか適当にbuildコマンドを書いておく。いちいちこういうことを自分でやらなきゃいけないのがウーンMakefileかな?という気持ちになってしまうが、例えばcontent_scriptをインジェクトするならこんな感じ。
{
....
"scripts": {
"build": "parcel build --no-source-maps -d APP_NAME src/content_script.ts",
"watch": "parcel watch --no-source-maps -d APP_NAME src/content_script.ts"
},
....
}
web-ext
web-extを使うと拡張機能のライブリロードとzipファイルのビルドができる。上の構成なら、
web-ext run -t chromium -s APP_NAME/
とかやるとクリーンなプロファイルでchromeが立ち上がって拡張機能が使える。別窓でparcel watch
しておけば、tsを書き換えたときにライブリロードもできてうれしい。