Chrome拡張機能をちょっと作ってみたときにTypeScriptを使ってみたかったので、その時の手順をメモ。
基本的な方針はChrome拡張機能の雛形を作成してくれる GitHub - dutiyesh/chrome-extension-cli: 🚀 The CLI for your next Chrome Extension を利用しつつ、これはTypeScriptに現在対応していないためそこだけ修正する。 ※ TypeScript対応のPRが出ているようなのでそちらがマージされればこの手順自体が不要となる。
chrome-extension-cli のインストール
プロジェクトの雛形の作成
これで 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" } } ||<