逆引きマニュアル: WebStormでGoogle Chrome拡張機能を開発する方法

やりたいこと

JetBrains社WebStormでGoogle Chrome拡張機能を開発する方法です。

前提条件

概要

• Chrome APIの型チェック
• manifest.jsonのスキーマを追加

手順

Chrome APIの型チェック

以下の2つの方法があります。

• npmでインストール
• WebStormの機能でインストール

npmでインストール

これで終わりです。WebStormにも認識されます。

npm install --save-dev @types/chrome

直接は関係ありませんが、TypeScriptやTSLintを使う場合は以下のようにします。

npm install --save-dev typescript
npm install --save-dev tslint

WebStormの機能でインストール

こちらで書かれている方法を参考にしました。

javascript - How do I use WebStorm for Chrome Extension Development? - Stack Overflow

1. Preferences / Settingsを開く
2. Languages & Framework > JavaScript > Libraries
3. Download…ボタンを押す
   • TypeScript community stubsが表示される
4. chromeを選択してDownload and Install

manifest.jsonのスキーマ追加

JSON Schema Storeを使います。

1. Preferences / Settingsを開く
2. Languages & Framework > Schemas and DTDs > JSON Schema
3. ‘+‘ボタンを押す
4. Schema file or URLに以下のURLを指定
   • http://json.schemastore.org/chrome-manifest
5. 右側のペインの左下の’+‘ボタンを押す
6. File: manifest.jsonを選択

以前はgit clone使ってましたが、URLが直接指定できるので不要でした。。。

補足

まだ単に型チェックができるだけのようで、 getElementById()で指定したIDがHTML中にあるかどうかのチェックは 今のところ方法が見つかっていません。

マニュアル

• WebStorm
• jetbrains: まだありません。
• Google Chrome
• Google Chrome拡張機能