In diesem Artikel setze ich die Reihe von Veröffentlichungen fort, in denen ich über meine Erfahrungen beim Schreiben einer Web-Erweiterung für Browser sprechen möchte. 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 1 , Teil 3 , Teil 4

Auswahl eines Frameworks für die Serverseite

Ganz am Anfang meiner Idee habe ich darüber nachgedacht, wie ich Daten speichern kann, die als Ergebnis des Skripts erhalten wurden. Die Möglichkeit, locaStorage oder ähnliche Lösungen für eine clientseitige Datenbank zu verwenden, kam in den Sinn. Als die Codeplanung auf diesem Weg fortschritt, stellte sich heraus, dass das Herunterladen von Dateien und das Speichern auf dem Computer des Benutzers keine gute Idee ist, da der Benutzer an einen Computer gebunden ist.

Daher müssen Benutzerskripte gespeichert werden, Daten, die durch Ausführen von Skripten auf der Serverseite erhalten wurden. Benutzerdateien sollten auch über die Serverseite geladen werden. Der Benutzer muss sich direkt über die Web-Erweiterungsoberfläche registrieren, das Kennwort zurücksetzen usw., da die Registrierung über eine separate Seite keine komfortable Interaktion mit der Web-Erweiterung ermöglichen würde.

Daher wurde die Verwendung von XHR in Verbindung mit der RESTful-API ausgewählt. Diese Option ermöglicht auch die zukünftige Verwendung desselben Codes zum Erstellen eines Pipeline-Datenlieferungssystems. Beispielsweise kann das Abrufen von Webressourcenpositionen in Suchmaschinenergebnissen in einem täglichen Zyklus geplant werden. Danach fordert eine Drittanbieteranwendung Daten an, die als Ergebnis des Skripts mithilfe der API erhalten wurden, und erstellt ein Diagramm, das die Tendenz der Position zeigt, sich in den Suchergebnissen zu ändern.

Viele Frameworks in verschiedenen Programmiersprachen verfügen über Bibliotheken, Module und Pakete für die schnelle Entwicklung von RESTful-Serveranwendungen. Seit ungefähr 12 Jahren arbeite ich mit verschiedenen PHP-basierten Frameworks und seit 3 ​​Jahren arbeite ich auch mit Meteor.js. Dieses Framework läuft auf node.js, daher habe ich es wegen seiner hohen Leistung (durchschnittlich 112 Millisekunden pro Datensatz einer vom Skript empfangenen Datenzeile) und einer Vielzahl vorgefertigter Pakete zum Erstellen der Anwendung für den Serverteil ausgewählt.

Als RESTful-Bibliothek habe ich das Paket github.com/kahmali/meteor-restivus ausgewählt , das unter anderem gepatcht werden musste, da es mit der Hook-Autorisierung und dem Schutz vor der Technik des unendlichen Erraten von Passwörtern nicht richtig funktionierte.

Restivus verfügt über gute Funktionen zur Beschreibung der RESTful-API und unterstützt das autorisierte oder anonyme Arbeiten. Token und Benutzer-ID werden als Bestätigung der Berechtigung zum Ausführen einer benutzerdefinierten Methode an einer RESTful-Adresse verwendet. Diese Parameter können in localStorage-Webberechtigungen gespeichert und beim Aufrufen von XHR verwendet werden.

Für die Verwaltungszone habe ich das erweiterbare und hoch konfigurierbare Paket github.com/yogiben/meteor-admin ausgewählt , mit dem ich die Zeit für die Erstellung vieler Seiten desselben Typs für die Anforderungen des Sicherheitsteams verkürzen konnte.

Entwerfen einer Schnittstelle für Web-Erweiterungen

Die Schnittstelle spielt eine entscheidende Rolle bei der Auswahl eines Produkts durch den Benutzer. Komfort und Minimalismus wurden als Hauptkriterien für die Web-Erweiterungsschnittstelle ausgewählt. Anschließend wurde eine ästhetische Seite hinzugefügt, um die gesamte Anwendung zu vervollständigen.

Semantic-ui wurde als CSS / HTML-Framework ausgewählt. Gleichzeitig lehnte ich zusätzliche npm-Pakete und Assembly-Mechanismen wie Webpack ab, um Abhängigkeiten und die Größe der Web-Erweiterung zu minimieren. Der Code wird so transparent wie möglich geschrieben, wobei nur drei js-Bibliotheken und Dateien von Drittanbietern verwendet werden.

Um den Prozess zu starten, wurde eine Liste der erforderlichen Seiten erstellt. Die Seiten für die Arbeit mit einem Benutzerkonto wurden in dieser Liste gruppiert.

1. Anmeldeseite
2. Registrierungsseite
3. Seite zum Zurücksetzen des Passworts

