Jak używać WebStorm do tworzenia rozszerzeń przeglądarki Chrome?

104

Właśnie kupiłem WebStorm 5 i do tej pory naprawdę cieszę się z jego funkcji Inspection. Jednym z problemów, na które natknąłem się podczas tworzenia rozszerzenia do Chrome, jest to, że nie rozpoznaje ono chromezmiennej:

Nierozwiązana zmienna lub wpisz chrome

Czy istnieje sposób, w jaki mogę dodać chromezmienną do Inspektora, aby mogła się autouzupełnianie podczas pisania? Zgaduję, że musiałbym dodać Chromium jako bibliotekę zewnętrzną, ale nie jestem pewien, od czego zacząć.

javascript autocomplete google-chrome-extension intellij-idea webstorm matpie
źródło

Odpowiedzi:

215

Pierwsza konfiguracja

  1. Otwórz Settingsokno dialogowe ( File> Settings)

  2. Kliknij Languages & Frameworks> Javascript>Libraries

  3. Kliknij Download

  4. Upewnij się, że TypeScript community stubsjest zaznaczona

  5. Wybierz chromez listy (możesz go szybko znaleźć, po prostu wpisując chrome)

  6. Kliknij Download and Install

  7. Kliknij, OKaby zamknąć okno dialogowe Ustawienia.

Kroki 2-6 zilustrowane poniżej:

Zrzut ekranu burzy internetowej

W kolejnych projektach

W każdym kolejnym projekcie po prostu:

  1. Otwórz Settingsponownie okno dialogowe ( File> Settings)

  2. Kliknij Languages & Frameworks> Javascript> Librariesponownie

  3. Czek chrome-DefinitelyTyped

  4. Kliknij, OKaby zamknąć okno dialogowe.

Kroki 2-4 pokazano poniżej:

Zrzut ekranu z burzy internetowej

Niegodziwiec
źródło
3
Równie dobrze działa w Intellij
Oskar Ferm
3
Potrzebna jest zaktualizowana odpowiedź, ponieważ IntelliJ IDEA 2017.1 nie wyświetla "chrome" w "stubs społeczności TypeScript". Masz pomysł, jak to dodać?
Reem
1
Okazało się, że to błąd w IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
Reem
1
Na Macu nazwa nie jest ustawieniem, ale preferencją. Ale możesz uzyskać do niego dostęp za pomocącommand+,
Ulysse BN
4
Należy prawdopodobnie zauważyć, że WebStorm będzie musiał zostać ponownie uruchomiony.
Tyler Crompton
43

AKTUALIZACJA 2 :

Jest teraz obsługiwany po wyjęciu z pudełka, zobacz pełną odpowiedź poniżej .

Pobierz bibliotekę

AKTUALIZACJA :

Istnieje bardziej kompletny plik pośredniczący, który można dodać jako bibliotekę, aby uzyskać uzupełnianie kodu. To część projektu Closure Compiler. Pobierz chrome_extensions.js .

Zobacz także żądanie funkcji dla WebStorm, aby automatycznie dodać tę bibliotekę ze środowiska IDE.

Musisz gdzieś pobrać bibliotekę JavaScript dla interfejsu API Chrome lub użyć kodu pośredniczącego, aby uzyskać podstawowe uzupełnienie .

Bibliotekę lub skrót można skonfigurować w WebStorm .

Znalazłem pliki JSON z rozszerzeniem API . Można napisać skrypt, który zbuduje fragmenty kodu JS z tych plików JSON, kody pośredniczące mogą wyglądać jak podstawowa wersja połączona na GitHub powyżej, ale przy automatycznym generowaniu będą zawierały prawie kompletne komentarze API i JSDoc, aby można było przeglądać dokumentację taką jak tutaj bezpośrednio w IDE.

Mapowanie kodu JSON => kodowanie obiektów JavaScript jest całkiem proste w tym przypadku, a napisanie tego rodzaju konwertera nie powinno zająć więcej niż jeden dzień (lub kilka godzin dla wykwalifikowanego programisty).

Jeśli ktoś pójdzie naprzód i wdroży to, prześlij link do wyników tutaj.

CrazyCoder
źródło
Dzięki, ten pomysł podoba mi się najbardziej. Skończyło się na sklonowaniu Chromium Git Repo i dodaniu folderu, /chrome/renderer/resources/extensionsktóry dał mi większość tego, czego chciałem do inspekcji.
matpie
sirlancelot - nie działa dla mnie ... czy możesz tutaj zamieścić snippera, który ma automatyczne uzupełnianie po dodaniu tego katalogu jako biblioteki do WebStorm (lub IntelliJ)?
Michał Bernhard
2
Pobrałem Chrome Extension ale aby pozbyć się Unresolved variableostrzeżenia w WebStorm, musiałem dodać następujący wiersz chrome_extension.js: var chrome = {}i obejmują go jako biblioteki w moim projekcie.
MK Safi
Istnieje również dość nowy (grudzień 2013 r.) Plik vsdoc pod adresem code.google.com/p/chrome-api-vsdoc . Zawiera opisy obiektów, metod i parametrów (których brakuje w tej wersji TypeScript). Opisy są nieco zniekształcone podczas przeglądania za pomocą Ctrl-Q, ponieważ vsdoc używa XML do adnotacji dokumentów, ale nadal są czytelne i użyteczne. Po prostu dodaj pobrany vsdoc jako niestandardową bibliotekę JS w Webstorm.
Boris B.
2

WebStorm powinien pewnego dnia akceptować definicje json bezpośrednio, aby umożliwić autouzupełnianie dla zdefiniowanych funkcji. W międzyczasie możesz użyć programu pod adresem https://github.com/QuickrWorld/jsgen, aby przekonwertować pliki json na js, aby włączyć automatyczne uzupełnianie dla interfejsów API rozszerzeń Chrome.

Amitabh
źródło
0

Do pisania AppScript, funkcji i klas, takich jak DriveApp , SpreadsheetApp , służy wtyczka w WebStorm lub Intellij o nazwie google-app-script.
Metoda instalacji jest taka sama jak powyżej. Z drugiej strony należy oznaczyć lub otworzyć plik .gs jako JavaScript. (Lipiec 2017)

Mingzhong
źródło