Je développe des extensions pour Chrome depuis longtemps et pendant ce temps, je suis passé des scripts utilisateur Greasemonkey à une application Angular à part entière dans le shell chrome-extension. Ma tâche consiste à patcher certains sites déjà opérationnels afin de changer leurs fonctionnalités et d'automatiser certains processus sur ces sites. Parfois, mon application se développe à grande échelle et il devient difficile de prendre en charge l'extension plain-js (il y a beaucoup de paramètres dans l'application, la fonctionnalité CRUD, etc.). Et puis Angular vient à la rescousse.
Dans cet article, je vais vous expliquer comment je me suis lié d'amitié avec
Chrome Extension et
Angular CLI , et configurer le processus de développement, ainsi que les difficultés que j'ai rencontrées et comment les résoudre.
Créez un nouveau dossier et initialisez-y une nouvelle application.
mkdir new-project cd new-project ng new frontend --routing=true --skipGit=true --style=scss --skipTests=true
Au stade du développement,
Angular génère un fichier html dynamique dans lequel le développement a lieu, et l'extension Chrome doit être alimentée par un fichier html statique pour voir le résultat du travail. Bien sûr, vous pouvez assembler séparément le projet Angulyarovsk, puis la version de construction peut déjà être écrite en plus, mais cela sera pratique si cela se produit automatiquement.
Après avoir généré une nouvelle application, allez dans le dossier frontend et dans le fichier package.json dans la section scripts ajoutez un nouveau script pour construire notre projet
"developing": "ng build --watch --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Faites attention à
deploy-url et à
base-href .
Ensuite, à la racine du projet, créez un autre dossier d'
extension et créez-y le fichier
extension.js , qui sera le script d'
arrière -
plan de notre extension. Structure actuelle du projet:
| 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) }); });
Ce sera
browserAction , qui ouvrira un nouvel onglet avec notre application angulaire, qui sous forme assemblée sera déjà stockée le long de ce chemin.
Ajouter manifest.json à notre projet { "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" } }
Nous pouvons maintenant assembler notre projet dans une extension. Nous allons dans
chrome: // extensions / ,
activons le mode développeur et sélectionnez
Télécharger l'extension décompressée .
La commodité est que nous avons presque un rechargement à chaud. Nous avons lancé
ng build avec l'indicateur de
surveillance et lorsque le code change, le projet sera reconstruit et les fichiers js seront remplacés. Autrement dit, sur la page d'extension, nous avons seulement besoin de recharger la page et toutes les mises à jour seront récupérées. Cela accélère considérablement le développement de modules complémentaires.
Un autre point auquel j'ai mangé le chien est celui de la configuration de routage:
{ useHash: true }
et nous reviendrons également ci-dessus,
base-href à la version que nous avons enregistrée en tant que
/frontend/dist/frontend/index.html?/ - faites attention à un point d'interrogation avant la dernière barre oblique. Le fait est que sur certains systèmes, lorsque vous cliquez sur les liens de l'application Angular, tout se bloque sans ce signe. Apparemment, le serveur Web statique du moteur Chrome a perçu le changement d'URL comme une demande vers un autre fichier (même si useHash: true) et lors de la mise à jour de la page, il a renvoyé une erreur 404. Ce n'est que dans cette combinaison que j'ai réussi à obtenir un fonctionnement stable sur tous les systèmes.
Revenons au
package.json de notre application et ajoutons un autre script
"prod": "ng build --sourceMap false --prod true --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Ce sera le script pour construire notre application pour la version de production.
Dans le Chrome Web Store, une archive zip avec l'extension est publiée et pour simplifier l'assemblage, j'ai fait un script à ces fins
Le code source peut être trouvé
ici .
Total: nous avons créé un kit de pré-développement pour Angular Chrome Extension avec le routage correct et la mise à jour / construction pratique de l'application.
PS: afin de se débarrasser d'un tel
/ frontend / dist / frontend / path, vous pouvez configurer l'environnement et spécifier le chemin dans l'assemblage de production différemment, mais ce n'est pas le point clé.