In dieser Artikelserie möchte ich über meine Erfahrungen beim Schreiben einer Web-Erweiterung für Browser sprechen. Ich hatte bereits Erfahrung mit der Erstellung einer Web-Erweiterung, die von etwa 100.000 Chrome-Nutzern installiert wurde und autonom arbeitete. In dieser Artikelserie habe ich mich jedoch entschlossen, den Entwicklungsprozess der Web-Erweiterung zu untersuchen, indem ich sie eng in die Serverseite integriert habe.




Teil 2 , Teil 3 , Teil 4

Idee für eine Web-Erweiterung

Jeder Entwickler steht vor der Aufgabe, Prozesse im Browser zu automatisieren. Einmal war es für mich die Aufgabe, Mitglieder von Gruppen eines bestimmten Themas auf LinkedIn und Facebook zu sammeln.

Zuvor hatte ich Erfahrung mit dem Schreiben von Web-Parser-Lösungen in PHP, aber diese Websites verwenden viele dynamische Elemente, und der Schwerpunkt der Lösung für diese Aufgabe hat sich speziell auf die Interaktion mit Webressourcen über einen Browser verlagert.

Natürlich wollte ich nicht gegen die Vereinbarung über die Erbringung von Dienstleistungen (Allgemeine Geschäftsbedingungen) verstoßen, daher ist das, was unten beschrieben wird, eine reine Erfindung meiner Vorstellungskraft und wird für die Implementierung nicht empfohlen.

Es war möglich, die Entwicklerkonsole schnell zu öffnen und ein Javascript-Skript zu schreiben, das Benutzeraktionen simuliert, wonach ich Daten sammeln konnte. Dieser Ansatz funktionierte teilweise mit Facebook, wo Gruppenmitglieder und ihre Informationen auf einer Seite gesammelt werden können. Bei LinkedIn hat es jedoch nicht funktioniert, da Sie die Seite jedes Mitglieds öffnen müssen.

Nachdem ich nach Lösungen von Drittanbietern gesucht hatte, entschied ich mich für iMacros für diese Aufgabe. Diese Erweiterung verfügt über eine eigene Sprache zum Schreiben von Makros. Irgendwie habe ich es angepasst, um das Problem für LinkedIn zu lösen. Ich musste die alte Version von Mozilla Firefox herunterladen, da die Erweiterung für die Multithread-Implementierung dieses Browsers nicht funktionierte.

Bei der Suche nach Lösungen von Drittanbietern stieß ich auf viele Variationen von Web-Parser, Web-Crawler, Web-Scraper usw. Viele konzentrierten sich auf Websites mit seitenweiser Navigation und nicht auf dynamischen Inhalt. Einige Lösungen schlugen vor, eine Softwarelösung für das Betriebssystem zu installieren und dann eine Web-Erweiterung für einen solchen Komplex zu verwenden. Ich bin auf sehr hochspezialisierte Dinge gestoßen, zum Beispiel, um Teilnehmer nur auf Facebook zu sammeln.

Nach all den Qualen hatte ich die Idee, „mein Fahrrad zu erfinden“, um Aufgaben im Browser zu automatisieren. Unter den obligatorischen Anforderungen für meine Web-Erweiterung habe ich Folgendes hervorgehoben:

1. Arbeiten Sie in der maximalen Anzahl von Webbrowsern, einschließlich Mobilgeräten.
2. Die Verwendung der Standard-Skriptsprache für Browser ist Javascript.
3. Verwenden Sie Ihre eigenen Datendateien in Skripten.
4. Die Möglichkeit, vom Skript empfangene Daten in einer Datei zu speichern.
5. Skripte müssen entweder öffentlich oder privat sein. Wenn das Skript öffentlich ist, muss das Sicherheitsteam ein solches Skript überprüfen.

Weiter von dieser Liste habe ich für jeden Artikel spezifischere Dinge notiert.

1. Sie müssen ein Framework zum Schreiben von Web-Erweiterungen verwenden, um den Aufwand für die Entwicklung browserübergreifender Lösungen zu minimieren.
2. Javascript wird von allen Browsern unterstützt, Sie müssen jedoch eine eigene Bibliothek schreiben, um mit der Web-Erweiterung interagieren zu können. Diese Bibliothek sollte Funktionen zum Speichern von Daten, Abrufen von Daten aus heruntergeladenen Dateien usw. enthalten.
3. Es ist häufig erforderlich, die Eingabe zum Ausführen des Skripts zu verwenden. Zum Beispiel Daten für die Autorisierung, Schlüssel für die API, eine Liste der zu crawlenden Seiten usw. Diese Daten sollten direkt in die Web-Erweiterung hochgeladen und in der Cloud gespeichert werden.
4. Das Speichern von Daten aus dem Skript ist eine der wichtigsten Funktionen für die Automatisierung. Die gespeicherten Daten müssen direkt von der Web-Erweiterung auf csv hochgeladen oder an die E-Mail des Benutzers gesendet werden, wenn das Datenlimit für das Hochladen überschritten wird. Wenn beispielsweise mehr als 10.000 Gruppenmitglieder hochgeladen werden, kann das Herunterladen von einer Web-Erweiterung lange dauern. Dies sollte vermieden werden, indem eine Datei auf dem Server generiert wird.
5. Sie müssen über eine administrative Weboberfläche verfügen, damit das Sicherheitsteam die Skripte der Benutzer überprüfen kann, die sie als öffentlich markiert haben.

