Dans cet article, je continue la série de publications dans lesquelles je veux parler de mon expérience d'écriture d'une extension web pour les navigateurs. J'avais déjà de l'expérience dans la création d'une extension Web, qui a été installée par environ 100000 utilisateurs de Chrome, qui fonctionnait de manière autonome, mais dans cette série d'articles, j'ai décidé de me plonger dans le processus de développement de l'extension Web en l'intégrant étroitement avec le côté serveur.



Partie 1 , partie 3 , partie 4

Choisir un framework côté serveur

Au tout début de mon idée, je réfléchissais à la façon de sauvegarder les données obtenues grâce au script. La possibilité d'utiliser locaStorage ou des solutions similaires pour une base de données côté client est venue à l'esprit. Au fur et à mesure que la planification du code progressait sur ce chemin, il s'est avéré que le téléchargement de fichiers et le stockage sur l'ordinateur de l'utilisateur n'étaient pas une bonne idée, car l'utilisateur serait lié à un ordinateur.

Par conséquent, il est nécessaire de sauvegarder les scripts utilisateur, les données obtenues suite à l'exécution de scripts côté serveur. Les fichiers utilisateur doivent également être chargés via le serveur. L'utilisateur doit s'inscrire, réinitialiser le mot de passe, etc. directement via l'interface de l'extension Web, car l'enregistrement via une page distincte ne permettrait pas une interaction confortable avec l'extension Web.

Ainsi, la façon d'utiliser XHR en conjonction avec l'API RESTful a été choisie. Cette option permet également l'utilisation future du même code pour créer un système de transmission de données en pipeline. Par exemple, l'obtention de positions de ressources Web dans les résultats des moteurs de recherche peut être planifiée dans un cycle quotidien. Après cela, une application tierce demande des données obtenues à la suite du script à l'aide de l'API et construit un graphique montrant la tendance de la position à changer dans les résultats de la recherche.

De nombreux frameworks dans différents langages de programmation ont des bibliothèques, des modules et des packages pour le développement rapide d'applications serveur RESTful. Depuis environ 12 ans, je travaille avec différents frameworks basés sur PHP, et depuis 3 ans, je travaille également avec Meteor.js. Ce cadre fonctionne au-dessus de node.js, donc je l'ai choisi pour la partie serveur en raison de ses hautes performances (en moyenne 112 millisecondes pour écrire une ligne de données reçues du script) et d'un ensemble riche de packages prêts à l'emploi pour la construction de l'application.

En tant que bibliothèque RESTful, j'ai choisi le package github.com/kahmali/meteor-restivus , qui, entre autres, devait être corrigé, car il ne fonctionnait pas correctement avec l'autorisation de crochet et la protection contre la technique de sélection de mot de passe infinie.

Restivus possède de bonnes fonctionnalités pour décrire l'API RESTful et prend en charge le travail de manière autorisée ou anonyme. Token et userId sont utilisés comme confirmation d'autorité pour exécuter une méthode définie par l'utilisateur à une adresse RESTful. Ces paramètres peuvent être stockés dans les autorisations Web localStorage et utilisés lors de l'appel de XHR.

Pour la zone administrative, j'ai choisi le package extensible et hautement configurable github.com/yogiben/meteor-admin , ce qui m'a permis de réduire le temps de création de nombreuses pages du même type pour les besoins de l'équipe de sécurité.

Conception d'une interface pour les extensions Web

L'interface joue un rôle déterminant dans la sélection d'un produit par l'utilisateur. La commodité et le minimalisme ont été choisis comme principaux critères pour l'interface d'extension Web. Par la suite, un côté esthétique a été ajouté pour compléter l'ensemble de la demande.

Semantic-ui a été choisi comme framework css / html. Dans le même temps, j'ai refusé des packages npm supplémentaires et des mécanismes d'assemblage comme webpack pour minimiser les dépendances et la taille de l'extension web. Le code est écrit de la manière la plus transparente possible, en utilisant seulement trois bibliothèques js et des fichiers tiers.

Pour démarrer le processus, une liste des pages nécessaires a été compilée. Les pages pour travailler avec un compte utilisateur ont été regroupées dans cette liste.

1. Page de connexion
2. Page d'inscription
3. Page de réinitialisation du mot de passe

