Como faço para usar o WebStorm para desenvolvimento de extensão do Chrome?

104

Acabei de comprar o WebStorm 5 e até agora estou gostando muito de seus recursos de inspeção. Um obstáculo que encontrei ao desenvolver minha extensão do Chrome é que ela não reconhece a chromevariável:

Variável não resolvida ou tipo cromo

Existe uma maneira de adicionar a chromevariável ao Inspetor para que ele possa ser preenchido automaticamente enquanto digito? Acho que precisaria adicionar o Chromium como uma biblioteca externa, mas não sei por onde começar.

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

Respostas:

215

Configuração pela primeira vez

  1. Abra a Settingscaixa de diálogo ( File> Settings)

  2. Clique Languages & Frameworks> Javascript>Libraries

  3. Clique Download

  4. Certifique-se de que TypeScript community stubsestá selecionado

  5. Selecione chromena lista (você pode encontrá-lo rapidamente apenas digitando chrome)

  6. Clique Download and Install

  7. Clique OKpara fechar a caixa de diálogo Configurações.

Etapas 2 a 6 ilustradas abaixo:

Captura de tela do Webstorm

Em projetos subsequentes

Em qualquer projeto subsequente, você apenas:

  1. Abra a Settingscaixa de diálogo novamente ( File> Settings)

  2. Clique Languages & Frameworks> Javascript> Librariesnovamente

  3. Verifica chrome-DefinitelyTyped

  4. Clique OKpara fechar o diálogo.

Etapas 2 a 4 mostradas abaixo:

Captura de tela do Webstorm

Malcriado
fonte
3
Funciona tão bem em Intellij
Oskar Ferm
2
Uma resposta atualizada é necessária, pois o IntelliJ IDEA 2017.1 não mostra "chrome" em "stubs da comunidade TypeScript". Alguma ideia de como adicionar isso?
Reem de
1
Acabou por ser um bug no IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
Reem
1
No mac, o nome não é configuração, mas preferência. Mas você pode acessá-lo usandocommand+,
Ulysse BN
4
Provavelmente, deve ser observado que o WebStorm precisará ser reiniciado.
Tyler Crompton
42

ATUALIZAÇÃO 2 :

Agora é compatível com o uso imediato. Veja a resposta completa abaixo .

Baixar biblioteca

ATUALIZAÇÃO :

Existe um arquivo stub mais completo que pode ser adicionado como uma biblioteca para obter o preenchimento de código. É parte do projeto Closure Compiler. Faça download de chrome_extensions.js .

Consulte também a solicitação de recurso do WebStorm para adicionar esta biblioteca automaticamente do IDE.

Você precisa obter a biblioteca JavaScript para a API do Chrome em algum lugar ou usar um esboço para obter o preenchimento básico .

A biblioteca ou um esboço pode ser configurado no WebStorm .

Encontrei os arquivos JSON com a API de extensão . Pode-se escrever um script que construirá stubs JS a partir desses arquivos JSON, os stubs podem se parecer com a versão básica vinculada no GitHub acima, mas com a geração automática, eles conterão comentários API e JSDoc quase completos para que a documentação como aqui possa ser visualizada diretamente no IDE.

JSON => mapeamento de stubs de objeto JavaScript é bastante simples neste caso e escrever este tipo de conversor não deve levar mais de um dia (ou várias horas para o codificador experiente).

Se alguém for em frente e implementá-lo, poste o link para os resultados aqui.

CrazyCoder
fonte
Obrigado, eu gosto mais dessa ideia. Na verdade, acabei clonando o Chromium Git Repo e adicionando a pasta /chrome/renderer/resources/extensionsque me deu a maior parte do que eu queria para a inspeção.
matpie
sirlancelot - não funciona para mim ... você pode postar aqui algum snipper que tenha completação automática após adicionar este diretório como uma biblioteca ao WebStorm (ou IntelliJ)?
Michal Bernhard
2
Eu baixei o Chrome Extension mas para se livrar do Unresolved variablealerta em WebStorm, eu tive que adicionar a seguinte linha chrome_extension.js: var chrome = {}e incluí-lo como uma biblioteca no meu projeto.
MK Safi
Também existe um arquivo vsdoc bastante recente (dezembro de 2013) em code.google.com/p/chrome-api-vsdoc . Ele tem descrições de objeto, método e parâmetro (que esta versão do TypeScript não possui). As descrições são um pouco distorcidas quando visualizadas com Ctrl-Q devido ao vsdoc usando XML para anotações de documentos, mas ainda legíveis e utilizáveis. Basta adicionar o vsdoc baixado como uma biblioteca JS personalizada no Webstorm.
Boris B.
2

WebStorm deve um dia aceitar definições json diretamente para habilitar o autocomplete para as funções definidas. Enquanto isso, você pode usar o programa em https://github.com/QuickrWorld/jsgen para converter os arquivos json em js para ativar o preenchimento automático para as APIs de extensão do Chrome.

Amitabh
fonte
1

Para escrever AppScript, funções e classes como DriveApp , SpreadsheetApp , existe um plugin no WebStorm ou Intellij chamado google-app-script.
O método de instalação é igual ao anterior. Por outro lado, você deve marcar ou abrir o arquivo .gs como JavaScript. (Julho de 2017)

Mingzhong
fonte