So erstellen Sie eine Chrome-Erweiterung mit Angular.js

Blog

Heute werden wir den Entwicklungsprozess einer Chrome-Erweiterung mit Angular untersuchen.



Wir werden bei Null anfangen und mit einer voll funktionsfähigen Chrome-Erweiterung, einer praktischen Entwicklungsumgebung und hoffentlich einem guten Verständnis der Funktionsweise abschließen.

Aber lassen Sie uns zunächst eines klarstellen…



Warum sollte man eine Chrome-Erweiterung entwickeln wollen?

Es gibt mehrere Gründe, die Sie dazu bringen würden, eine Chrome-Erweiterung zu entwickeln. Die erste (und unwahrscheinlichste) ist, Geld zu verdienen.

Was bedeutet Anzeigeblock?

Ja, es gibt Chrome-Erweiterungen, die im Chrome Store veröffentlicht werden und Entwickler dafür bezahlt werden. Und wenn Sie eine Idee für eine Erweiterung und ein profitables Geschäftsmodell haben – nun, wer bin ich, um Ihnen zu sagen, dass Sie es nicht tun sollten.



Ich glaube jedoch, dass der Hauptanwendungsfall für die Entwicklung einer Erweiterung darin besteht, Ihre Bedürfnisse als Entwickler zu erfüllen.

In meiner Firma haben wir zum Beispiel eine Handvoll Chrome-Erweiterungen, die von Entwicklern für Entwickler und BOY entwickelt wurden, wie viel Zeit mir das gespart hat!

Ich bin mir sicher, dass Sie fällt Ihnen mindestens eine Sache ein, die Sie während des Entwicklungszyklus immer wieder tun und die mit einer einfachen Chrome-Erweiterung leicht automatisiert werden kann.

Selen-Upload-Datei python

Heute lernst du, wie man einen baut und um noch mehr Spaß zu haben, werden wir das mit Angular tun.

Woraus die Chrome-Erweiterung besteht

Hintergrundskript

Die Hintergrundskript ist der Ereignishandler der Erweiterung; es enthält Listener für Browserereignisse, die für die Erweiterung wichtig sind. Es ruht, bis ein Ereignis ausgelöst wird, und führt dann die angewiesene Logik aus. Ein effektives Hintergrundskript wird nur geladen, wenn es benötigt wird, und entladen, wenn es inaktiv wird.

Gelöschte Twitter-Bilder finden

Inhaltsskript

Erweiterungen, die Webseiten lesen oder schreiben, verwenden a Inhaltsskript . Das Inhaltsskript enthält JavaScript, das in den Kontexten einer Seite ausgeführt wird, die in den Browser geladen wurde. Inhaltsskripte lesen und ändern das DOM von Webseiten, die der Browser besucht.

Wir werden diese in diesem Tutorial nicht berühren (naja, fast)

Popup (in Browseraktion)

Wenn eine Browseraktion über ein Popup verfügt, wird das Popup angezeigt, wenn der Benutzer auf das Symbol klickt. Das Popup kann beliebige HTML-Inhalte enthalten und wird automatisch an seinen Inhalt angepasst.

Spoiler: Hier verwenden wir Angular


Sie können auch mögen ... So erstellen Sie eine Chrome-Erweiterung mit Vue.js


Danke fürs Lesen :heart: Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden! Folge mir auf Facebook | Twitter

Landingpage-Vorlage kostenlos reagieren

#eckige #Webentwicklung

blog.angularindepth.com

So erstellen Sie eine Chrome-Erweiterung mit Angular.js

Heute werden wir den Entwicklungsprozess einer Chrome-Erweiterung mit Angular untersuchen. Wir werden bei Null anfangen und mit einer voll funktionsfähigen Chrome-Erweiterung, einer praktischen Entwicklungsumgebung und hoffentlich einem guten Verständnis der Funktionsweise abschließen.