How do I use WebStorm for Chrome Extension Development?
Solution 1
First Time Setup
Open the
Settings
dialog (File
>Settings
)Click
Languages & Frameworks
>Javascript
>Libraries
Click
Download
Make sure
TypeScript community stubs
is selectedSelect
chrome
from the list (you can find it quickly by just typingchrome
)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
againCheck
chrome-DefinitelyTyped
Click
OK
to close the dialog.
Steps 2-4 shown below:
Solution 2
UPDATE 2:
It's now supported out of the box, see the complete answer below.
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
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.
matpie
I'm a modest JavaScript developer. I love working with Vue.js, Webpack, and Node.js. I like refactoring applications for performance and maintainability. Code re-usability and readability are my top-priorities.
Updated on May 26, 2020Comments
-
matpie about 4 years
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: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. -
matpie over 11 yearsThanks, 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. -
Asgher over 11 yearssirlancelot - 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) ?
-
M.K. Safi over 10 yearsI downloaded Chrome Extension but to get rid of the
Unresolved variable
warning in WebStorm, I had to add the following line tochrome_extension.js
:var chrome = {}
and include it as a library in my project. -
Boris B. over 9 yearsThere is also a fairly recent (Dec. 2013) vsdoc file at 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.
-
Oskar Ferm over 9 yearsWorks just as well in Intellij
-
Sujay Phadke over 8 yearsThanks for this! now, google-apps-script and google.visualization are available as well.
-
tonymiao about 8 yearsWebstorm11 has changed where to find settings completely.
-
Miscreant about 8 years@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 underLanguages & Frameworks
. -
Miscreant about 8 years@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.
-
Sam almost 8 yearsThe answer by @CrazyCoder below is up-to-date.
-
Reem about 7 yearsAn updated answer is needed as IntelliJ IDEA 2017.1 doesn't show "chrome" under "TypeScript community stubs". Any idea how to add that?
-
Reem about 7 yearsIt turned out to be a bug in IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
-
Ulysse BN over 6 yearsOn mac, the name is not setting but preference. But you can access it using
command+,
-
scibuff almost 6 yearsThere's no "chrome" in the list. All I get is .github, scripts and types
-
Tyler Crompton over 5 yearsIt should probably be noted that WebStorm will need to be restarted.
-
kraxor over 2 years@TylerCrompton not anymore though
-
Tuan Ha about 2 yearsNew URL to chrome_extension.js: raw.githubusercontent.com/google/closure-compiler/master/…