TypeScriptによるChrome拡張機能の開発時は型定義ファイルが必要

エラーの内容と原因

Chrome拡張機能の開発ではchromeオブジェクトを利用しますが、TypeScript自体はchromeオブジェクトに関する情報を持っていないため、そのまま記述するとコンパイル時に以下のエラーが発生します。

[tsl] ERROR in /sample.ts(1,1)
      TS2304: Cannot find name 'chrome'.

リアルタイムでTypeScriptのバリデーションが走るエディタでは、エディタ上でも[ts] 名前 'chrome' が見つかりません。といったエラーが表示されます。

解決策は@types/chromeをインストールするだけ

原因はchromeオブジェクトの型情報がないということで、型の情報をTypeScriptに示すというのが解決策です。

自力で型定義ファイルを作成することももちろん可能ですが、DefinitelyTypedでは色々な環境向けの型定義ファイルが配布されているので、これをインストールするのが最もお手軽です。

$ npm install --save-dev @types/chrome

インストール時にコンパイルの設定も併せて行われるため、設定は必要ありません。