¿Cómo uso WebStorm para el desarrollo de extensiones de Chrome?

104

Acabo de comprar WebStorm 5 y hasta ahora he disfrutado mucho de sus funciones de inspección. Un problema con el que me he encontrado al desarrollar mi extensión de Chrome es que no reconoce la chromevariable:

Variable sin resolver o tipo cromo

¿Hay alguna forma de que pueda agregar la chromevariable al Inspector para que pueda autocompletarse mientras escribo? Supongo que necesitaría agregar Chromium como una biblioteca externa, pero no estoy seguro de por dónde empezar.

javascript autocomplete google-chrome-extension intellij-idea webstorm matpie
fuente

Respuestas:

215

Configuración por primera vez

  1. Abra el Settingsdiálogo ( File> Settings)

  2. Haga clic Languages & Frameworks> Javascript>Libraries

  3. Hacer clic Download

  4. Asegúrese de que TypeScript community stubsesté seleccionado

  5. Seleccione chromede la lista (puede encontrarlo rápidamente con solo escribir chrome)

  6. Hacer clic Download and Install

  7. Haga clic OKpara cerrar el cuadro de diálogo Configuración.

Los pasos 2 a 6 se ilustran a continuación:

Captura de pantalla de Webstorm

En proyectos posteriores

En cualquier proyecto posterior, simplemente:

  1. Abra el Settingsdiálogo de nuevo ( File> Settings)

  2. Haga clic Languages & Frameworks> Javascript> Librariesnuevo

  3. Cheque chrome-DefinitelyTyped

  4. Haga clic OKpara cerrar el diálogo.

Los pasos 2 a 4 se muestran a continuación:

Captura de pantalla de Webstorm

Sinvergüenza
fuente
3
Funciona igual de bien en Intellij
Oskar Ferm
2
Se necesita una respuesta actualizada ya que IntelliJ IDEA 2017.1 no muestra "chrome" en "stubs de la comunidad de TypeScript". ¿Alguna idea de cómo agregar eso?
Reem
1
Resultó ser un error en IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
Reem
1
En mac, el nombre no es una configuración, sino una preferencia. Pero puede acceder a él usandocommand+,
Ulysse BN
4
Probablemente debería tenerse en cuenta que WebStorm deberá reiniciarse.
Tyler Crompton
42

ACTUALIZACIÓN 2 :

Ahora es compatible desde el primer momento, consulte la respuesta completa a continuación .

Descargar biblioteca

ACTUALIZAR :

Hay un archivo stub más completo que se puede agregar como biblioteca para completar el código. Es parte del proyecto Closure Compiler. Descarga chrome_extensions.js .

Consulte también la solicitud de función para WebStorm para agregar esta biblioteca automáticamente desde el IDE.

Necesita obtener la biblioteca de JavaScript para la API de Chrome en algún lugar, o usar un código auxiliar para obtener la finalización básica .

Se puede configurar una biblioteca o un código auxiliar en WebStorm .

Encontré los archivos JSON con la API de extensión . Se puede escribir un script que construya stubs JS a partir de estos archivos JSON, los stubs pueden parecerse a la versión básica vinculada en GitHub arriba, pero con la generación automática contendrán comentarios casi completos de API y JSDoc para que se pueda ver documentación como aquí. directamente en el IDE.

JSON => El mapeo de stubs de objetos JavaScript es bastante sencillo en este caso y escribir este tipo de convertidor no debería llevar más de un día (o varias horas para el codificador experto).

Si alguien sigue adelante y lo implementa, publique el enlace a los resultados aquí.

CrazyCoder
fuente
Gracias, me gusta más esta idea. De hecho, terminé clonando Chromium Git Repo y agregué la carpeta /chrome/renderer/resources/extensionsque me dio la mayor parte de lo que quería para la inspección.
matpie
sirlancelot: no funciona para mí ... ¿puedes publicar aquí algún snipper que se complete automáticamente después de agregar este directorio como una biblioteca a WebStorm (o IntelliJ)?
Michal Bernhard
2
Descargué Chrome Extension pero para deshacerme de la Unresolved variableadvertencia en WebStorm, tuve que agregar la siguiente línea a chrome_extension.js: var chrome = {}e incluirla como una biblioteca en mi proyecto.
MK Safi
También hay un archivo vsdoc bastante reciente (diciembre de 2013) en code.google.com/p/chrome-api-vsdoc . Tiene descripciones de objetos, métodos y parámetros (de las que carece esta versión de TypeScript). Las descripciones se alteran un poco cuando se ven con Ctrl-Q debido a que vsdoc usa XML para anotaciones de documentos, pero aún se pueden leer y usar. Simplemente agregue el vsdoc descargado como una biblioteca JS personalizada en Webstorm.
Boris B.
2

WebStorm debería algún día aceptar las definiciones json directamente para habilitar el autocompletado para las funciones definidas. Mientras tanto, puede usar el programa en https://github.com/QuickrWorld/jsgen para convertir los archivos json a js para habilitar la función de autocompletar para las API de extensión de Chrome.

Amitabh
fuente
1

Para escribir AppScript, funciones y clases como DriveApp , SpreadsheetApp , hay un complemento en WebStorm o Intellij llamado google-app-script.
El método de instalación es el mismo que el anterior. Por otro lado, debe marcar o abrir el archivo .gs como JavaScript. (Julio de 2017)

Mingzhong
fuente