Share
Récemment, j'ai eu l'occasion d'examiner le développement de Chrome Extension. Le scénario était assez simple, je devais avertir un groupe d'utilisateurs lorsqu'un membre du groupe utilisait un site Web. Une extension Chrome était un choix évident. Après un peu de documentation, je suis tombé sur Simperium, un service que je pouvais utiliser pour envoyer et recevoir des données en temps réel dans mon extension..
Dans cet article, nous verrons à quel point il est simple d'intégrer la messagerie en temps réel dans votre extension Chrome. Pour illustrer cela, notre objectif final est une extension Chrome qui enverra des mises à jour en temps réel sur les onglets ouverts vers une page de surveillance distincte..
Simperium est un service hébergé qui mettra simplement à jour les clients connectés en temps réel avec toutes les données écrites ou modifiées. Il le fait de manière efficace, en n'envoyant que les données qui ont été modifiées. Il peut gérer toutes les données JSON et fournit même une interface en ligne pour suivre ses modifications..
Tout d'abord, vous devrez créer un compte. Différents plans sont disponibles, mais vous pouvez également choisir le plan de base, qui est gratuit. Une fois que vous êtes connecté, vous vous retrouvez sur le Tableau de bord.
Pour utiliser Simperium, nous devrons créer une application, alors allez-y et appuyez sur Ajouter une application dans la barre latérale et nommez-le comme vous le souhaitez.
Sur l’écran de résumé de l’application, vous trouverez un ID APP et un Clé API par défaut.
Vous pouvez utiliser la clé API pour générer un jeton d'accès à la volée. Toutefois, pour les besoins de ce didacticiel, nous allons générer ce jeton à partir de l'interface Simperium. Cherchez le Parcourir les données onglet dans le tableau de bord et cliquez sur Générer un jeton.
Cela va générer un Jeton d'accès que nous pouvons utiliser avec le ID APP se connecter à notre application Simperium.
Si vous êtes comme moi et que vous êtes impatient de voir comment cela fonctionne, vous voudrez créer une simple page de test..
Ma page de test Simperium Ma page de test Simperium
Votre texte apparaîtra ici:
Pour que tout soit beau, nous allons également ajouter un peu de CSS, enregistrez-le sous. style.css:
/ * Réinitialiser tous les styles * / html, body, h2, h3, p, textarea, div margin: 0px; remplissage: 0px; / * End Reset * / h2 font-family: arial, sans-serif; text-align: center; rembourrage en haut: 50px; h3 font-family: arial, sans-serif; marge inférieure: 30 px; p font-family: arial, sans-serif; taille de police: 14px; couleur: # 666; textarea font-family: arial, sans-serif; taille de police: 14px; largeur: 380px; hauteur: 200px; .content width: 800px; marge: auto; marge supérieure: 50 px; .add_data float: left; largeur: 380px; marge droite: 20px; .view_data float: right; largeur: 400px;
Comme vous pouvez le constater, nous avons déjà inclus la bibliothèque Javascript de Simperium dans notre code HTML, il ne nous reste plus qu’à l’initialiser dans notre script. Nous pouvons le faire en créant un nouveau fichier dans le sous-dossier js avec le nom script.js, et coller dans le code suivant:
Accentsconagua
var simperium = new Simperium ('SIMPERIUM_APP_ID', jeton: 'SIMPERIUM_ACCESS_TOKEN'); // Nos références var bucket = simperium.bucket ('mybucket'); // Créer un nouveau bucket.start (); // Démarre notre compartiment.on ('notify', function (id, data) // Cet événement se déclenche lorsque les données du compartiment sont modifiées $ ('. Data'). Html (""+ data.text +"
");); $ (document) .ready (function () $ (" textarea "). on ('input', function () value = $ (this) .val (); bucket.update (" yourdata ", " text ": value); // Nous mettons à jour notre compartiment Simperium avec la valeur de textarea $ ('. data'). html (""+ valeur +"
"); // Notre événement de notification ne se déclenche pas localement, nous mettons donc à jour manuellement);); Vous devrez remplacer SIMPERIUM_APP_ID et SIMPERIUM_ACCESS_TOKEN avec les informations d'identification que vous avez précédemment générées pour votre application.
Pour tester cela, vous devez ouvrir au moins deux instances de notre fichier HTML de test dans le navigateur et vous devriez les voir se mettre à jour au fur et à mesure de la frappe..
La fonctionnalité est très simple, nous initialisons Simperium et créons un nouveau seau. Un seau est fondamentalement un endroit pour stocker nos objets. Une fois que notre compartiment est démarré, Simperium le synchronise, il ne reste plus qu'à utiliser l'événement notify. Si nous voulons mettre à jour le compartiment, nous utilisons la fonction de mise à jour. C'est tout!
C’est l’utilisation de base de Simperium, nous allons maintenant la combiner avec une extension Chrome pour créer quelque chose d’utile.!
Dans ce didacticiel, nous ne couvrirons pas les bases de la création d'une extension Chrome. Si vous avez besoin de rattraper votre retard, vous pouvez le faire en lisant Développement des extensions Google Chrome écrit par Krasimir Tsonev.
Nos étapes seront les suivantes:
Entrons directement en créant la structure de base de notre extension qui consiste en:
Notre fichier manifeste sera plutôt simple:
"name": "Live Report", "version": "1.0", "description": "Reporting en direct de vos onglets ouverts", "manifest_version": 2, "background": "persistante": true, "scripts ": [" simperium.js "," background.js "]," permissions ": [" webNavigation "," onglets "]
Collez ce code dans un fichier vierge et enregistrez-le sous. manifest.json.
Comme vous pouvez le constater, il suffit de charger le bibliothèque simperium et notre script de fond. Nous devons définir l'option persistante sur true afin que Chrome ne décharge pas ces fichiers pour économiser de la mémoire..
L'extension utilisera le chrome.webNavigation API donc nous devons définir la navigation Web autorisation. Nous avons aussi besoin de onglets autorisation d'avoir accès au titre des onglets.
Créer un background.js fichier et enregistrez-le à côté de manifest.json.
Ce noyau de notre extension, passons en revue étape par étape.
Tout d’abord, nous devons initialiser Simperium:
var simperium = new Simperium ('SIMPERIUM_APP_ID', jeton: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start (); N'oubliez pas de remplacer SIMPERIUM_APP_ID et SIMPERIUM_ACCESS_TOKEN avec les valeurs correctes que vous avez générées plus tôt.
Dans ce cas, nous allons créer un nouveau compartiment appelé "onglets" pour stocker nos données..
chrome.webNavigation et le chrome.tabs APICes API contiennent les événements que nous utiliserons pour les intercepter lorsqu'un onglet est ouvert, fermé ou modifié.
chrome.tabs.onUpdated.addListener (function (tabId, changeInfo, tab) );
chrome.tabs.onMise à jour se déclenche quand un onglet est mis à jour. Plus spécifiquement lorsque vous ouvrez un nouvel onglet ou modifiez son URL.
chrome.tabs.onRemoved.addListener (function (tabId, removeInfo) );
chrome.tabs.onRemoved se déclenche lorsque vous fermez un onglet.
Ces deux événements semblent couvrir ce dont nous avons besoin, mais il s'avère que chrome.tabs.onMise à jour ne se déclenche pas lorsqu'un onglet est mis à jour avec une nouvelle page qui est dans la mémoire cache du navigateur.
Pour contourner le problème, nous pouvons utiliser chrome.webNavigation.onTabRemplacé.
chrome.webNavigation.onTabReplaced.addListener (fonction (e) );
Selon la documentation: "est déclenché lorsque le contenu de l'onglet est remplacé par un autre onglet (généralement précédemment pré-rendu)".
La formulation n'est pas solide, mais l'événement fonctionne et nous aidera à les détecter lorsqu'un contenu d'onglets est remplacé par une page en cache..
Avec ces événements, en théorie, nous pourrions garder une trace de nos onglets, mais avec ces événements déclenchant plusieurs fois, cela serait une tâche fastidieuse..
Notre solution est la chrome.tabs.query méthode.
chrome.tabs.query (queryInfo, function (tab) );
Notre fonction de rappel retournera un tableau avec tous les onglets ouverts. Nous pouvons également définir le queryInfo paramètre pour affiner les résultats, mais pour les besoins de ce tutoriel, nous le laisserons vide.
Jetons un coup d'oeil à notre code final:
var simperium = new Simperium ('SIMPERIUM_APP_ID', jeton: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start (); chrome.tabs.onUpdated.addListener (fonction (tabId, changeInfo, onglet) chrome.tabs.query (, fonction (onglets) updateTitles (onglets););); chrome.tabs.onRemoved.addListener (function (tabId, removeInfo) chrome.tabs.query (, fonction (onglets) updateTitles (onglets););); chrome.webNavigation.onTabReplaced.addListener (fonction (e) chrome.tabs.query (, fonction (onglets) updateTitles (onglets););); function updateTitles (onglets) var titres = []; var longueur = tabs.length; pour (var i = 0; i < length; i++) titles[i]= tabs[i].title; data.update("Tabs", "Titles" : titles); Nous utilisons les événements mentionnés ci-dessus pour intercepter tous les événements d'onglet et interroger tous les onglets ouverts. Pour que les choses restent simples, nous avons créé le updateTitles fonction qui va parcourir notre tableau d'onglets avec une simple boucle et assigner la valeur de titre de chaque élément à un nouveau tableau.
Dans la dernière étape, nous mettons à jour notre objet Simperium avec notre tableau nouvellement créé.
Vous pouvez utiliser le Parcourir les données onglet de votre tableau de bord Simperium pour vérifier si les données sont modifiées correctement dans votre compartiment, mais nous allons également créer une page HTML très simple pour afficher nos données.
Ceci est notre HTML:
Exemple de visionneuse à onglets Onglets rapportés par Extension
Regarder du HTML non stylé n'est pas un plaisir, alors introduisez-le ici pour rendre les choses plus jolies:
/ * Réinitialiser tous les styles * / html, body, h2, h3, p, textarea, div margin: 0px; remplissage: 0px; / * End Reset * / h2 font-family: arial, sans-serif; text-align: center; rembourrage en haut: 50px; ul list-style-type: none; li -moz-border-radius: 4px; border-radius: 4px; couleur de fond: #eee; marge inférieure: 3px; famille de polices: arial, sans-serif; rembourrage: 10px; couleur: # 333; .tabs width: 800px; marge: auto; marge supérieure: 50 px;
Enfin, un peu de Javascript pour récupérer les données de Simperium:
var simperium = new Simperium ('SIMPERIUM_APP_ID', jeton: 'SIMPERIUM_ACCESS_TOKEN'); var data = simperium.bucket ('tabs'); data.start (); data.on ('notify', fonction (id, data) $ (". tabs ul"). html (""); var longueur = data.Titles.length; pour (var i = 0; i < length; i++) $( "Nous utilisons simplement l'événement notify Simperium pour mettre à jour nos données en temps réel. Nous générons le
Tester notre résultat est réellement très simple. Si vous chargez notre extension dans Chrome et ouvrez le visualiseur HTML d'onglets que nous venons de créer, tous vos onglets ouverts s'afficheront. Maintenant, si vous fermez ou ouvrez un onglet dans Chrome, notre visualiseur HTML se mettra instantanément à jour avec les nouvelles données. La navigation vers une nouvelle page dans n'importe quel onglet ouvert sera également capturée par l'extension et affichée sur notre page de visualisation. Nous avions notre extension et le fichier HTML sur le même ordinateur. Cela fonctionne évidemment avec n’importe quelle paire d’appareils, à condition qu’ils aient une connexion Internet et que l’un d’eux puisse exécuter l’extension..
Dans ce didacticiel, nous avons examiné Simperium et les événements liés aux onglets dans Chrome. Comme vous pouvez le constater, il est très facile de les utiliser ensemble. N'oubliez toutefois pas de définir l'indicateur de persistance de votre page d'arrière-plan sur true dans votre fichier manifeste..
Il y a beaucoup d'utilisations qui me viennent à l'esprit! Installez l'extension que nous avons créée à la maison et chargez le visualiseur HTML sur un serveur. Vous pouvez maintenant voir vos onglets ouverts de n'importe où. Génial!
Ces technologies rendent vraiment nos applications plus utilisables et leur intégration est en fait assez simple..
J'espère que vous avez apprécié cet article et je vous encourage à laisser un commentaire si vous êtes bloqué ou si vous avez des questions. Merci et amusez-vous!
