Accentsconagua

Hendelser og sanntidsmeldinger i Chrome-utvidelser ved hjelp av Simperium

Kode
Share

Nylig fikk jeg muligheten til å se på Chrome Extension-utviklingen. Scenariet var ganske enkelt, jeg måtte varsle en gruppe brukere når noen fra gruppen brukte et nettsted. En Chrome Extension var et åpenbart valg, og etter litt dokumentasjon kom jeg over Simperium, en tjeneste som jeg kunne bruke til å sende og motta data i sanntid i utvidelsen.

I denne artikkelen vil vi se hvor enkelt det er å integrere sanntidsmeldinger i Chrome-utvidelsen din. For å illustrere dette er vårt endelige mål en Chrome Extension som vil sende ut sanntids oppdateringer om åpne faner til en egen overvåkingsside.

Hva er Simperium

Simperium er en vertsbasert tjeneste som bare vil oppdatere de tilkoblede klientene i sanntid med data som er skrevet til den eller endret. Det gjør det på en effektiv måte, ved bare å sende ut data som er endret. Den kan håndtere alle JSON-data og gir til og med et nettgrensesnitt for å spore eventuelle endringer i det.

Starter

Først må du opprette en konto. Det finnes ulike planer til din disposisjon, men du kan også velge grunnplanen, som er ledig. Etter at du er logget inn, finner du deg selv på dashbord.


For å bruke Simperium må vi lage en app, så gå videre og klikk Legg til en app i sidebjørnet og nev det det du ønsker.


På App Oppsummering skjermen finner du en unik APP ID og a Standard API-nøkkel.


Du kan bruke API-nøkkelen til å generere et tilgangstoken på fly, men i form av denne opplæringen vil vi generere dette token fra Simperium-grensesnittet. Se etter Bla gjennom data kategorien i oversikten og klikk Generer Token.


Dette vil generere en Tilgangstoken som vi kan bruke sammen med APP ID å koble til vår Simperium app.

La oss se hvordan dette fungerer!

Hvis du er som meg, og du ikke kan vente på å se hvordan dette fungerer, vil du opprette en enkel testside.

    Min Simperium testside       
Min Simperium testside
 
 
  
 
 
Din tekst vil vises her:

For å holde det bra, vil vi også legge til litt CSS, lagre dette som style.css:

 / * Tilbakestill alle stiler * / html, kropp, h2, h3, p, textarea, div margin: 0px; padding: 0 px;  / * End Tilbakestill * / h2 font-family: arial, sans-serif; tekst-Justering: center; padding-top: 50 piksler;  h3 font-family: arial, sans-serif; margin-bottom: 30px;  p font-family: arial, sans-serif; font-size: 14 piksler; color: # 666;  textarea font-family: arial, sans-serif; font-size: 14 piksler; bredde: 380px; høyde: 200px; . innhold bredde: 800px; margin: auto; margin-top: 50 piksler;  .add_data float: left; bredde: 380px; margin-right: 20px;  .view_data float: right; bredde: 400 piksler;

Nå, som du kan se, har vi allerede inkludert Simperium Javascript-biblioteket i vår HTML, vi må bare initialisere det i vårt skript. Vi kan gjøre dette ved å opprette en ny fil i undermappen js med navnet script.js, og lim inn følgende kode:

 var simperium = nytt Simperium ('SIMPERIUM_APP_ID', token: 'SIMPERIUM_ACCESS_TOKEN'); // Vår legitimasjon var bøtte = simperium.bucket ('mybucket'); // Opprett en ny bøtte bucket.start (); // Start vår bøtte bucket.on ('notify', funksjon (id, data) // Denne hendelsen bryr seg når data i bøtte er endret $ ('.data'). Html ("
"+ Data.text +"
");); $ (dokument) .ready (funksjon () $ (" textarea "). på ('input', funksjon () value = $ (dette) .val (); bucket.update yourdata ", " text ": value); // Vi oppdaterer vår Simperium-bøtte med verdien av textarea $ ('. data'). html ("
"+ Verdi +"
"); // Vår varsling hendelse brenner ikke lokalt, slik at vi oppdaterer manuelt););

Du må bytte ut SIMPERIUM_APP_ID og SIMPERIUM_ACCESS_TOKEN med legitimasjonene du tidligere har generert for appen din.

For å teste dette må du åpne minst to forekomster av vår test HTML-fil i nettleseren, og du bør se at de oppdaterer hverandre mens du skriver.

