Google Chrome-extensies maken met Netflix ondertiteling styler

Onze doelen:

• uitbreidingslogica maken
• instellingen opslaan in de lokale opslag van de browser
• extensies alleen op de Netflix-pagina automatisch laden en activeren
• popupmenu maken
• formulieren met ondertitelingsopties maken

Vereisten:

• basiskennis van HTML, CSS en JavaScript

Netflix verstuurt via zijn API elke ondertitelingszin afzonderlijk. Het gebruikt CSS-stijlen voor de opmaak van ondertitels. Met toegang tot de pagina DOM kunnen we die ontvangen stijlen manipuleren met een Chrome-extensie.

Het manifest

Eerst moeten we het manifestbestand manifest.json maken. Dit vertelt de browser over de configuratie van de extensie, zoals de UI-bestanden, achtergrondscripts en de mogelijkheden die de extensie zou kunnen hebben.

Hier is een compleet manifest.

 {
   "naam": "Netflix ondertitels styler",
   "versie": "1.0",
   "description": "Netflix subtitles styler",
   "author": "twistezo",
   "permissies": ["tabs", "storage", "declarativeContent", "https://*.netflix.com/"],
   "background": {
     "scripts": ["background.js"],
     "persistent": false
   },
   "page_action": {
     "standaard_popup": "popup.html",
     "default_icon": "logo.png".
   },
   "manifest_version": 2
 }

Zoals je ziet, hebben we wat standaardinformatie, zoals naam, versie, beschrijving, startpaginaurl en manifestversie.

Een van de belangrijke onderdelen van het manifest is de sectie Machtigingen. Dit is een array met elementen waartoe onze extensie toegang heeft.

In ons geval moeten we toegang hebben tot tabbladen om de actieve tab te vinden, scripts uit te voeren en berichten te versturen tussen de UI en de extensie. We hebben opslag nodig om de instellingen van de extensie in de browser op te slaan en declarativeContent om actie te ondernemen afhankelijk van de inhoud van het tabblad. Het laatste element https://*.netflix.com/ geeft extensie alleen toegang tot het netflix.com domein.

Chrome-extensies hebben een gescheiden logica van de UI, dus hebben we background.scripts nodig, dat de extensie vertelt waar het zijn logica kan vinden. persistent: false betekent dat dit script alleen wordt gebruikt als het nodig is. page_action is de sectie met het UI-gedeelte. We hebben hier een eenvoudig HTML-bestand voor een popupmenu en een PNG-logo van een extensie.

Uitbreidingslogica

Eerst moeten we runtime.onInstalled gedrag instellen, eventuele huidige regels verwijderen (bijvoorbeeld van oudere versies) en een functie declareren om nieuwe regels toe te voegen. We gebruiken Local Storage voor de opslaginstellingen, zodat we standaardinstellingen kunnen toewijzen nadat de extensie is geïnstalleerd.

We zullen drie stijlparameters voor ondertitels gebruiken:

• vPos - verticale positie vanaf onder [px]
• fGrootte - lettergrootte [px]
• fKleur - letterkleur [HEX]

Maak achtergrond.js:

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

chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
// array met regels
]);
});
});
```

Ons doel is om de extensieknop uit te schakelen op alle andere domeinen dan netflix.nl. We maken een nieuwe regel met PageStateMatcher voorwaarden en verklaren ToonPaginaActie waar de nieuwe regel wordt toegewezen.

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

De volgende stap is het toevoegen van tabs.onUpdated listener, die ons script zal uitvoeren tijdens het laden of vernieuwen van het actieve tabblad.

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

Eerst controleren we of changeInfo.status de status complete heeft. Dit betekent dat de website op dit tabblad is geladen. Vervolgens halen we de instellingen op uit Local Storage en geven we aan welk script moet worden uitgevoerd op het huidige tabblad met tabId. Tot slot sturen we in de callback het bericht met de instellingen van de UI naar het script.

Uitbreiding UI

Om een extensie popupmenu met formulier te maken, maken we drie bestanden: popup.html en popup.css met visuele lagen en popup.js met logica voor communicatie tussen het menu en geïsoleerde achtergrond.js script.

Ons UI-doel:

Hier hebben we een eenvoudig HTML-formulier met ingebouwde validatie: 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 ONDERTITELS STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Verticale positie vanaf onder [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Lettergrootte [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Letterkleur [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Verander</button>
     <input type="hidden" name="trp-form-language" value="nl"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Het popupmenu stylen is niet het doel van dit artikel, dus ik stel voor dat je naar https://github.com/twistezo/netflix-subtitles-styler en kopieer de hele popup.css bestand in uw project.

UI-logica - popup.js:

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

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

form.addEventListener("submit", gebeurtenis => {
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(
tabbladen[0].id,
{
bestand: "script.js"
},
() => {
const error = chrome.runtime.lastError;
if (error) "Fout. Tab ID: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

In bovenstaand script laden we instellingen van Local Storage en koppelen die aan formulieringangen. Vervolgens maken we listener naar indienen event met functies om instellingen op te slaan in Local Storage en ze per bericht naar ons script te sturen. Zoals je ziet, gebruiken we Local Storage in elk onderdeel. De Chrome-extensie heeft geen eigen dataruimte, dus de eenvoudigste oplossing is om lokale browserruimte zoals Local Storage te gebruiken. We gebruiken ook vaak de sendMessage functie. Het wordt veroorzaakt door de architectuur van Chromme-extensies - ze hebben gescheiden logica van de UI.

Het script

Nu is het tijd om script.js met logica voor het manipuleren van Netflix ondertitelingsstijlen.

Eerst maken we onMessage luisteraar voor het ontvangen van berichten met instellingen van de extensie.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // functie voor het manipuleren van stijlen
 });

Dan maken we in hetzelfde bestand de functie om de juiste Netflix-stijlen in realtime te wijzigen in onze stijlen.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : observer werkt... ", "color: red;");

callback = () => {
// .player-timedText
const subtitles = document.querySelector(".player-timedtext");
if (ondertitels) {
ondertitels.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 = "transparant";
    }

    // .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 = nieuwe MutatieObserver(callback);
observer.observe(document.body, {
subtree: true,
attributen: false,
childList: true
});
};
```

