逆引きマニュアル: 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を指定
  5. 右側のペインの左下の'+'ボタンを押す
  6. File: manifest.jsonを選択

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

補足

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

マニュアル