Créer des extensions Google Chrome avec l'outil de stylisation des sous-titres de Netflix
Lukasz Kolko
Aujourd'hui, nous allons créer des extensions Google Chrome pour manipuler les styles de sous-titres de Netflix en temps réel. Vous trouverez des informations sur la création d'extensions à partir de zéro, des conseils pratiques et des points de vue généraux sur l'architecture des extensions. Si vous n'êtes pas satisfait des options de sous-titres Netflix disponibles ou si vous souhaitez simplement créer rapidement une extension pour vous faciliter la vie, cet article est fait pour vous.
Nos objectifs :
créer une logique d'extension
stocker les paramètres dans le navigateur Stockage local
charger automatiquement et activer les extensions uniquement sur la page Netflix
créer un menu contextuel
créer des formulaires avec des options de sous-titrage
Exigences :
des connaissances de base en matière de HTML, CSS et JavaScript
Netflix, par son API, envoie chaque phrase de sous-titre séparément. Il utilise des styles CSS pour styliser les sous-titres. En accédant au DOM de la page, nous pouvons manipuler ces styles reçus avec l'extension Chrome.
Le manifeste
Tout d'abord, nous devons créer le fichier manifeste appelé manifest.json. Ce fichier renseigne le navigateur sur la configuration de l'extension, comme les fichiers d'interface utilisateur, les scripts d'arrière-plan et les capacités que l'extension peut avoir.
Comme vous le voyez, nous avons quelques informations standard, telles que le nom, la version, la description et la page d'accueil.url et manifesteversion.
L'une des parties importantes du manifeste est la section des permissions. Il s'agit d'un tableau contenant les éléments auxquels notre extension peut accéder.
Dans notre cas, nous devons avoir accès aux onglets pour trouver l'onglet actif, exécuter des scripts et envoyer des messages entre l'interface utilisateur et l'extension. Nous avons besoin de stockage pour conserver les paramètres de l'extension dans le navigateur et de declarativeContent pour prendre des mesures en fonction du contenu de l'onglet. Le dernier élément https://*.netflix.com/ permet à l'extension d'accéder uniquement au domaine netflix.com.
Les extensions Chrome ont une logique distincte de l'interface utilisateur, c'est pourquoi nous avons besoin de background.scripts, qui indique à l'extension où elle peut trouver sa logique. persistent : false signifie que ce script ne sera utilisé qu'en cas de besoin. page_action est la section qui contient la partie interface utilisateur. Nous avons ici un simple fichier HTML pour un menu popup et le logo PNG d'une extension.
Logique d'extension
Tout d'abord, nous devons configurer les comportements runtime.onInstalled, supprimer toutes les règles actuelles (par exemple celles des anciennes versions) et déclarer la fonction permettant d'ajouter de nouvelles règles. Nous utilisons Local Storage pour les paramètres de stockage afin de pouvoir allouer des paramètres par défaut après l'installation de l'extension.
Nous utiliserons trois paramètres de style de sous-titres :
Notre objectif est de désactiver le bouton d'extension sur tous les domaines autres que le netflix.com. Nous créons une nouvelle règle avec PageStateMatcher conditions et déclarer ShowPageAction où la nouvelle règle sera assignée.
Tout d'abord, nous vérifions que changeInfo.status a le statut complet. Cela signifie que le site web de cet onglet est chargé. Ensuite, nous récupérons les paramètres du stockage local et déclarons le script qui doit être exécuté sur l'onglet actuel avec tabId. Enfin, dans le callback, nous envoyons le message avec les paramètres de l'interface utilisateur au script.
Extension UI
Pour créer une extension de menu popup avec formulaire, nous créons trois fichiers : popup.html et popup.css avec des couches visuelles et popup.js avec une logique de communication entre le menu et les éléments isolés background.js le scénario.
Notre objectif en matière d'interface utilisateur :
Nous avons ici un simple formulaire HTML avec validation intégrée : popup.html:
Dans le script ci-dessus, nous chargeons les paramètres du stockage local et les attachons aux entrées du formulaire. Ensuite, nous créons un écouteur pour soumettre avec des fonctions permettant d'enregistrer les paramètres dans la mémoire locale et de les envoyer par message à notre script. Comme vous le voyez, nous utilisons le stockage local dans chaque composant. L'extension Chrome ne dispose pas de son propre espace de données, la solution la plus simple est donc d'utiliser l'espace local du navigateur comme Local Storage. Nous utilisons aussi souvent l'espace de stockage local envoyer un message fonction. Ce problème est dû à l'architecture des extensions Chromme, qui ont une logique distincte de celle de l'interface utilisateur.
Le scénario
Il est maintenant temps de créer script.js avec une logique de manipulation des styles de sous-titres Netflix.
Tout d'abord, nous créons onMessage pour recevoir des messages avec des paramètres de l'extension.
chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
// fonction de manipulation des styles
}) ;
Ensuite, dans le même fichier, nous créons la fonction permettant de remplacer les styles Netflix par nos styles en temps réel.
Pour Netflix, chaque fois qu'il reçoit des phrases entières de sous-titres, il ne change que la partie sous-titres du DOM de la page. Nous devons donc utiliser une fonction d'observation comme MutationObserverqui déclenchera notre changeSubtitlesStyle à chaque fois que le DOM de la page a changé. Dans la fonction rappel nous voyons une manipulation simple des styles. Les lignes commentées contiennent des informations sur l'endroit où vous pouvez trouver les styles appropriés.
Le temps de courir
Je suppose que vous n'avez pas de compte développeur dans le Chrome Webstore. Pour lancer cette extension, rendez-vous à l'adresse suivante chrome://extensions/ dans votre Chrome, cliquez sur l'icône Chargement sans emballagesélectionnez le dossier avec l'extension et c'est tout ! Ensuite, allez évidemment sur la page Netflix pour la tester.
Conclusions
Comme vous le voyez, il est facile de commencer à créer des extensions qui vous facilitent la vie. Le plus important est de comprendre l'architecture divisée de Google Chrome Extension et la communication entre les composants. Ce stylisateur de sous-titres n'est qu'une simple démonstration de ce qu'il est possible de faire avec l'API des extensions Chrome.
Comme vous le voyez, il est facile de commencer à créer des extensions qui vous facilitent la vie. Le plus important est de comprendre l'architecture divisée de Google Chrome Extension et la communication entre les composants. Ce stylisateur de sous-titres n'est qu'une simple démonstration de ce qu'il est possible de faire avec l'API des extensions Chrome.
Imaginez que vous puissiez améliorer votre expérience visuelle sur des plateformes comme Netflix grâce à la puissance des extensions. Par exemple, le populaire Soirée Netflix permet aux utilisateurs de regarder des contenus ensemble et de manière synchronisée. Une icône d'extension dans votre barre d'outils peut vous permettre d'accéder rapidement aux fonctions de contrôle lorsque vous avez besoin d'une assistance technique. Netflix en streaming. L'idée derrière des outils tels que Netflix étendu est d'ajouter plus de fonctionnalités directement dans le Application Netflix par le biais de la Extension Netflix intégré dans Chrome. Lorsque vous naviguez sur le site Site web de NetflixDe telles extensions peuvent aider les utilisateurs à naviguer dans le système d'information de l'UE. Catégories de Netflix plus efficacement ou même de découvrir des Contenu de Netflix qu'ils n'auraient peut-être pas rencontrés autrement.
De plus, imaginez que vous puissiez ajouter un image de profil personnalisée à votre profil Netflix ou avoir plus de contrôle sur les sous-titres et la vitesse de lecture. Tout cela est accessible directement à partir de la page d'accueil de Chrome web navigateur, ce qui rend l'ensemble de la L'expérience Netflix plus adaptés aux préférences de chaque utilisateur. Les extensions améliorent non seulement les fonctionnalités de sites web tels que Netflix, mais aussi l'interaction globale avec l'utilisateur, la rendant plus immersive et plus conviviale.