sirlancelot sirlancelot - 5 months ago 195
Javascript Question

How do I use WebStorm for Chrome Extension Development?

I just bought WebStorm 5 and so far have been really enjoying its Inspection features. One hitch I've run in to when developing my Chrome extension is that it doesn't recognize the

chrome
variable:

Unresolved variable or type chrome

Is there a way I can add the
chrome
variable to the Inspector so that it can autocomplete as I type? I'm guessing I would need to add Chromium as an External Library but I'm unsure where to start.

Answer

First Time

  1. Open the Settings dialog (File > Settings)

  2. Languages & Frameworks > Javascript > Libraries

  3. Click Download

  4. Change Official libraries to TypeScript community stubs

  5. Select chrome from the list (you can find it quickly by just typing chrome and then pressing Esc)

  6. Click Download and Install

  7. Click OK to close the Settings dialog.


Steps 2-6 illustrated below:

Webstorm Screenshot


In Subsequent Projects

In any subsequent project, you just:

  1. Open the Settings dialog again (File > Settings)

  2. Languages & Frameworks > Javascript > Libraries again

  3. Just check chrome-DefinitelyTyped

  4. Click OK to close the dialog.


Steps 2-4 shown below:

enter image description here