How do I use WebStorm for Chrome Extension Development?

JavascriptAutocompleteGoogle Chrome-ExtensionIntellij IdeaWebstorm

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

First Time Setup

  1. Open the Settings dialog (File > Settings)

  2. Click Languages & Frameworks > Javascript > Libraries

  3. Click Download

  4. Make sure TypeScript community stubs is selected

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

  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. Click Languages & Frameworks > Javascript > Libraries again

  3. Check chrome-DefinitelyTyped

  4. Click OK to close the dialog.


Steps 2-4 shown below:

Webstorm screenshot

Solution 2 - Javascript

UPDATE 2:

It's now supported out of the box, see the complete answer below.

Download library

UPDATE:

There is a more complete stub file that can be added as a library to get code completion. It's a part of the Closure Compiler project. Download chrome_extensions.js.

See also the feature request for WebStorm to add this library automatically from the IDE.


You need to get the JavaScript library for the Chrome API somewhere, or use a stub to get basic completion.

Library or a stub can be configured in WebStorm.


I found the JSON files with the Extension API. One can write a script that will build JS stubs from these JSON files, the stubs can look like the basic version linked on GitHub above, but with the automatic generation they will contain almost complete API and JSDoc comments so that documentation like here can be viewed directly in the IDE.

JSON => JavaScript object stubs mapping is pretty straightforward in this case and writing this kind of converter should not take more than a day (or several hours for the skilled coder).

If someone goes ahead and implements it, please post the link to the results here.

Solution 3 - Javascript

WebStorm should one day accept json definitions directly to enable autocomplete for the functions defined. Meanwhile, you can use the program at https://github.com/QuickrWorld/jsgen to convert the json files to js to enable auto-complete for the chrome extension APIs.

Solution 4 - Javascript

For writing AppScript, functions and classes such as DriveApp, SpreadsheetApp, there is a plugin in WebStorm or Intellij called google-app-script.
The installation method is the same as above. On the other hand, you should mark or open the .gs file as JavaScript. (July 2017)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmatpieView Question on Stackoverflow
Solution 1 - JavascriptMiscreantView Answer on Stackoverflow
Solution 2 - JavascriptCrazyCoderView Answer on Stackoverflow
Solution 3 - JavascriptAmitabhView Answer on Stackoverflow
Solution 4 - JavascriptMingzhongView Answer on Stackoverflow