Share
Vor kurzem hatte ich die Gelegenheit, die Entwicklung von Chrome-Erweiterungen zu untersuchen. Das Szenario war ziemlich einfach. Ich musste eine Gruppe von Benutzern benachrichtigen, wenn jemand aus der Gruppe eine Website verwendete. Eine Chrome-Erweiterung war eine naheliegende Wahl, und nach einiger Dokumentation stieß ich auf Simperium, einen Dienst, mit dem ich in meiner Erweiterung Daten in Echtzeit senden und empfangen konnte.
In diesem Artikel erfahren Sie, wie einfach es ist, Echtzeit-Messaging in Ihre Chrome-Erweiterung zu integrieren. Um dies zu veranschaulichen, ist unser Endziel eine Chrome-Erweiterung, die Echtzeit-Updates zu geöffneten Registerkarten an eine separate Überwachungsseite sendet.
Simperium ist ein gehosteter Dienst, der einfach die verbundenen Clients in Echtzeit mit allen Daten aktualisiert, die in ihn geschrieben oder geändert wurden. Dies geschieht auf effiziente Weise, indem nur geänderte Daten gesendet werden. Es kann mit allen JSON-Daten umgehen und bietet sogar eine Online-Schnittstelle, um Änderungen daran zu verfolgen.
Zunächst müssen Sie ein Konto erstellen. Ihnen stehen verschiedene Pläne zur Verfügung, Sie können jedoch auch den Basisplan wählen, der kostenlos ist. Nachdem Sie eingeloggt sind, werden Sie sich im Instrumententafel.
Um Simperium verwenden zu können, müssen Sie eine App erstellen. Fahren Sie fort und klicken Sie auf App hinzufügen in der Seitenleiste und benennen Sie es, wie Sie möchten.
Auf dem Bildschirm App-Zusammenfassung finden Sie eine eindeutige APP-ID und ein Standard-API-Schlüssel.
Sie können den API-Schlüssel verwenden, um im Handumdrehen ein Zugriffstoken zu generieren. In diesem Lernprogramm generieren wir dieses Token jedoch über die Simperium-Schnittstelle. Suche nach Daten durchsuchen Registerkarte im Dashboard und klicken Sie auf Token generieren.
Dies erzeugt eine Zugangstoken dass wir zusammen mit der verwenden können APP-ID um sich mit unserer Simperium App zu verbinden.
Wenn Sie wie ich sind und nicht abwarten können, wie dies funktioniert, möchten Sie eine einfache Testseite erstellen.
Meine Simperium-Testseite Meine Simperium-Testseite
Ihr Text erscheint hier:
Damit die Dinge gut aussehen, fügen wir auch ein wenig CSS hinzu, speichern Sie dies unter style.css:
/ * Alle Stile zurücksetzen * / html, body, h2, h3, p, Textbereich, div margin: 0px; Polsterung: 0px; / * End Reset * / h2 font-family: arial, serifenlos; Text ausrichten: Mitte; Polsterauflage: 50px; h3 font-family: arial, serifenlos; Rand unten: 30px; p font-family: arial, serifenlos; Schriftgröße: 14px; Farbe: # 666; textarea font-family: arial, serifenlos; Schriftgröße: 14px; Breite: 380px; Höhe: 200px; .content width: 800px; Marge: auto; Rand oben: 50px; .add_data float: left; Breite: 380px; Rand rechts: 20px; .view_data float: right; Breite: 400px;
Wie Sie sehen, haben wir die Simperium-Javascript-Bibliothek bereits in unseren HTML-Code aufgenommen, wir müssen sie nur in unserem Skript initialisieren. Wir können dies tun, indem Sie im js-Unterordner eine neue Datei mit dem Namen erstellen script.js, und Einfügen im folgenden Code:
Accentsconagua
var simperium = neues Simperium ('SIMPERIUM_APP_ID', Token: 'SIMPERIUM_ACCESS_TOKEN'); // Unsere Zugangsdaten var bucket = simperium.bucket ('mybucket'); // Neuen Bucket erstellen bucket.start (); // Starten Sie unser Bucket bucket.on ('Benachrichtigen', Funktion (ID, Daten) // Dieses Ereignis wird ausgelöst, wenn Daten im Bucket $ ('. Data') geändert werden.) Html (""+ data.text +"
");); $ (document) .ready (function () $ (" textarea "). on ('input', function () value = $ (this) .val (); bucket.update (" yourdata ", " text ": value); // Wir aktualisieren unseren Simperium-Bucket mit dem Wert des Textbereichs $ ('. data'). html (""+ wert +"
"); // Unser Benachrichtigungsereignis wird nicht lokal ausgelöst, daher werden wir manuell aktualisiert.);); Sie müssen ersetzen SIMPERIUM_APP_ID und SIMPERIUM_ACCESS_TOKEN mit den Anmeldeinformationen, die Sie zuvor für Ihre App erstellt haben.
Um dies zu testen, müssen Sie mindestens zwei Instanzen unserer Test-HTML-Datei im Browser öffnen. Sie sollten sich beide während der Eingabe gegenseitig aktualisieren.
Die Funktionalität ist sehr einfach, wir initialisieren Simperium und erstellen ein neues Eimer. Ein Eimer ist im Grunde ein Ort zum Aufbewahren unserer Objekte. Sobald unser Bucket gestartet ist, wird es von Simperium synchron gehalten. Wir müssen nur das Benachrichtigungsereignis verwenden. Wenn wir den Bucket aktualisieren möchten, verwenden wir die Update-Funktion. Das ist es!
Dies ist die grundlegende Verwendung von Simperium. Jetzt werden wir dies mit einer Chrome-Erweiterung kombinieren, um etwas Nützliches zu schaffen!
In diesem Tutorial werden die Grundlagen der Erstellung einer Chrome-Erweiterung nicht behandelt. Wenn Sie dies nachholen möchten, lesen Sie den Abschnitt Entwickeln der Google Chrome-Erweiterungen von Krasimir Tsonev
Unsere Schritte bestehen aus den folgenden:
Lassen Sie uns gleich einsteigen, indem wir die Grundstruktur unserer Erweiterung erstellen, die aus folgenden Elementen besteht:
Unsere Manifestdatei wird ziemlich einfach aussehen:
"name": "Live Report", "version": "1.0", "description": "Live-Reporting Ihrer geöffneten Registerkarten", "manifest_version": 2, "background": "persistent": true, "Skripts ": [" simperium.js "," background.js "]," permissions ": [" webNavigation "," tabs "]
Fügen Sie diesen Code in eine leere Datei ein und speichern Sie ihn als manifest.json.
Wie Sie sehen können, müssen wir nur das laden Simperium Bibliothek und unser Hintergrundskript. Wir müssen die permanente Option auf true setzen, damit Chrome diese Dateien nicht entladen kann, um Speicherplatz zu sparen.
Die Erweiterung verwendet die chrome.webNavigation API also müssen wir das einstellen webNavigation Genehmigung. Wir brauchen auch die Registerkarten Erlaubnis, auf den Titel der Registerkarten zugreifen zu können.
Ein ... kreieren Hintergrund.js Datei und speichern Sie es neben manifest.json.
Dies ist der Kern unserer Erweiterung. Lassen Sie uns das Schritt für Schritt durchgehen.
Zuerst müssen wir Simperium initialisieren:
var simperium = neues Simperium ('SIMPERIUM_APP_ID', Token: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start (); Vergiss nicht zu ersetzen SIMPERIUM_APP_ID und SIMPERIUM_ACCESS_TOKEN mit den korrekten Werten, die Sie zuvor generiert haben.
In diesem Fall erstellen wir einen neuen Bereich mit dem Namen "Tabs", um unsere Daten zu speichern.
chrome.webNavigation und das Chromtabellen APIDiese APIs enthalten die Ereignisse, die wir verwenden, um sie abzufangen, wenn eine Registerkarte geöffnet, geschlossen oder geändert wird.
chrome.tabs.onUpdated.addListener (function (tabId, changeInfo, tab) );
chrome.tabs.onUpdated wird ausgelöst, wenn eine Registerkarte aktualisiert wird. Genauer gesagt, wenn Sie eine neue Registerkarte öffnen oder deren URL ändern.
chrome.tabs.onRemoved.addListener (function (tabId, removeInfo) );
chrome.tabs.onRemoved wird ausgelöst, wenn Sie einen Tab schließen.
Diese beiden Ereignisse scheinen das abzudecken, was wir brauchen, was sich jedoch herausstellt chrome.tabs.onUpdated wird nicht ausgelöst, wenn eine Registerkarte mit einer neuen Seite aktualisiert wird, die sich im Browser-Cache befindet.
Als Problemumgehung können wir verwenden chrome.webNavigation.onTabReplaced.
chrome.webNavigation.onTabReplaced.addListener (Funktion (e) );
Laut Dokumentation: "Wird ausgelöst, wenn der Inhalt der Registerkarte durch eine andere (normalerweise zuvor gerenderte) Registerkarte ersetzt wird."
Die Formulierung ist nicht absolut solide, aber das Ereignis funktioniert gut und hilft uns, sie zu finden, wenn ein Tab-Inhalt durch eine zwischengespeicherte Seite ersetzt wird.
Mit diesen Ereignissen könnten wir theoretisch unsere Registerkarten nachverfolgen. Wenn diese Ereignisse jedoch mehrmals ausgelöst werden, wäre dies eine langwierige Aufgabe.
Unsere Lösung ist das chrome.tabs.query Methode.
chrome.tabs.query (queryInfo, function (tab) );
Unsere Callback-Funktion gibt ein Array mit allen geöffneten Registerkarten zurück. Wir können auch die einstellen queryInfo Parameter, um die Ergebnisse einzugrenzen, aber für die Zwecke dieses Tutorials lassen wir es leer.
Werfen wir einen Blick auf unseren endgültigen Code:
var simperium = neues Simperium ('SIMPERIUM_APP_ID', Token: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start (); chrome.tabs.onUpdated.addListener (function (tabId, changeInfo, tab) chrome.tabs.query (, function (tabs) updateTitles (tabs););); chrome.tabs.onRemoved.addListener (function (tabId, removeInfo) chrome.tabs.query (, function (tabs) updateTitles (tabs););); chrome.webNavigation.onTabReplaced.addListener (function (e) chrome.tabs.query (, function (tabs) updateTitles (tabs););); Funktion updateTitles (Tabs) var title = []; var length = tabs.length; für (var i = 0; i < length; i++) titles[i]= tabs[i].title; data.update("Tabs", "Titles" : titles); Wir verwenden die oben genannten Ereignisse, um alle Registerereignisse abzufangen und alle geöffneten Registerkarten abzufragen. Um es einfach zu halten, haben wir die erstellt updateTitles Eine Funktion, die unser Tabs-Array mit einer einfachen Schleife durchläuft und den Titelwert jedes Elements einem neuen Array zuweist.
Im letzten Schritt aktualisieren wir unser Simperium-Objekt mit unserem neu erstellten Array.
Du kannst den ... benutzen Daten durchsuchen Klicken Sie in Ihrem Simperium Dashboard auf die Registerkarte, um zu überprüfen, ob Daten in Ihrem Bucket richtig geändert werden. Wir erstellen jedoch auch eine wirklich einfache HTML-Seite, um unsere Daten anzuzeigen.
Das ist unser HTML:
Tab-Viewer-Beispiel Von der Erweiterung gemeldete Registerkarten
Ungestylte HTML zu betrachten, ist kein Vergnügen, also schmeißen Sie es einfach hier, um die Dinge schöner zu gestalten:
/ * Alle Stile zurücksetzen * / html, body, h2, h3, p, Textbereich, div margin: 0px; Polsterung: 0px; / * End Reset * / h2 font-family: arial, serifenlos; Text ausrichten: Mitte; Polsterauflage: 50px; ul list-style-type: none; li -moz-border-radius: 4px; Grenzradius: 4px; Hintergrundfarbe: #eee; Rand unten: 3px; Schriftfamilie: arial, serifenlos; Polsterung: 10px; Farbe: # 333; .tabs width: 800px; Marge: auto; Rand oben: 50px;
Zum Schluss noch etwas Javascript, um die Daten von Simperium abzurufen:
var simperium = neues Simperium ('SIMPERIUM_APP_ID', Token: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start (); data.on ('Benachrichtigen', Funktion (id, data) $ (". tabs ul"). html (""); var length = data.Titles.length; for (var i = 0; i < length; i++) $( "Wir verwenden das Benachrichtigungs-Simperium-Ereignis einfach, um unsere Daten in Echtzeit zu aktualisieren. Wir erzeugen das
Unser Ergebnis zu testen ist eigentlich ganz einfach. Wenn Sie unsere Erweiterung in Chrome laden und den soeben erstellten HTML-Tabulator öffnen, werden alle Ihre geöffneten Registerkarten angezeigt. Wenn Sie jetzt in Chrome einen Tab schließen oder öffnen, wird der Viewer-HTML-Code sofort mit den neuen Daten aktualisiert. Das Navigieren zu einer neuen Seite in einer geöffneten Registerkarte wird auch von der Erweiterung erfasst und auf unserer Viewer-Seite angezeigt. Wir hatten unsere Erweiterung und die HTML-Datei auf demselben Rechner, offensichtlich funktioniert dies mit jedem Paar von Geräten, sofern sie über eine Internetverbindung verfügen und eines von ihnen die Erweiterung ausführen kann.
In diesem Lernprogramm haben wir uns mit Simperium und den Registerkarten in Chrome beschäftigt. Wie Sie sehen, ist es sehr einfach, sie zusammen zu verwenden. Vergessen Sie nicht, das permanente Flag für Ihre Hintergrundseite in Ihrer Manifestdatei auf true zu setzen.
Es gibt viele Anwendungen, die mir in den Sinn kommen! Installieren Sie die von uns erstellte Erweiterung und laden Sie den Viewer-HTML-Code auf einen Server hoch. Sie können jetzt Ihre geöffneten Registerkarten von überall anzeigen. Ziemlich ordentlich!
Diese Technologien machen unsere Anwendungen wirklich benutzerfreundlicher, und ihre Integration ist in der Tat ziemlich unkompliziert.
Ich hoffe, Ihnen hat dieser Artikel gefallen und ich ermutige Sie, einen Kommentar zu hinterlassen, wenn Sie stecken bleiben oder Fragen haben. Danke und viel Spaß!
