web-dev-qa-db-fra.com

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

Je viens d'acheter WebStorm 5 et, jusqu'à présent, j'ai vraiment apprécié ses fonctions 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 variable chrome:

Unresolved variable or type chrome

Existe-t-il un moyen d'ajouter la variable chrome à l'inspecteur afin qu'il puisse effectuer la saisie semi-automatique à mesure que je tape? J'imagine que je devrais ajouter Chromium en tant que bibliothèque externe, mais je ne sais pas par où commencer.

javascriptautocompletegoogle-chrome-extensionintellij-ideawebstorm
65
matpie

Première configuration

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

  2. Cliquez sur Languages & Frameworks> Javascript> Libraries

  3. Cliquez sur Download

  4. Assurez-vous que TypeScript community stubs est sélectionné

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

  6. Cliquez sur Download and Install

  7. Cliquez sur OK pour fermer la boîte de dialogue Paramètres.

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

 Webstorm Screenshot

Dans des projets ultérieurs

Dans tout projet ultérieur, vous venez de:

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

  2. Cliquez à nouveau sur Languages & Frameworks> Javascript> Libraries

  3. Vérifier chrome-DefinitelyTyped

  4. Cliquez sur OK pour fermer la boîte de dialogue.

Les étapes 2 à 4 ci-dessous:

 Webstorm screenshot

143
Miscreant

UPDATE 2:

Il est maintenant pris en charge immédiatement, voir le réponse complète ci-dessous _.

Download library

METTRE À JOUR:

Il existe un fichier de raccord plus complet qui peut être ajouté en tant que bibliothèque pour obtenir l'achèvement du code. Cela fait partie du projet Closure Compiler. Téléchargez chrome_extensions.js .

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

Vous devez obtenir la bibliothèque JavaScript pour l'API Chrome quelque part, ou utilisez un stub pour obtenir l'achèvement de base .

Bibliothèque ou un tronçon peut être configuré dans WebStorm .

J'ai trouvé le 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 à GitHub ci-dessus, mais avec la génération automatique, ils contiendront des commentaires API et JSDoc presque complets, de sorte que documentation comme ici peut être visualisé directement dans l'EDI.

JSON => Le mappage des stubs d'objets 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 le fait et le met en œuvre, veuillez poster le lien vers les résultats ici.

39
CrazyCoder

WebStorm devrait un jour accepter directement les définitions JSON 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 l’auto-complétion pour les API d’extension chrome.

2
Amitabh

Pour l'écriture d'AppScript, de fonctions et de classes telles que DriveApp , SpreadsheetApp , il existe un plug-in 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 en tant que JavaScript. (Juillet 2017)

0
Mingzhong