Von Zeit zu Zeit fand ich immer mehr Lösungen für das gleiche Problem. - Ausführen von benutzerdefinierten Skripten in einem Browser. Alle diese Lösungen entsprachen nicht meinen Anforderungen, da ich eine Web-Erweiterung haben wollte, mit der Anzeigen auf jeder Seite entfernt werden können. transformiere die Seite und zeige mir nur ihren Inhalt ohne unnötiges Markup; Sammeln Sie Daten von jeder Seite und konvertieren Sie sie in ein Format, das für die zukünftige Verwendung geeignet ist. Daten nach einer bestimmten Zeit sammeln; usw.

Aus diesem Grund habe ich wütend „Feuer gefangen“, indem ich eine Erweiterung zum Ausführen von benutzerdefinierten Skripten für den maximalen Aufgabenbereich erstellt habe.

Auswählen eines Web-Erweiterungs-Frameworks

Da ich ursprünglich die maximale Anzahl von Webbrowsern anstrebte, benötigte ich ein Framework zum Erstellen browserübergreifender Erweiterungen. Wir können sofort feststellen, dass es einfach keinen solchen Rahmen gibt. Viele Browser unterscheiden sich grundlegend, obwohl sie auf diese Weise funktionieren und Web-Erweiterungen mit einer ähnlichen API für die Interaktion bereitstellen.

Ich war gezwungen, die ursprüngliche Version der Unterstützung für mobile Browser fast sofort aufzugeben. Da kein solcher Browser die Möglichkeit bietet, Web-Erweiterungen zu verwenden. Ich habe nur eine Erwähnung der Unterstützung für Web-Erweiterungen im Dolphin-Browser gefunden, konnte jedoch keine detaillierten Informationen auf der offiziellen Website finden. Es wurde beschlossen, diese gute Idee aufzugeben.

Beim Schreiben meiner alten Erweiterung habe ich das Kango-Framework verwendet. Im Jahr 2013 war es so bequem wie möglich. Obwohl ohne die Unterstützung von Internet Explorer.

Da meine Erweiterung als Lesezeichen fungieren konnte, habe ich diese Tatsache nicht beachtet und mich für dieses Framework entschieden, das für seine Zeit nur die perfekte Lösung für die browserübergreifende Entwicklung war.

Seitdem sind andere Projekte erschienen, die sich das Ziel gesetzt haben, Web-Erweiterungen browserübergreifend zu entwickeln. Ich habe all diese Projekte in einem frühen Entwicklungsstadium gefunden. Ihre Aufgabe wurde seitdem vereinfacht, als Mozilla Firefox begann, die WebExtensions-API zu verwenden, die es ermöglichte, Erweiterungen für Chrome einfach in Erweiterungen für Firefox umzuwandeln.

Erweiterungen für den Opera-Browser im Jahr 2013 waren mit Erweiterungen für Chrome kompatibel. Erweiterungen für Safari funktionieren jetzt nur für MacOs, da die Unterstützung für die Windows-Plattform des Safari-Browsers selbst längst eingestellt wurde.

Der Tor-Browser läuft auf der alten Mozilla Firefox-Engine und unterstützt daher xpi-Web-Erweiterungen, die die Mozilla Foundation zugunsten der Web Extension-Technologie aufgegeben hat.

Im Wesentlichen macht das Kango-Framework bis heute fast seine Arbeit, da es Web-Erweiterungen für alle Browser außer Internet Explorer generiert. Da jedoch viel Zeit vergangen ist und Firefox nun mit einem ähnlichen Mechanismus wie Chrome arbeitet, generiert kango dasselbe Paket für zwei Browser. Ich musste die Generation für Firefox ein wenig modifizieren und die Generation für Tor hinzufügen.

Da der Status des Kango-Framework-Projekts sowie die Lizenz für den Code nicht klar sind, kann ich meine Änderungen nicht öffentlich veröffentlichen. Wenn Urheberrechtsinhaber die Veröffentlichung der Version 1.9.0 mit Open Source Code zulassen, helfe ich Ihnen gerne dabei.

Alle Web-Erweiterungen haben zwei Punkte für die Arbeit mit Daten. Mit der Datei content.js können Sie das DOM bearbeiten, mit background.html können Sie mit Hintergrunddaten und Serverinteraktion arbeiten. Die Kommunikation zwischen diesen beiden Punkten erfolgt über den Nachrichtenmechanismus.

Um das DOM mit Daten von der Serverseite zu ändern, müssen wir sie aus background.html abrufen und in content.js über den Nachrichtenübermittlungsmechanismus verwenden

Ein solcher idealer Mechanismus hat in meinem Fall aus mehreren Gründen nicht funktioniert. Daher habe ich in background.js nur die Logik der Arbeit mit Popup und die Web-Erweiterungsschaltfläche im Browser belassen.
Die Logik einer Web-Erweiterung mit einem Popup-Fenster ist dieselbe. Durch Klicken auf die Schaltfläche wird nur das Popup angezeigt. Beim zweiten Klicken schließen Sie.

Das Kango-Framework bietet dem Entwickler eine einheitliche Oberfläche für die Interaktion und übersetzt dann den Code der geschriebenen Web-Erweiterung in die Web-Erweiterung für einen bestimmten Webbrowser. Dies spart viel Zeit bei der Entwicklung browserübergreifender Web-Erweiterungen.

Im nächsten Artikel werde ich über die Auswahl des "Frameworks für die Serverseite der Web-Erweiterung und der Web-Erweiterungsschnittstelle" sprechen.