À ce stade, il y a eu un problème de mot de passe de réinitialisation de lien unique. Dans une application normale, l'utilisateur peut suivre le lien, réinitialiser le mot de passe, puis entrer dans l'application. Une extension Web peut «intercepter» des liens à l'aide de navigator.registerProtocolHandler et autoriser un utilisateur dans une extension Web, mais tous les navigateurs ne le prennent pas en charge. Par conséquent, il a été décidé de réinitialiser le mot de passe par le lien, puis l'utilisateur peut entrer l'extension Web en utilisant le nouveau mot de passe.

Vous trouverez ci-dessous un formulaire pour enregistrer un nouvel utilisateur dans l'extension Web.


Ici, vous pouvez voir des éléments pour le marketing social, tels que le code d'invitation et des liens pour la distribution sur les réseaux sociaux à côté de l'élément pour envoyer une question au service d'assistance.

Après inscription, ou après autorisation, l'utilisateur peut modifier son profil directement dans l'extension web. Cela améliore qualitativement la solution actuelle, car elle élimine la nécessité de travailler avec un site Web distinct. L'utilisateur peut effectuer toutes les actions en un seul endroit.


Tous les écrans sont divisés en onglets, ce qui vous permet de passer rapidement d'un écran à l'autre et joue le rôle d'une sorte de menu. Dans certains cas, pour une représentation plus visuelle, les éléments sont minimisés pour l'itération en cours. Par exemple, les signatures des boutons sont placées sur les boutons eux-mêmes, bien qu'à l'avenir il soit prévu de remplacer la liste verticale des boutons par une horizontale et de supprimer les signatures dans les info-bulles. Ceci est fait pour maximiser la présentation des extensions web pour les nouveaux utilisateurs. C'est ainsi que l'écran principal avec une liste de scripts pour l'itération en cours est créé.


Chaque script utilisateur doit être créé par quelqu'un. Comme mentionné précédemment dans l'extension Web, il peut y avoir à la fois des scripts publics et des scripts privés. Pour ajouter des scripts, utilisez le formulaire simple suivant.


En outre, l'utilisateur peut définir un signe de publicité de script, ce qui permettra aux autres utilisateurs d'utiliser l'expérience de la communauté des extensions Web.

Les scripts publics ont plusieurs limitations. Par exemple, ils ne peuvent pas être utilisés pour le démarrage sur une page, dans le planificateur de tâches et disposent de touches de raccourci. De plus, chaque script public a la possibilité de «modifier», pendant lequel l'utilisateur peut supprimer le signe de la publicité et l'enregistrer dans un état privé en tant que son propre script. Ces étapes supplémentaires sont nécessaires pour se protéger contre les développeurs peu scrupuleux. Lors de la «modification» d'un script public, l'utilisateur devra revoir le code et décider de son utilisation en fonction de ses besoins.

Le téléchargement de fichiers dans l'extension Web est mis en œuvre en lisant le contenu du fichier dans le tampon, en l'encodant et en l'envoyant via le canal XHR au serveur. Sur le serveur POST, la demande est traitée et le fichier est envoyé au stockage cloud. Dans les scripts, les utilisateurs peuvent lire les fichiers téléchargés via GC.loadFile ('filename.ext'); , une fonction de la bibliothèque interne sur laquelle un article séparé sera écrit.


Chaque script peut écrire des données à partir de calculs en appelant la fonction de la bibliothèque interne. Chaque appel enregistrera une ligne dans une cellule avec le même nom pour toutes les lignes. De cette façon, vous pouvez écrire des fichiers csv. L'écran ci-dessous montre l'interface pour travailler avec les données de sortie. L'utilisateur peut télécharger les données directement à partir de l'extension Web, envoyer le fichier généré à son e-mail, obtenir un lien vers l'API pour une utilisation dans une application tierce ou supprimer les données.


Toutes les actions qui modifient l'état du script, telles que l'action de suppression, nécessitent une confirmation. L'extension Web a une restriction sur l'utilisation des fenêtres pop-up ou de confirmation, car elle-même a une interface fonctionnant en pop-up. Par conséquent, le mécanisme d'entrée du mot de confirmation est utilisé.


Dans le prochain article, je parlerai des «pièges dans la mise en œuvre de l'interaction des extensions Web et du côté serveur» .