TypescriptでChrome Extension

Aquabidのオークションページ、画像がないのが大変わかりづらいのでマウスオーバーで画像を表示する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を書き換えたときにライブリロードもできてうれしい。