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.

— Matpie
fonte

215

Configuração pela primeira vez

Abra a Settingscaixa de diálogo ( File> Settings)
Clique Languages & Frameworks> Javascript>Libraries
Clique Download
Certifique-se de que TypeScript community stubsestá selecionado
Selecione chromena lista (você pode encontrá-lo rapidamente apenas digitando chrome)
Clique Download and Install
Clique OKpara fechar a caixa de diálogo Configurações.

Etapas 2 a 6 ilustradas abaixo:

Em projetos subsequentes

Em qualquer projeto subsequente, você apenas:

Abra a Settingscaixa de diálogo novamente ( File> Settings)
Clique Languages & Frameworks> Javascript> Librariesnovamente
Verifica chrome-DefinitelyTyped
Clique OKpara fechar o diálogo.

Etapas 2 a 4 mostradas abaixo:

— 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