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

投稿日: Webstorm JetBrains Google Chrome Google Chrome拡張機能

やりたいこと

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

前提条件

概要

手順

Chrome APIの型チェック

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

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. https://github.com/SchemaStore/schemastore.git をgit clone
  2. Preferences / Settingsを開く
  3. Languages & Framework > Schemas and DTDs > JSON Schema
  4. '+'ボタンを押す
  5. ダウンロードしたファイルを指定
    • パス: schemastore/src/schemas/json/chrome-manifest.json
    • 読み込みが終わるまで待つ。
  6. 右側のペインの左下の'+'ボタンを押す
  7. File: manifest.jsonを選択

補足

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

マニュアル


ページトップへ戻る