Как использовать WebStorm для разработки расширений Chrome?

104

Я только что купил WebStorm 5 и до сих пор действительно наслаждался его функциями Inspection. Одна проблема, с которой я столкнулся при разработке расширения Chrome, заключается в том, что оно не распознает chromeпеременную:

Неразрешенная переменная или тип хром

Есть ли способ добавить chromeпеременную в инспектор, чтобы она могла автоматически заполняться при вводе текста? Я предполагаю, что мне нужно добавить Chromium в качестве внешней библиотеки, но я не уверен, с чего начать.

javascript autocomplete google-chrome-extension intellij-idea webstorm Matpie
источник

Ответы:

215

Первая настройка

  1. Откройте Settingsдиалог ( File> Settings)

  2. Нажмите Languages & Frameworks> Javascript>Libraries

  3. Нажмите Download

  4. Убедитесь, что TypeScript community stubsвыбран

  5. Выберите chromeиз списка (вы можете быстро найти его, просто набрав chrome)

  6. Нажмите Download and Install

  7. Щелкните, OKчтобы закрыть диалоговое окно настроек.

Шаги 2-6 показаны ниже:

Скриншот Webstorm

В последующих проектах

В любом последующем проекте вы просто:

  1. Откройте Settingsснова диалоговое окно ( File> Settings)

  2. Нажмите Languages & Frameworks> Javascript> Librariesеще раз

  3. Проверьте chrome-DefinitelyTyped

  4. Щелкните, OKчтобы закрыть диалоговое окно.

Шаги 2-4 показаны ниже:

Скриншот Webstorm

Мошенник
источник
3
Так же хорошо работает в Intellij
Оскар Ферм
3
Обновленный ответ необходим, поскольку IntelliJ IDEA 2017.1 не показывает «хром» в «заглушках сообщества TypeScript». Есть идеи, как это добавить?
Reem
1
Оказалось, что это ошибка в IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
Reem
1
На Mac имя не настройка, а предпочтение. Но вы можете получить к нему доступ, используяcommand+,
Ulysse BN
4
Вероятно, следует отметить, что WebStorm необходимо будет перезапустить.
Тайлер Кромптон
43

ОБНОВЛЕНИЕ 2 :

Теперь он поддерживается "из коробки", см. Полный ответ ниже .

Скачать библиотеку

ОБНОВЛЕНИЕ :

Существует более полный файл-заглушка, который можно добавить в качестве библиотеки для завершения кода. Это часть проекта Closure Compiler. Загрузите chrome_extensions.js .

См. Также запрос функции для WebStorm для автоматического добавления этой библиотеки из среды IDE.

Вам нужно где-то получить библиотеку JavaScript для Chrome API или использовать заглушку, чтобы получить базовое завершение .

Библиотеку или заглушку можно настроить в WebStorm .

Я нашел файлы JSON с помощью Extension API . Можно написать сценарий, который будет создавать заглушки JS из этих файлов JSON, заглушки могут выглядеть как базовая версия, указанная на GitHub выше, но при автоматической генерации они будут содержать почти полные комментарии API и JSDoc, чтобы можно было просматривать документацию, подобную этой. прямо в IDE.

JSON => Отображение заглушек объектов JavaScript в этом случае довольно просто, и написание такого конвертера не должно занять больше дня (или нескольких часов для опытного кодера).

Если кто-то продолжит и реализует это, пожалуйста, разместите ссылку на результаты здесь.

CrazyCoder
источник
Спасибо, мне больше всего нравится эта идея. Я фактически закончил тем, что клонировал Chromium Git Repo и добавил папку, /chrome/renderer/resources/extensionsкоторая дала мне большую часть того, что я хотел для проверки.
Matpie
sirlancelot - у меня не работает ... не могли бы вы опубликовать здесь какой-нибудь фрагмент кода, который имеет автозаполнение после добавления этого каталога в качестве библиотеки в WebStorm (или IntelliJ)?
Michal Bernhard
2
Я загрузил расширение Chrome, но чтобы избавиться от Unresolved variableпредупреждения в WebStorm, мне пришлось добавить следующую строку chrome_extension.js: var chrome = {}и включить ее как библиотеку в свой проект.
MK Safi
Также имеется довольно свежий (декабрь 2013 г.) файл vsdoc по адресу code.google.com/p/chrome-api-vsdoc . В нем есть описания объектов, методов и параметров (которых нет в этой версии TypeScript). Описания немного искажаются при просмотре с помощью Ctrl-Q из-за того, что vsdoc использует XML для аннотаций документов, но все еще читаемы и удобны. Просто добавьте загруженный vsdoc в качестве настраиваемой библиотеки JS в Webstorm.
Борис Б.
2

Когда-нибудь WebStorm должен будет принимать определения json напрямую, чтобы включить автозаполнение для определенных функций. Между тем, вы можете использовать программу по адресу https://github.com/QuickrWorld/jsgen для преобразования файлов json в js, чтобы включить автозаполнение для API-интерфейсов расширения Chrome.

Амитабх
источник
0

Для написания AppScript, функций и классов, таких как DriveApp , SpreadsheetApp , в WebStorm или Intellij есть плагин под названием google-app-script.
Способ установки такой же, как указано выше. С другой стороны, вы должны пометить или открыть файл .gs как JavaScript. (Июль 2017 г.)

Минчжун
источник