TypeScriptでChrome拡張機能を開発

Chrome拡張機能をちょっと作ってみたときにTypeScriptを使ってみたかったので、その時の手順をメモ。

基本的な方針はChrome拡張機能の雛形を作成してくれる GitHub - dutiyesh/chrome-extension-cli: 🚀 The CLI for your next Chrome Extension を利用しつつ、これはTypeScriptに現在対応していないためそこだけ修正する。 ※ TypeScript対応のPRが出ているようなのでそちらがマージされればこの手順自体が不要となる。

chrome-extension-cli のインストール

|| $ npm install -g chrome-extension-cli ||<

プロジェクトの雛形の作成

|| $ chrome-extension-cli my-project ||<

これで my-project フォルダにChrome拡張機能のプロジェクトの雛形が作成されます。

TypeScript へ対応

必要なパッケージのインストール

|| $ npm install --save-dev @types/chrome @types/node ts-loader typescript ||<

config/webpack.common.js の修正

common の module.rules に下記を追加

|| { rules: [ { test: /.ts$/, use: 'ts-loader', } ] }, ||<

common に下記を追加

|| resolve: { extensions: [ '.ts', '.js' ] }, ||<

webpack.config.js の修正

entry の各ファイルの拡張子を .js から .ts へ変更

|| // Merge webpack configuration files const config = merge(common, { entry: { popup: PATHS.src + '/popup.ts', contents: PATHS.src + '/contentScript.ts', background: PATHS.src + '/background.ts', }, }); ||<

src/ 内のファイルの拡張子を変更

src/popup.js → src/popup.ts contentScript.js, background.js も同様

tsconfig.json の追加

my-project ディレクトリに下記の内容で tsconfig.json を追加

|| { "compilerOptions": { "sourceMap": true, "target": "es6", "module": "es6" } } ||<