Zu diesem Zeitpunkt gab es ein Problem mit dem einmaligen Zurücksetzen des Verbindungskennworts. In einer normalen Anwendung kann der Benutzer dem Link folgen, das Kennwort zurücksetzen und dann die Anwendung eingeben. Eine Web-Erweiterung kann mithilfe von navigator.registerProtocolHandler Links abfangen und einen Benutzer in einer Web-Erweiterung autorisieren. Dies wird jedoch nicht von allen Browsern unterstützt. Daher wurde beschlossen, das Passwort über den Link zurückzusetzen, und dann kann der Benutzer die Web-Erweiterung mit dem neuen Passwort eingeben.

Unten finden Sie ein Formular zum Registrieren eines neuen Benutzers in der Web-Erweiterung.


Hier sehen Sie Elemente für das soziale Marketing, wie den Einladungscode und Links zur Verteilung in sozialen Netzwerken, neben dem Element zum Senden einer Frage an den Support-Service.

Nach der Registrierung oder nach der Autorisierung kann der Benutzer sein Profil direkt in der Web-Erweiterung bearbeiten. Dies verbessert die aktuelle Lösung qualitativ, da nicht mehr mit einer separaten Website gearbeitet werden muss. Der Benutzer kann alle Aktionen an einem Ort ausführen.


Alle Bildschirme sind in Registerkarten unterteilt, sodass Sie schnell zwischen den Bildschirmen wechseln können und die Rolle einer Art Menü spielen. In einigen Fällen werden für eine visuellere Darstellung Elemente für die aktuelle Iteration minimiert. Beispielsweise werden Schaltflächensignaturen auf den Schaltflächen selbst platziert, obwohl in Zukunft geplant ist, die vertikale Liste der Schaltflächen durch eine horizontale zu ersetzen und die Signaturen in QuickInfos zu entfernen. Dies geschieht, um die Darstellung von Web-Erweiterungen für neue Benutzer zu maximieren. Auf diese Weise wird der Hauptbildschirm mit einer Liste von Skripten für die aktuelle Iteration erstellt.


Jedes Benutzerskript muss von jemandem erstellt werden. Wie bereits in der Web-Erweiterung erwähnt, kann es sowohl öffentliche als auch private Skripte geben. Verwenden Sie zum Hinzufügen von Skripten das folgende einfache Formular.


Darüber hinaus kann der Benutzer ein Zeichen für die Veröffentlichung von Skripten setzen, damit andere Benutzer die Erfahrung der Web-Erweiterungs-Community nutzen können.

Öffentliche Skripte haben mehrere Einschränkungen. Sie können beispielsweise nicht zum Starten auf einer Seite im Taskplaner verwendet werden und verfügen über Hotkeys. Darüber hinaus kann jedes öffentliche Skript „bearbeitet“ werden, wobei der Benutzer das Zeichen der Werbung entfernen und es in einem privaten Zustand als sein eigenes Skript speichern kann. Diese zusätzlichen Schritte sind erforderlich, um sich vor skrupellosen Entwicklern zu schützen. Beim „Bearbeiten“ eines öffentlichen Skripts muss der Benutzer den Code überprüfen und über seine Verwendung für seine Anforderungen entscheiden.

Das Herunterladen von Dateien in der Web-Erweiterung wird implementiert, indem der Inhalt der Datei in den Puffer eingelesen, codiert und über den XHR-Kanal weiter an den Server gesendet wird. Auf dem POST-Server wird die Anforderung verarbeitet und die Datei an den Cloud-Speicher gesendet. In Skripten können Benutzer heruntergeladene Dateien über GC.loadFile ('filename.ext') lesen . , eine Funktion aus der internen Bibliothek, über die ein separater Artikel geschrieben wird.


Jedes Skript kann Daten aus Berechnungen schreiben, indem es die Funktion der internen Bibliothek aufruft. Bei jedem Aufruf wird eine Zeile in einer Zelle mit demselben Namen für alle Zeilen aufgezeichnet. Auf diese Weise können Sie CSV-Dateien schreiben. Der folgende Bildschirm zeigt die Schnittstelle zum Arbeiten mit Ausgabedaten. Der Benutzer kann die Daten direkt von der Web-Erweiterung herunterladen, die generierte Datei an seine E-Mail senden, einen Link zur API zur Verwendung in einer Drittanbieteranwendung erhalten oder die Daten löschen.


Alle Aktionen, die den Status des Skripts ändern, z. B. die Löschaktion, müssen bestätigt werden. Die Web-Erweiterung hat eine Einschränkung für die Verwendung von Popup- oder Bestätigungsfenstern, da selbst eine Schnittstelle im Popup ausgeführt wird. Daher wird der Eingabemechanismus des Bestätigungsworts verwendet.


Im nächsten Artikel werde ich über die "Fallstricke bei der Implementierung der Interaktion von Web-Erweiterungen und der Serverseite" sprechen.