He estado desarrollando extensiones para Chrome durante mucho tiempo y durante este tiempo he pasado de los scripts de usuario de Greasemonkey a una aplicación Angular completa en el shell de extensión de Chrome. Mi tarea es parchear algunos sitios que ya funcionan para cambiar su funcionalidad y automatizar algunos procesos en estos sitios. A veces, mi aplicación crece a gran escala y es difícil admitir la extensión plain-js (la aplicación tiene muchas configuraciones, funcionalidad CRUD, etc.). Y luego Angular viene al rescate.
En este artículo, te contaré cómo me hice amigo de
Chrome Extension y
Angular CLI , y cómo configuré el proceso de desarrollo, así como las dificultades que encontré y cómo resolverlas.
Cree una nueva carpeta e inicialice una nueva aplicación en ella.
mkdir new-project cd new-project ng new frontend --routing=true --skipGit=true --style=scss --skipTests=true
En la etapa de desarrollo,
Angular genera un archivo html dinámico en el que tiene lugar el desarrollo, y la extensión de Chrome necesita ser alimentada con un archivo html estático para ver el resultado del trabajo. Por supuesto, puede ensamblar por separado el proyecto Angulyarovsk y luego construir la versión de compilación además, pero será conveniente si esto sucede automáticamente.
Después de generar una nueva aplicación, vaya a la carpeta frontend y en el archivo package.json en la sección de scripts agregue un nuevo script para construir nuestro proyecto
"developing": "ng build --watch --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Presta atención a
deploy-url y
base-href .
Luego, en la raíz del proyecto, cree otra carpeta de
extensión y cree el archivo
extension.js en ella, que será el script de
fondo para nuestra extensión. Estructura actual del proyecto:
| 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) }); });
Esta será
browserAction , que abrirá una nueva pestaña con nuestra aplicación angular, que en forma ensamblada ya se almacenará a lo largo de esta ruta.
Agregue manifest.json a nuestro proyecto { "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" } }
Ahora podemos ensamblar nuestro proyecto en una extensión. Entramos en
chrome: // extensiones / ,
habilitamos el modo desarrollador y seleccionamos
Descargar extensión desempaquetada .
La conveniencia es que tenemos una recarga casi en caliente. Lanzamos
ng build con el indicador
watch y cuando el código cambia, el proyecto se reconstruirá y los archivos js serán reemplazados. Es decir, en la página de extensión, solo necesitamos volver a cargar la página y se recogerán todas las actualizaciones. Esto acelera enormemente el desarrollo de complementos.
Otro punto en el que me comí el perro es que en la configuración de enrutamiento:
{ useHash: true }
y también volveremos arriba,
base-href en la compilación que registramos como
/frontend/dist/frontend/index.html?/ - preste atención a un signo de interrogación antes de la última barra inclinada. El hecho es que en algunos sistemas, cuando hace clic en los enlaces de la aplicación Angular, todo falla sin este signo. Aparentemente, el servidor web estático del motor de Chrome percibió el cambio de URL como una solicitud a otro archivo (aunque useHash: verdadero) y al actualizar la página devolvió un error 404. Solo en esta combinación logré lograr una operación estable en todos los sistemas.
Volvamos al
paquete.json de nuestra aplicación y agreguemos otro script
"prod": "ng build --sourceMap false --prod true --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Este será el script para construir nuestra aplicación para la versión de producción.
En Chrome Web Store, se publica un archivo zip con la extensión y, para simplificar el ensamblaje, hice un script para estos fines
El código fuente se puede encontrar
aquí .
Total: creamos un kit de predesarrollo para Angular Chrome Extension con el enrutamiento correcto y la conveniente actualización / compilación de la aplicación.
PD: para deshacerse de tal
/ frontend / dist / frontend / path, puede configurar el entorno y especificar la ruta en el ensamblado de producción de manera diferente, pero este no es el punto clave.