Funksjonaliteten er veldig enkel, vi initialiserer Simperium og lager en ny bøtte. En bøtte er i utgangspunktet et sted å lagre gjenstandene våre. Når vår bøtte er startet, vil Simperium beholde den i synkronisering, vi må bare bruke meldingshendelsen. Hvis vi vil oppdatere bøtte, bruker vi oppdateringsfunksjonen. Det er det!

Dette er den grunnleggende bruken av Simperium, nå kombinerer vi dette med en Chrome Extension for å skape noe nyttig!

Vår Chrome Extension

I denne opplæringen vil vi ikke dekke grunnleggende om å opprette en Chrome Extension, hvis du trenger å hente det du kan gjøre ved å lese Utvikle Google Chrome Extensions skrevet av Krasimir Tsonev

Den grunnleggende ideen

Våre skritt vil bestå av følgende:

  • Initialiser Simperium i vår utvidelse.
  • Bruk Chrome Extension Events til å bli varslet når en fane åpnes, lukkes eller endres.
  • Oppdater vår Simperium-bøtte med en liste over de åpne fanene.
  • Opprett en egen HTML-fil for å spore åpne faner ved hjelp av Simperium-hendelser.

La oss hoppe rett inn ved å lage den grunnleggende strukturen til utvidelsen vår som består av:

  • manifest.json - Manifest fil
  • background.js - Bakgrunnsskript

Den mest åpenbare filen

Vår manifestfil vil se ganske enkelt ut:

 "navn": "Live Report", "versjon": "1.0", "beskrivelse": "Live rapportering av dine åpne faner", "manifest_version": 2, "bakgrunn": "vedvarende": sant "skript ": [" simperium.js "," background.js "]," tillatelser ": [" webnavigering "," faner "]

Lim inn denne koden i en tom fil og lagre den som manifest.json.

Som du kan se, trenger vi bare å laste inn simperium biblioteket og vår bakgrunnsskript. Vi må sette det vedvarende alternativet til sant, slik at Chrome ikke vil laste disse filene for å lagre minne.

Utvidelsen vil bruke chrome.webNavigation API, så vi må sette webNavigation tillatelse. Vi trenger også faner Tillatelse til å få tilgang til tittelen på fanene.

Bakgrunnsskriptet

Lage en background.js filen og lagre den ved siden av manifest.json.

Dette kjernen i vår utvidelse, la oss gå gjennom det trinnvis.

