Comment utiliser WebStorm pour le développement d'extensions Chrome?

104

Je viens d'acheter WebStorm 5 et jusqu'à présent, j'ai vraiment apprécié ses fonctionnalités d'inspection. Un problème que j'ai rencontré lors du développement de mon extension Chrome est qu'il ne reconnaît pas la chromevariable:

Variable ou type chrome non résolu

Existe-t-il un moyen d'ajouter la chromevariable à l'inspecteur afin qu'il puisse se compléter automatiquement lorsque je tape? Je suppose que j'aurais besoin d'ajouter Chromium en tant que bibliothèque externe, mais je ne sais pas par où commencer.

javascript autocomplete google-chrome-extension intellij-idea webstorm matpie
la source

Réponses:

215

Première configuration

  1. Ouvrez la Settingsboîte de dialogue ( File> Settings)

  2. Cliquez sur Languages & Frameworks> Javascript>Libraries

  3. Cliquez sur Download

  4. Assurez-vous que TypeScript community stubsest sélectionné

  5. Sélectionnez chromedans la liste (vous pouvez le trouver rapidement en tapant simplement chrome)

  6. Cliquez sur Download and Install

  7. Cliquez OKpour fermer la boîte de dialogue Paramètres.

Étapes 2 à 6 illustrées ci-dessous:

Capture d'écran Webstorm

Dans les projets ultérieurs

Dans tout projet ultérieur, il vous suffit de:

  1. Ouvrez à Settingsnouveau la boîte de dialogue ( File> Settings)

  2. Cliquez sur Languages & Frameworks> Javascript> Librariesnouveau

  3. Vérifier chrome-DefinitelyTyped

  4. Cliquez OKpour fermer la boîte de dialogue.

Étapes 2 à 4 illustrées ci-dessous:

Capture d'écran Webstorm

Scélérat
la source
3
Fonctionne aussi bien dans Intellij
Oskar Ferm
2
Une réponse mise à jour est nécessaire car IntelliJ IDEA 2017.1 n'affiche pas "chrome" sous "stubs de communauté TypeScript". Une idée comment ajouter ça?
Reem
1
Il s'est avéré être un bogue dans IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
Reem
1
Sur mac, le nom n'est pas un paramètre mais une préférence. Mais vous pouvez y accéder en utilisantcommand+,
Ulysse BN
4
Il convient probablement de noter que WebStorm devra être redémarré.
Tyler Crompton
42

MISE À JOUR 2 :

Il est désormais pris en charge par défaut, voir la réponse complète ci-dessous .

Télécharger la bibliothèque

MISE À JOUR :

Il existe un fichier stub plus complet qui peut être ajouté en tant que bibliothèque pour terminer le code. Cela fait partie du projet Closure Compiler. Téléchargez chrome_extensions.js .

Voir également la demande de fonctionnalité pour WebStorm pour ajouter automatiquement cette bibliothèque à partir de l'EDI.

Vous devez obtenir la bibliothèque JavaScript pour l'API Chrome quelque part ou utiliser un stub pour obtenir une exécution de base .

Une bibliothèque ou un stub peut être configuré dans WebStorm .

J'ai trouvé les fichiers JSON avec l'API d'extension . On peut écrire un script qui construira des stubs JS à partir de ces fichiers JSON, les stubs peuvent ressembler à la version de base liée sur GitHub ci-dessus, mais avec la génération automatique, ils contiendront des commentaires API et JSDoc presque complets afin que la documentation comme ici puisse être consultée directement dans l'IDE.

JSON => Le mappage des stubs d'objet JavaScript est assez simple dans ce cas et l'écriture de ce type de convertisseur ne devrait pas prendre plus d'une journée (ou plusieurs heures pour le codeur expérimenté).

Si quelqu'un décide de le mettre en œuvre, veuillez publier le lien vers les résultats ici.

CrazyCoder
la source
Merci, j'aime cette idée le plus. En fait, j'ai fini par cloner le Chromium Git Repo et j'ai ajouté le dossier /chrome/renderer/resources/extensionsqui m'a donné la plupart de ce que je voulais pour l'inspection.
matpie
sirlancelot - ne fonctionne pas pour moi ... pouvez-vous poster ici un snipper qui a une complétion automatique après avoir ajouté ce répertoire en tant que bibliothèque à WebStorm (ou IntelliJ)?
Michal Bernhard
2
J'ai téléchargé l' extension Chrome, mais pour supprimer l' Unresolved variableavertissement dans WebStorm, j'ai dû ajouter la ligne suivante à chrome_extension.js: var chrome = {}et l'inclure en tant que bibliothèque dans mon projet.
MK Safi
Il existe également un fichier vsdoc assez récent (décembre 2013) sur code.google.com/p/chrome-api-vsdoc . Il contient des descriptions d'objets, de méthodes et de paramètres (ce qui manque à cette version de TypeScript). Les descriptions sont un peu déformées lorsqu'elles sont visualisées avec Ctrl-Q en raison de vsdoc utilisant XML pour les annotations doc, mais toujours lisibles et utilisables. Ajoutez simplement le vsdoc téléchargé en tant que bibliothèque JS personnalisée dans Webstorm.
Boris B.
2

WebStorm devrait un jour accepter les définitions json directement pour permettre la saisie semi-automatique des fonctions définies. En attendant, vous pouvez utiliser le programme à l' adresse https://github.com/QuickrWorld/jsgen pour convertir les fichiers json en js afin d'activer la saisie semi-automatique pour les API d'extension Chrome.

Amitabh
la source
1

Pour écrire AppScript, des fonctions et des classes telles que DriveApp , SpreadsheetApp , il existe un plugin dans WebStorm ou Intellij appelé google-app-script.
La méthode d'installation est la même que ci-dessus. D'autre part, vous devez marquer ou ouvrir le fichier .gs comme JavaScript. (Juillet 2017)

Mingzhong
la source