How do I use WebStorm for Chrome Extension Development?

Question

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.

Miscreant · Accepted Answer · 2017-07-30T19:15:52.697

321

First Time Setup

Open the Settings dialog (File > Settings)
Click Languages & Frameworks > Javascript > Libraries
Click Download
Make sure TypeScript community stubs is selected
Select chrome from the list (you can find it quickly by just typing chrome)
Click Download and Install
Click OK to close the Settings dialog.

Steps 2-6 illustrated below:

In Subsequent Projects

In any subsequent project, you just:

Open the Settings dialog again (File > Settings)
Click Languages & Frameworks > Javascript > Libraries again
Check chrome-DefinitelyTyped
Click OK to close the dialog.

Steps 2-4 shown below:

edited Jul 30 '17 at 19:15

answered Aug 23 '14 at 21:53

Miscreant

6,626
3
22
21

7

Works just as well in Intellij – Oskar Ferm Mar 24 '15 at 09:14
1

Thanks for this! now, *google-apps-script* and *google.visualization* are available as well. – Sujay Phadke Feb 07 '16 at 06:53
Webstorm11 has changed where to find settings completely. – tonymiao Apr 22 '16 at 22:01
@tonymiao Really? I have the latest version of WebStorm, and as far as I can tell, the only change is that the `JavaScript` section is now under `Languages & Frameworks`. – Miscreant Apr 22 '16 at 22:11
@tonymiao Sorry, you're right. There used to be "Project Settings" and "IDE Settings" sections under a single "Settings" dialog. Now there are separate "Settings" and "Default Settings" dialogs. I updated the answer. – Miscreant Apr 22 '16 at 22:18
[The answer](http://stackoverflow.com/a/14019047/1181911) by @CrazyCoder below is up-to-date. – Sam Jul 18 '16 at 22:43
3

An updated answer is needed as IntelliJ IDEA 2017.1 doesn't show "chrome" under "TypeScript community stubs". Any idea how to add that? – Reem Apr 05 '17 at 08:39
2

It turned out to be a bug in IntelliJ IDEA 2017.1 https://youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044 – Reem Apr 12 '17 at 08:12
1

On mac, the name is not setting but preference. But you can access it using `command+,` – Ulysse BN Oct 25 '17 at 12:27
There's no "chrome" in the list. All I get is .github, scripts and types – scibuff Sep 16 '18 at 00:52
7

It should probably be noted that WebStorm will need to be restarted. – Tyler Crompton Dec 10 '18 at 21:21
1

@TylerCrompton not anymore though – kraxor Oct 02 '21 at 12:12

score 50 · Answer 2 · edited Sep 24 '17 at 05:35

50

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.

edited Sep 24 '17 at 05:35

Tyler Crompton

12,284
14
65
94

answered Dec 24 '12 at 08:38

CrazyCoder

389,263
172
990
904

Thanks, I like this idea the best. I actually ended up cloning the Chromium Git Repo and added the folder `/chrome/renderer/resources/extensions` which gave me most of what I wanted for Inspection. – matpie Dec 24 '12 at 17:16
sirlancelot - doesn't work for me ... can you post here some snipper which has auto completition after adding this dir as a library to WebStorm (or IntelliJ) ? – Michal Bernhard Mar 19 '13 at 13:37
2

I downloaded [Chrome Extension](https://code.google.com/p/closure-compiler/source/browse/contrib/externs/chrome_extensions.js) but to get rid of the `Unresolved variable` warning in WebStorm, I had to add the following line to `chrome_extension.js`: `var chrome = {}` and include it as a library in my project. – M.K. Safi Jan 19 '14 at 19:38
There is also a fairly recent (Dec. 2013) vsdoc file at https://code.google.com/p/chrome-api-vsdoc. It has object, method and parameter descriptions (which this TypeScript version lacks). Descriptions are a bit mangled when viewed with Ctrl-Q due to vsdoc using XML for doc annotations, but still readable and usable. Just add the downloaded vsdoc as a custom JS library in Webstorm. – Boris B. Oct 23 '14 at 17:25
New URL to chrome_extension.js: https://raw.githubusercontent.com/google/closure-compiler/master/contrib/externs/chrome_extensions.js – Tuan Ha Apr 07 '22 at 15:56

score 2 · Answer 3 · answered May 21 '13 at 13:24

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.

score -2 · Answer 4 · answered Jul 01 '17 at 20:36

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)

How do I use WebStorm for Chrome Extension Development?

4 Answers4

First Time Setup

In Subsequent Projects

Linked

Related