Første ting først, vi må initialisere Simperium:

 var simperium = nytt Simperium ('SIMPERIUM_APP_ID', token: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start ();

Ikke glem å bytte ut SIMPERIUM_APP_ID og SIMPERIUM_ACCESS_TOKEN med de riktige verdiene du genererte tidligere.

I dette tilfellet vil vi opprette en ny bøtte som heter "faner" for å lagre dataene våre.

De chrome.webNavigation og chrome.tabs API

Disse APIene inneholder hendelsene vi skal bruke for å fange dem når en fane åpnes, lukkes eller endres.

 chrome.tabs.onUpdated.addListener (funksjon (tabId, changeInfo, tabulator) );

chrome.tabs.onUpdated vil brann når en fane er oppdatert. Nærmere bestemt når du åpner en ny kategori eller endrer nettadressen.

 chrome.tabs.onRemoved.addListener (funksjon (tabId, removeInfo) );

chrome.tabs.onRemoved vil brann når du lukker en fane.

Disse to hendelsene ser ut til å dekke det vi trenger, men det viser seg det chrome.tabs.onUpdated brenner ikke når en fane er oppdatert med en ny side som er i nettleserens cache.

Som en løsning kan vi bruke chrome.webNavigation.onTabReplaced.

 chrome.webNavigation.onTabReplaced.addListener (funksjon (e) );

I følge dokumentasjonen: "Slått av når innholdet på fanen er erstattet av en annen (vanligvis tidligere forhåndsdefinert) faneblad."

Ordlyden er ikke solid, men hendelsen virker og hjelper oss med å fange dem når et innholds fan er erstattet med en bufret side.

Med disse hendelsene, i teorien, kunne vi holde styr på våre faner, men med disse hendelsene skyte flere ganger, ville dette være en kjedelig oppgave.

Vår løsning er chrome.tabs.query metode.

 chrome.tabs.query (queryInfo, funksjon (tab) );

Vår tilbakeringingsfunksjon returnerer en matrise med alle åpne faner. Vi kan også sette queryInfo parameter for å begrense resultatene, men i forbindelse med denne opplæringen vil vi la den stå tom.

Sette alt sammen

La oss ta en titt på vår endelige kode:

 var simperium = nytt Simperium ('SIMPERIUM_APP_ID', token: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start (); chrome.tabs.onUpdated.addListener (funksjon (tabId, changeInfo, tabulator) chrome.tabs.query (, funksjon (faner) updateTitles (tabs););); chrome.tabs.onRemoved.addListener (funksjon (tabId, removeInfo) chrome.tabs.query (, funksjon (faner) updateTitles (tabs););); chrome.webNavigation.onTabReplaced.addListener (funksjon (e) chrome.tabs.query (, funksjon (faner) updateTitles (tabs););); funksjon updateTitles (tabs) var titles = []; var lengde = tabs.length; for (var i = 0; i < length; i++)  titles[i]= tabs[i].title;  data.update("Tabs", "Titles" : titles);

Vi bruker hendelsene nevnt ovenfor for å fange alle fanebegivenheter og spørre alle åpne faner. For å holde ting enkelt, opprettet vi updateTitles funksjon som vil gå gjennom vår tabs array med en enkel sløyfe og tilordne tittelverdien til hvert element til et nytt array.

I det siste trinnet oppdaterer vi vårt Simperium-objekt med vår nyopprettede serie.

Du kan bruke Bla gjennom data fanen i Simperium Dashboard for å kontrollere om dataene blir endret riktig i bøtte, men vi vil også lage en veldig enkel HTML-side for å se våre data.

Dette er vår HTML:

    Tab-visningsprogrammet       
Faner rapportert av Extension

Å se på ustylt HTML er ingen glede, så bare kaste dette inn der for å gjøre ting vakrere:

 / * Tilbakestill alle stiler * / html, kropp, h2, h3, p, textarea, div margin: 0px; padding: 0 px;  / * End Tilbakestill * / h2 font-family: arial, sans-serif; tekst-Justering: center; padding-top: 50 piksler;  ul liste-stil-type: none;  li -moz-border-radius: 4px; grense-radius: 4px; background-color: #eee; margin-bottom: 3px; font-familie: arial, sans-serif; polstring: 10px; farge: # 333;  .tabs width: 800px; margin: auto; margin-top: 50 piksler;

Til slutt, noen JavaScript for å hente dataene fra Simperium:

 var simperium = nytt Simperium ('SIMPERIUM_APP_ID', token: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start (); data.on ("notify", funksjon (id, data) $ ("tabs ul"). html (""); var lengde = data.Titles.length; for (var i = 0; i < length; i++)  $( "
  • "+ Data.Titles [i] +"
    • ") .appendTo (". tabs ul "););

    Vi bruker bare meldingen Simperium-arrangementet for å oppdatere våre data i sanntid. Vi genererer

  • merker med titlene inni en
      og det er det!

      Å teste vårt resultat er faktisk veldig enkelt. Hvis du laster inn utvidelsen vår i Chrome og åpner HTML-tittel-HTML-en som vi nettopp har opprettet, vil den vise alle dine åpne faner. Nå, hvis du lukker eller åpner en fane i Chrome, oppdaterer våre seer HTML øyeblikkelig med de nye dataene. Hvis du navigerer til en ny side i en hvilken som helst åpnet fane, vil den bli fanget av utvidelsen og vist på vår side. Vi hadde vår utvidelse og HTML-filen på samme maskin, selvfølgelig fungerer dette med noen par enheter så lenge de har en Internett-tilkobling, og en av dem kan kjøre utvidelsen.

      Konklusjon

      I denne opplæringen så vi på Simperium og fanearrangementer i Chrome. Som du kan se, er det ganske enkelt å bruke dem sammen, bare ikke glem å sette det vedvarende flagget for bakgrunnssiden din til sann i manifestfilen din.

      Det er mange bruksområder som kommer til tankene! Installer utvidelsen vi opprettet hjemme og last opp seer HTML på en server. Du kan nå vise dine åpne faner fra hvor som helst. Temmelig stilig!

      Disse teknologiene gjør virkelig våre applikasjoner mer brukbare, og integrering av dem er faktisk ganske grei.

      Jeg håper du likte denne artikkelen, og jeg oppfordrer deg til å legge igjen en kommentar hvis du sitter fast eller har spørsmål. Takk og ha det gøy!

      Kode
    • ×