Dans cette série d'articles, 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 2 , partie 3 , partie 4

Idée d'extension web

Chaque développeur est confronté aux tâches d'automatisation des processus dans le navigateur. Une fois pour moi, la tâche consistait à rassembler des membres de groupes d'un certain sujet sur LinkedIn et Facebook.

Avant cela, j'avais de l'expérience dans la rédaction de solutions d'analyseur Web en php, mais ces sites utilisent de nombreux éléments dynamiques et l'objectif de la solution pour cette tâche s'est déplacé spécifiquement vers l'interaction avec les ressources Web via un navigateur.

Bien sûr, je n'allais pas violer l'accord sur la prestation de services (Conditions générales), donc ce qui est décrit ci-dessous est un pur produit de mon imagination et n'est pas recommandé pour la mise en œuvre.

Il était possible d'ouvrir rapidement la console du développeur et d'écrire un script javascript qui simulerait les actions de l'utilisateur, après quoi je pourrais collecter des données. Cette approche a fonctionné en partie avec Facebook, où les membres du groupe et leurs informations peuvent être collectés sur une seule page. Mais cela n'a pas fonctionné pour LinkedIn, où vous devez ouvrir la page de chaque membre.

Après avoir recherché des solutions tierces, j'ai choisi iMacros pour cette tâche. Cette extension a son propre langage pour écrire des macros. D'une certaine manière, je l'ai adapté pour résoudre le problème pour LinkedIn. J'ai dû télécharger l'ancienne version de Mozilla Firefox, car l'extension ne fonctionnait pas pour l'implémentation multi-thread de ce navigateur.

Lors de la recherche de solutions tierces, je suis tombé sur de nombreuses variantes de Web-Parser, Web-Crawler, Web-Scraper, etc. Beaucoup étaient axés sur les sites avec navigation page par page, et non sur le contenu dynamique. Certaines solutions ont suggéré d'installer une solution logicielle pour le système d'exploitation, puis d'utiliser une extension Web pour un tel complexe. Je suis tombé sur des choses très hautement spécialisées, par exemple, pour collecter des participants uniquement sur Facebook.

Après tous les tourments, j'ai eu l'idée «d'inventer mon vélo» pour automatiser les tâches dans le navigateur. Parmi les exigences obligatoires pour mon extension Web, j'ai souligné:

1. Travaillez dans le nombre maximum de navigateurs Web, y compris les mobiles.
2. L'utilisation du langage de script standard pour les navigateurs est javascript.
3. Utilisation de vos propres fichiers de données dans des scripts.
4. La possibilité d'enregistrer les données reçues du script dans un fichier.
5. Les scripts doivent être publics ou privés. Si le script est public, l'équipe de sécurité doit vérifier un tel script.

Plus loin dans cette liste, j'ai noté des choses plus spécifiques pour chaque article.

1. Vous devez utiliser un cadre pour écrire des extensions Web afin de minimiser les efforts pour développer des solutions multi-navigateurs.
2. Javascript est pris en charge par tous les navigateurs, mais vous devez écrire votre propre bibliothèque pour interagir avec l'extension Web. Cette bibliothèque devrait avoir des fonctions pour sauvegarder les données, récupérer les données des fichiers téléchargés, etc.
3. Il est souvent nécessaire d'utiliser l'entrée pour exécuter le script. Par exemple, les données d'autorisation, les clés de l'API, une liste de pages à explorer, etc. Ces données doivent être téléchargées directement sur l'extension Web et stockées dans le cloud.
4. La sauvegarde des données du script est l'une des fonctions les plus nécessaires à l'automatisation. Les données stockées doivent être téléchargées sur csv directement à partir de l'extension Web ou envoyées au courrier de l'utilisateur lorsque la limite de données pour le téléchargement est dépassée. Par exemple, si le téléchargement des membres du groupe est supérieur à 10 000, le téléchargement à partir d'une extension Web peut prendre un certain temps. Cela devrait être évité en générant un fichier sur le serveur.
5. Vous devez disposer d'une interface Web d'administration pour que l'équipe de sécurité vérifie les scripts des utilisateurs qu'ils ont marqués comme publics.

De temps en temps, je trouvais de plus en plus de solutions au même problème - exécuter des scripts personnalisés dans un navigateur. Toutes ces solutions ne correspondaient pas à mes exigences, car je voulais avoir une extension web qui serait capable de supprimer les publicités sur chaque page; transformer la page et ne me montrer que son contenu, sans balisage inutile; collecter des données à partir de n'importe quelle page et les convertir dans un format pratique pour une utilisation future; recueillir des données après une certaine période de temps; etc.