Voor Netflix verwisselt het elke keer dat het hele ondertitelingszinnen ontvangt alleen het ondertitelingsgedeelte van de pagina DOM. Dus moeten we een observerfunctie gebruiken zoals MutatieObserverdie onze veranderingSubtitelsStijl functie telkens wanneer de pagina DOM is gewijzigd. In de terugbellen functie zien we eenvoudige manipulatie van stijlen. De becommentarieerde regels bevatten informatie over waar je de juiste stijlen kunt vinden.

Tijd om te rennen

Ik neem aan dat je geen ontwikkelaarsaccount hebt in de Chrome Webstore. Dus om deze extensie uit te voeren ga je naar chrome://extensions/ in uw Chrome, klik op de Uitgepakt ladenSelecteer de map met de extensie en klaar! Ga vervolgens uiteraard naar de Netflix-pagina om het te testen.

Conclusies

Zoals u ziet, is het eenvoudig om extensies te maken die het leven gemakkelijker maken. Het belangrijkste is om de architectuur van Google Chrome Extension en de communicatie tussen componenten te begrijpen. Deze ondertitelingstyler is slechts een eenvoudige demo van wat u kunt doen met de Chrome Extension API.

Zoals u ziet, is het eenvoudig om te beginnen met het maken van enkele extensies die het leven gemakkelijker maken. Het belangrijkste is dat u de architectuur van Google Chrome Extension en de communicatie tussen componenten begrijpt. Deze ondertitelstyler is slechts een eenvoudige demo van wat u kunt doen met de Chrome Extension API.

Stel je voor dat je je kijkervaring op platforms zoals Netflix met de kracht van extensies. Het populaire Netflix-feestje stelt gebruikers in staat om inhoud samen synchroon te bekijken. Een uitbreidingspictogram in uw werkbalk kunt u snel toegang krijgen tot bedieningsfuncties wanneer Netflix streamen. Het idee achter tools zoals Netflix Uitgebreid is om meer functionaliteit direct toe te voegen aan de Netflix-app door de Netflix-uitbreiding geïntegreerd in Chrome. Wanneer u door de Netflix-websiteDergelijke extensies kunnen gebruikers helpen bij het navigeren door Netflix-categorieën efficiënter of zelfs het ontdekken van verborgen Netflix-inhoud die ze anders misschien niet zouden tegenkomen.

Stel je bovendien voor dat je een aangepaste profielfoto naar je Netflix-profiel of meer controle over de ondertiteling en afspeelsnelheid. Dit is allemaal direct toegankelijk vanuit de Chrome-web browser, waardoor de algehele Netflix-ervaring meer afgestemd op de voorkeuren van elke gebruiker. Extensies verbeteren niet alleen de functionaliteiten van websites zoals Netflix, maar verhogen ook de algehele gebruikersinteractie, waardoor deze meeslepender en gebruiksvriendelijker wordt.

Nuttige links:

• Repository met dit project https://github.com/twistezo/netflix-subtitles-styler
• Officiële Google-gids https://developer.chrome.com/extensions/overview
• Chrome-extensie-API https://developer.chrome.com/extensions/api_index