Wie verwende ich WebStorm für die Chrome-Erweiterungsentwicklung?

104

Ich habe gerade WebStorm 5 gekauft und habe bisher die Inspektionsfunktionen wirklich genossen. Ein Problem, auf das ich bei der Entwicklung meiner Chrome-Erweiterung gestoßen bin, ist, dass die chromeVariable nicht erkannt wird:

Ungelöste Variable oder Typ Chrom

Gibt es eine Möglichkeit, die chromeVariable zum Inspektor hinzuzufügen , damit sie während der Eingabe automatisch vervollständigt werden kann? Ich schätze, ich müsste Chromium als externe Bibliothek hinzufügen, bin mir aber nicht sicher, wo ich anfangen soll.

javascript autocomplete google-chrome-extension intellij-idea webstorm Matpie
quelle

Antworten:

215

Erstes Setup

  1. Öffne den SettingsDialog ( File> Settings)

  2. Klicken Sie auf Languages & Frameworks> Javascript>Libraries

  3. Klicken Download

  4. Stellen Sie sicher, dass TypeScript community stubsausgewählt ist

  5. Wählen Sie chromeaus der Liste (Sie können es schnell finden, indem Sie einfach tippen chrome)

  6. Klicken Download and Install

  7. Klicken Sie hier OK, um das Dialogfeld "Einstellungen" zu schließen.

Die Schritte 2-6 sind unten dargestellt:

Webstorm Screenshot

In nachfolgenden Projekten

In jedem nachfolgenden Projekt müssen Sie nur:

  1. Öffne den SettingsDialog erneut ( File> Settings)

  2. Klicken Sie auf Languages & Frameworks> Javascript> Librarieswieder

  3. Prüfen chrome-DefinitelyTyped

  4. Klicken Sie OK, um den Dialog zu schließen.

Die unten gezeigten Schritte 2 bis 4:

Webstorm-Screenshot

Bösewicht
quelle
3
Funktioniert genauso gut in Intellij
Oskar Ferm
2
Eine aktualisierte Antwort ist erforderlich, da IntelliJ IDEA 2017.1 unter "TypeScript-Community-Stubs" kein "Chrome" anzeigt. Irgendeine Idee, wie man das hinzufügt?
Reem
1
Es stellte sich heraus, dass es sich um einen Fehler in IntelliJ IDEA 2017.1 handelte. Youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
Reem
1
Auf dem Mac wird der Name nicht festgelegt, sondern bevorzugt. Aber Sie können mitcommand+,
Ulysse BN
4
Es sollte wahrscheinlich beachtet werden, dass WebStorm neu gestartet werden muss.
Tyler Crompton
42

UPDATE 2 :

Es wird jetzt sofort unterstützt, siehe die vollständige Antwort unten .

Bibliothek herunterladen

UPDATE :

Es gibt eine vollständigere Stub-Datei, die als Bibliothek hinzugefügt werden kann, um die Code-Vervollständigung zu erhalten. Es ist Teil des Closure Compiler-Projekts. Laden Sie chrome_extensions.js herunter .

Siehe auch die Funktionsanforderung für WebStorm , diese Bibliothek automatisch aus der IDE hinzuzufügen.

Sie müssen die JavaScript-Bibliothek für die Chrome-API irgendwo herunterladen oder einen Stub verwenden, um die grundlegende Vervollständigung zu erhalten .

Eine Bibliothek oder ein Stub kann in WebStorm konfiguriert werden .

Ich habe die JSON-Dateien mit der Erweiterungs-API gefunden . Man kann ein Skript schreiben, das JS-Stubs aus diesen JSON-Dateien erstellt. Die Stubs können wie die oben auf GitHub verknüpfte Basisversion aussehen, aber mit der automatischen Generierung enthalten sie fast vollständige API- und JSDoc-Kommentare, sodass die Dokumentation wie hier angezeigt werden kann direkt in der IDE.

JSON => Die Zuordnung von JavaScript-Objektstubs ist in diesem Fall ziemlich einfach, und das Schreiben dieser Art von Konverter sollte nicht länger als einen Tag (oder mehrere Stunden für den erfahrenen Codierer) dauern.

Wenn jemand vorgeht und es implementiert, posten Sie bitte den Link zu den Ergebnissen hier.

CrazyCoder
quelle
Danke, mir gefällt diese Idee am besten. /chrome/renderer/resources/extensionsAm Ende habe ich das Chromium Git Repo geklont und den Ordner hinzugefügt, der mir das meiste gab, was ich für Inspection wollte.
Matpie
sirlancelot - funktioniert bei mir nicht ... können Sie hier einen Snipper posten, der automatisch vervollständigt wird, nachdem Sie dieses Verzeichnis als Bibliothek zu WebStorm (oder IntelliJ) hinzugefügt haben?
Michal Bernhard
2
Ich habe Chrome Extension heruntergeladen, aber um die Unresolved variableWarnung in WebStorm zu entfernen, musste ich die folgende Zeile hinzufügen chrome_extension.js: var chrome = {}und sie als Bibliothek in mein Projekt aufnehmen.
MK Safi
Es gibt auch eine relativ aktuelle vsdoc-Datei (Dezember 2013) unter code.google.com/p/chrome-api-vsdoc . Es enthält Objekt-, Methoden- und Parameterbeschreibungen (die dieser TypeScript-Version fehlen). Beschreibungen werden beim Anzeigen mit Strg-Q etwas entstellt, da vsdoc XML für Dokumentanmerkungen verwendet, aber dennoch lesbar und verwendbar ist. Fügen Sie einfach den heruntergeladenen vsdoc als benutzerdefinierte JS-Bibliothek in Webstorm hinzu.
Boris B.
2

WebStorm sollte eines Tages JSON-Definitionen direkt akzeptieren, um die automatische Vervollständigung für die definierten Funktionen zu aktivieren. In der Zwischenzeit können Sie das Programm unter https://github.com/QuickrWorld/jsgen verwenden , um die JSON-Dateien in JS zu konvertieren und die automatische Vervollständigung für die Chrome-Erweiterungs-APIs zu aktivieren.

Amitabh
quelle
1

Zum Schreiben von AppScript, Funktionen und Klassen wie DriveApp , SpreadsheetApp gibt es in WebStorm oder Intellij ein Plugin namens google-app-script.
Die Installationsmethode ist dieselbe wie oben. Auf der anderen Seite sollten Sie die .gs-Datei als JavaScript markieren oder öffnen. (Juli 2017)

Mingzhong
quelle