Créer des extensions Google Chrome avec l'outil de stylisation des sous-titres de Netflix

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.

Voici un manifeste complet.

 {
   "name" : "Styleur de sous-titres Netflix",
   "version" : "1.0",
   "description" : "Styliste de sous-titres Netflix",
   "author" : "twistezo",
   "permissions" : ["tabs", "storage", "declarativeContent", "https://*.netflix.com/"],
   "background" : {
     "scripts" : ["background.js"],
     "persistent" : false
   },
   "page_action" : {
     "default_popup" : "popup.html",
     "default_icon" : "logo.png"
   },
   "manifest_version" : 2
 }

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 :

• vPos - position verticale à partir du bas [px]
• fSize - taille de la police [px]
• fColor - couleur de la police [HEX]

Créer background.js:

chrome.runtime.onInstalled.addListener(() => {
chrome.storage.local.set({ vPos : 300, fSize : 24, fColor : "#FFFFFF" }) ;

chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
// tableau de règles
]) ;
}) ;
}) ;
```

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.

 {
   conditions : [
     new chrome.declarativeContent.PageStateMatcher({
       pageUrl : { hostSuffix : "netflix.com" }
     })
   ],
   actions : [new chrome.declarativeContent.ShowPageAction()]
 }

L'étape suivante consiste à ajouter l'écouteur tabs.onUpdated, qui exécutera notre script lors du chargement ou de l'actualisation de l'onglet actif.

 {
   conditions : [
     new chrome.declarativeContent.PageStateMatcher({
       pageUrl : { hostSuffix : "netflix.com" }
     })
   ],
   actions : [new chrome.declarativeContent.ShowPageAction()]
 }

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:

<code> <!DOCTYPE html>
 <html>
   <head>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" />
     <link rel="stylesheet" href="popup.css" />
   </head>
   <body>
     <div class="container logo">
       NETFLIX SUBTITLES STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Position verticale à partir du bas [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Taille de la police [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Couleur de la police [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Changer</button>
     <input type="hidden" name="trp-form-language" value="fr"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Le style du menu popup n'est pas l'objectif de cet article, je vous suggère donc de visiter le site suivant https://github.com/twistezo/netflix-subtitles-styler et copier l'ensemble du popup.css dans votre projet.

Logique de l'interface utilisateur - popup.js:

const form = document.getElementById("popup-form") ;
const inputElements = ["vPos", "fSize", "fColor"] ;

chrome.storage.local.get(inputElements, data => {
inputElements.forEach(el => {
document.getElementById(el).value = data[el] ;
}) ;
}) ;

form.addEventListener("submit", event => {
event.preventDefault() ;
const [vPos, fSize, fColor] = [...inputElements.map(el => event.target[el].value)] ;

chrome.tabs.query({ active : true, currentWindow : true }, tabs => {
chrome.storage.local.set({ vPos, fSize, fColor }) ;
chrome.tabs.executeScript(
tabs[0].id,
{
file : "script.js"
},
() => {
const error = chrome.runtime.lastError ;
if (error) "Erreur. Tab ID : " + tab.id + " : " + JSON.stringify(error) ;

    chrome.tabs.sendMessage(tabs[0].id, { vPos, fSize, fColor }) ;
  }
) ;

}) ;
}) ;
```

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.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : l'observateur fonctionne... ", "color : red ;") ;

callback = () => {
// .player-timedText
const subtitles = document.querySelector(".player-timedtext") ;
if (sous-titres) {
subtitles.style.bottom = vPos + "px" ;

  // .player-timedtext > .player-timedtext-container [0]
  const firstChildContainer = subtitles.firstChild ;
  if (firstChildContainer) {
    // .player-timedtext > .player-timedtext-container [0] > div
    const firstChild = firstChildContainer.firstChild ;
    if (firstChild) {
      firstChild.style.backgroundColor = "transparent" ;
    }

    // .player-timedtext > .player-timedtext-container [1]
    const secondChildContainer = firstChildContainer.nextSibling ;
    if (secondChildContainer) {
      for (const span of secondChildContainer.childNodes) {
        // .player-timedtext > .player-timedtext-container [1] > span
        span.style.fontSize = fSize + "px" ;
        span.style.fontWeight = "normal" ;
        span.style.color = fColor ;
      }
      secondChildContainer.style.left = "0" ;
      secondChildContainer.style.right = "0" ;
    }
  }
}

} ;

const observer = new MutationObserver(callback) ;
observer.observe(document.body, {
subtree : true,
attributes : false,
childList : true
}) ;
} ;
```

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.

Liens utiles :

• Dépôt de ce projet https://github.com/twistezo/netflix-subtitles-styler
• Guide officiel de Google https://developer.chrome.com/extensions/overview
• API de l'extension Chrome https://developer.chrome.com/extensions/api_index