Desenvolvo extensões para o Chrome por um longo tempo e, durante esse período, passei de scripts de usuário do Greasemonkey a um aplicativo Angular completo no shell de extensão do Chrome. Minha tarefa é corrigir alguns sites já em funcionamento para alterar sua funcionalidade e automatizar alguns processos nesses sites. Às vezes, meu aplicativo cresce em larga escala e torna-se difícil oferecer suporte à extensão js simples (existem muitas configurações no aplicativo, funcionalidade CRUD etc.). E então Angular vem em socorro.
Neste artigo, mostrarei como fiz amizade com a
Extensão do Chrome e a
CLI Angular e configurei o processo de desenvolvimento, bem como as dificuldades que encontrei e como resolvê-las.
Crie uma nova pasta e inicialize um novo aplicativo nela.
mkdir new-project cd new-project ng new frontend --routing=true --skipGit=true --style=scss --skipTests=true
No estágio de desenvolvimento, o
Angular gera um arquivo html dinâmico no qual o desenvolvimento ocorre, e a extensão do Chrome precisa receber um arquivo html estático para ver o resultado do trabalho. Obviamente, você pode montar o projeto Angulyarovsk separadamente e depois construir a versão de compilação, mas será conveniente se isso acontecer automaticamente.
Após gerar um novo aplicativo, vá para a pasta frontend e, no arquivo package.json, na seção scripts, adicione um novo script para criar nosso projeto
"developing": "ng build --watch --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Preste atenção ao
deploy-url e
base-href .
Em seguida, na raiz do projeto, crie outra pasta de
extensão e crie o arquivo
extension.js , que será o script de
segundo plano da nossa extensão. Estrutura atual do projeto:
| new-project/ | | extension/ | | | extension.js | | frontend/ | | | ...
Content
extension.js const ANGULAR_HTML_URL = "../../frontend/dist/frontend/index.html"; chrome.browserAction.onClicked.addListener(function () { chrome.tabs.create({ url: chrome.runtime.getURL(ANGULAR_HTML_URL) }); });
Será o
browserAction , que abrirá uma nova guia com nosso aplicativo angular, que na forma montada já será armazenado nesse caminho.
Adicione manifest.json ao nosso projeto { "manifest_version": 2, "name": "Simple Chrome Ext", "description": "Simple Chrome Extension as an example", "version": "1.00", "author": "Bogdan", "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "background": { "persistent": true, "scripts": ["/extension/extension.js"] }, "browser_action": { "default_title": "Chrome ext" } }
Agora podemos montar nosso projeto em uma extensão. Vamos no
chrome: // extensions / ,
ativamos o modo de desenvolvedor e selecionamos
Baixar extensão descompactada .
A conveniência é que temos quase recargas a quente. Lançamos o
build com a flag
watch e, quando o código for alterado, o projeto será reconstruído e os arquivos js serão substituídos. Ou seja, na página de extensão, precisamos recarregar a página e todas as atualizações serão selecionadas. Isso acelera bastante o desenvolvimento de complementos.
Outro ponto em que comi o cachorro é o da configuração de roteamento:
{ useHash: true }
e também retornaremos acima,
base-href na compilação que registramos como
/frontend/dist/frontend/index.html?/ - preste atenção a um ponto de interrogação antes da última barra. O fato é que, em alguns sistemas, quando você clica nos links do aplicativo Angular, tudo falha sem esse sinal. Aparentemente, o servidor da Web estático do mecanismo do Chrome percebeu a alteração da URL como uma solicitação para outro arquivo (mesmo que useHash: true) e, ao atualizar a página, retornou um erro 404. Somente nessa combinação eu consegui obter uma operação estável em todos os sistemas.
Vamos voltar ao
package.json do nosso aplicativo e adicionar outro script
"prod": "ng build --sourceMap false --prod true --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Este será o script para criar nosso aplicativo para a versão de produção.
Na Chrome Web Store, é postado um arquivo zip com a extensão e, para simplificar a montagem, criei um script para esses fins
O código fonte pode ser encontrado
aqui .
Total: criamos um kit de pré-desenvolvimento para a Angular Chrome Extension com o roteamento correto e a atualização / criação conveniente do aplicativo.
PS: para se livrar desse caminho
/ frontend / dist / frontend / , é possível configurar o ambiente e especificar o caminho no conjunto de produção de maneira diferente, mas esse não é o ponto principal.