Ich habe lange Zeit Erweiterungen für Chrome entwickelt und bin in dieser Zeit von Greasemonkey-Benutzerskripten zu einer vollwertigen Angular-Anwendung in der Chrome-Erweiterungs-Shell übergegangen. Meine Aufgabe ist es, einige bereits funktionierende Sites zu patchen, um ihre Funktionalität zu ändern und einige Prozesse auf diesen Sites zu automatisieren. Manchmal wächst meine Anwendung in großem Maßstab und es wird schwierig, die Plain-Js-Erweiterung zu unterstützen (es gibt viele Einstellungen in der Anwendung, CRUD-Funktionalität usw.). Und dann kommt Angular zur Rettung.
In diesem Artikel werde ich Ihnen erklären, wie ich mich mit
Chrome Extension und
Angular CLI angefreundet und den Entwicklungsprozess eingerichtet habe sowie auf welche Schwierigkeiten ich gestoßen bin und wie ich sie lösen kann.
Erstellen Sie einen neuen Ordner und initialisieren Sie eine neue Anwendung darin.
mkdir new-project cd new-project ng new frontend --routing=true --skipGit=true --style=scss --skipTests=true
In der Entwicklungsphase generiert
Angular eine dynamische HTML-Datei, in der die Entwicklung stattfindet, und der Chrome-Erweiterung muss eine statische HTML-Datei zugeführt werden, um das Ergebnis der Arbeit anzuzeigen. Natürlich können Sie das Angulyarovsk-Projekt separat zusammenstellen und dann zusätzlich die Build-Version erstellen, aber es ist praktisch, wenn dies automatisch geschieht.
Wechseln Sie nach dem Generieren einer neuen Anwendung in den Frontend-Ordner und fügen Sie in der Datei package.json im Abschnitt Skripte ein neues Skript hinzu, um unser Projekt zu erstellen
"developing": "ng build --watch --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Achten Sie auf
deploy-url und
base-href .
Erstellen Sie dann im Stammverzeichnis des Projekts einen weiteren
Erweiterungsordner und erstellen Sie die Datei
extension.js darin, die das
Hintergrundskript für unsere Erweiterung darstellt. Aktuelle Projektstruktur:
| new-project/ | | extension/ | | | extension.js | | frontend/ | | | ...
Inhaltserweiterung.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) }); });
Dies ist
browserAction , die mit unserer Winkelanwendung eine neue Registerkarte öffnet, die in zusammengesetzter Form bereits auf diesem Pfad gespeichert wird.
Fügen Sie manifest.json zu unserem Projekt hinzu { "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" } }
Jetzt können wir unser Projekt zu einer Erweiterung zusammenstellen. Wir gehen in
chrome: // extensions / ,
aktivieren den Entwicklermodus und wählen
Download Unpacked extension .
Der Vorteil ist, dass wir fast Hot-Reloading haben. Wir haben
ng build mit dem
Watch- Flag gestartet. Wenn sich der Code ändert, wird das Projekt neu erstellt und die js-Dateien werden ersetzt. Das heißt, auf der Erweiterungsseite müssen wir nur die Seite neu laden, und alle Aktualisierungen werden übernommen. Dies beschleunigt die Entwicklung von Add-Ons erheblich.
Ein weiterer Punkt, an dem ich den Hund gefressen habe, ist der in der Routing-Konfiguration:
{ useHash: true }
und wir werden auch oben zurückkehren,
base-href bei Build, den wir als
/frontend/dist/frontend/index.html?/ registriert
haben - achten Sie auf ein Fragezeichen vor dem letzten Schrägstrich. Tatsache ist, dass auf einigen Systemen, wenn Sie auf die Links in der Angular-Anwendung klicken, alles ohne dieses Zeichen abstürzt. Anscheinend hat der statische Webserver der Chrome Engine die URL-Änderung als Anforderung an eine andere Datei wahrgenommen (obwohl useHash: true), und beim Aktualisieren der Seite wurde ein 404-Fehler zurückgegeben. Nur in dieser Kombination gelang es mir, auf allen Systemen einen stabilen Betrieb zu erreichen.
Kehren wir zur
package.json unserer Anwendung zurück und fügen ein weiteres Skript hinzu
"prod": "ng build --sourceMap false --prod true --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Dies ist das Skript zum Erstellen unserer Anwendung für die Produktionsversion.
Im Chrome Web Store wird ein Zip-Archiv mit der Erweiterung veröffentlicht. Um die Zusammenstellung zu vereinfachen, habe ich für diese Zwecke ein Skript erstellt
Den Quellcode finden Sie
hier .
Insgesamt: Wir haben ein Vorentwicklungskit für Angular Chrome Extension mit dem richtigen Routing und der praktischen Aktualisierung / Erstellung der Anwendung erstellt.
PS: Um ein solches
/ frontend / dist / frontend / path zu
entfernen , können Sie die Umgebung konfigurieren und den Pfad in der Produktionsassembly anders angeben, aber dies ist nicht der entscheidende Punkt.