Par conséquent, j'ai furieusement «pris feu» en créant une extension pour exécuter des scripts personnalisés pour la gamme maximale de tâches.

Choisir un cadre d'extension Web

Comme je visais initialement le nombre maximum de navigateurs Web, j'avais besoin d'un cadre pour créer des extensions multi-navigateurs. Nous pouvons immédiatement constater le fait qu'il n'existe tout simplement pas un tel cadre. Parce que de nombreux navigateurs, bien qu'ils fonctionnent de cette façon et fournissent des extensions Web avec une API similaire pour l'interaction, sont fondamentalement différents.

J'ai été forcé d'abandonner presque immédiatement la version initiale de la prise en charge du navigateur mobile. Étant donné qu'aucun de ces navigateurs ne permet d'utiliser des extensions Web. Je n'ai rencontré qu'une seule mention de prise en charge des extensions Web dans le navigateur Dolphin, mais je n'ai pas pu trouver d'informations détaillées sur le site officiel. Il a été décidé d'abandonner cette brillante idée.

Lors de l'écriture de mon ancienne extension, j'ai utilisé le framework kango. En 2013, c'était aussi pratique que possible. Bien que sans le support d'Internet Explorer.

Étant donné que mon extension pouvait fonctionner comme un bookmarklet, je n'ai pas fait attention à ce fait et j'ai choisi ce framework, qui n'était pour l'époque que la solution parfaite pour le développement multi-navigateur.

Depuis, d'autres projets sont apparus qui se sont fixé pour objectif le développement multi-navigateur d'extensions web. J'ai trouvé tous ces projets à un stade précoce de développement. Leur tâche a depuis été simplifiée, car Mozilla Firefox a commencé à utiliser l'API WebExtensions, ce qui a permis de transformer facilement des extensions pour Chrome en extensions pour Firefox.

Les extensions pour le navigateur Opera en 2013 étaient compatibles avec les extensions pour Chrome. Les extensions pour Safari ne fonctionnent désormais que pour les MacOs, car la prise en charge de la plate-forme Windows du navigateur Safari lui-même a depuis longtemps cessé.

Le navigateur Tor fonctionne sur l'ancien moteur Mozilla Firefox et prend donc en charge les extensions Web xpi, que la Fondation Mozilla a abandonnées au profit de la technologie Web Extension.

En substance, le framework kango fait presque son travail à ce jour, car il génère des extensions Web pour tous les navigateurs, à l'exception d'Internet Explorer. Mais comme beaucoup de temps s'est écoulé et que Firefox fonctionne maintenant sur un mécanisme similaire à Chrome, kango génère le même package pour deux navigateurs. J'ai dû modifier un peu la génération pour Firefox et ajouter la génération pour Tor.

Étant donné que le statut du projet de framework kango n'est pas clair, ainsi que la licence du code, je ne peux pas publier mes modifications dans le domaine public. Si les détenteurs des droits d'auteur autorisent la sortie de la version 1.9.0 avec du code source ouvert, je serai heureux de vous aider dans cette entreprise.

Toutes les extensions Web ont deux points pour travailler avec des données. Le fichier content.js vous permet de manipuler le DOM, tandis que background.html vous permet de travailler avec les données d'arrière-plan et l'interaction avec le serveur. La communication entre ces deux points s'effectue via le mécanisme de message.

Ainsi, pour modifier le DOM avec des données côté serveur, nous devons les obtenir à partir de background.html et les utiliser dans content.js via le mécanisme de transmission des messages

Un tel mécanisme idéal n'a pas fonctionné pour mon cas pour un certain nombre de raisons. Par conséquent, je n'ai laissé dans background.js que la logique de travailler avec la fenêtre contextuelle et le bouton d'extension Web dans le navigateur.
La logique de n'importe quelle extension Web avec une fenêtre pop-up est la même. En cliquant sur le bouton, nous affichons simplement une fenêtre contextuelle, au deuxième clic, fermez.

Le framework Kango offre au développeur une interface unifiée pour l'interaction, puis traduit le code de l'extension Web écrite en l'extension Web pour un navigateur Web spécifique, et économise donc beaucoup de temps pour développer des extensions Web inter-navigateurs.

Dans le prochain article, je parlerai du choix du «Framework pour le côté serveur de l'extension web et de l'interface d'extension web»