Opprett Google Chrome-utvidelser med Netflix-undertekststyler

Våre mål:

• opprette utvidelseslogikk
• lagre innstillinger i nettleserens lokale lagring
• automatisk innlasting og aktivering av utvidelser bare på Netflix-siden
• opprette popup-meny
• opprette skjemaer med alternativer for undertekster

Krav:

• grunnleggende kunnskap om HTML, CSS og JavaScript

Netflix API sender hver undertekstsetning separat. Den bruker CSS-stiler for styling av undertekster. Med tilgang til sidens DOM kan vi manipulere de mottatte stilene med Chrome-utvidelsen.

Manifestet

Først må vi opprette manifestfilen som heter manifest.json. Denne forteller nettleseren om oppsettet av utvidelsen, for eksempel UI-filer, bakgrunnsskript og hvilke funksjoner utvidelsen kan ha.

Her er et komplett manifest.

 {
   "navn": "Netflix-undertekststyler",
   "versjon": "1.0",
   "description": "Netflix subtitles styler",
   "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
 }

Som du ser, har vi en del standardinformasjon, som navn, versjon, beskrivelse, hjemmesideurl og manifestversjon.

En av de viktigste delene av manifestet er delen om tillatelser. Dette er en matrise med elementer som utvidelsen vår har tilgang til.

I vårt tilfelle må vi ha tilgang til faner for å finne den aktive fanen, utføre skript og sende meldinger mellom brukergrensesnittet og utvidelsen. Vi trenger lagring for å lagre innstillinger for utvidelsen i nettleseren, og declarativeContent for å utføre handlinger avhengig av innholdet i fanen. Det siste elementet https://*.netflix.com/ gir utvidelsen tilgang kun til netflix.com-domenet.

Chrome-utvidelser har en separat logikk fra brukergrensesnittet, så vi må ha background.scripts, som forteller utvidelsen hvor den kan finne logikken sin. persistent: false betyr at dette skriptet bare vil bli brukt ved behov. page_action er delen med brukergrensesnittdelen. Her har vi en enkel HTML-fil for en popup-meny og en PNG-logo for en utvidelse.

Utvidelseslogikk

Først må vi konfigurere runtime.onInstalled-oppførsel, fjerne gjeldende regler (for eksempel fra eldre versjoner) og erklære en funksjon for å legge til nye regler. Vi bruker Local Storage for lagringsinnstillingene, slik at vi kan tildele standardinnstillinger etter at utvidelsen er installert.

Vi kommer til å bruke tre parametere for undertekststil:

• vPos - vertikal posisjon fra bunnen [px]
• fSize - skriftstørrelse [px]
• fColor - skriftfarge [HEX]

Opprett background.js:

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

chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
// matrise med regler
]);
});
});
```

Målet vårt er å deaktivere utvidelsesknappen på alle andre domener enn netflix.com. Vi oppretter en ny regel med PageStateMatcher betingelser og erklære ShowPageAction hvor den nye regelen vil bli tildelt.

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

Neste trinn er å legge til tabs.onUpdated-lytteren, som vil utføre skriptet vårt mens du laster inn eller oppdaterer den aktive fanen.

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

Først kontrollerer vi at changeInfo.status har statusen complete. Dette betyr at nettstedet på denne fanen er lastet inn. Deretter henter vi innstillinger fra Local Storage og angir hvilket skript som skal kjøres på den aktuelle fanen med tabId. Til slutt sender vi meldingen med innstillingene fra brukergrensesnittet til skriptet i tilbakeringingen.

Utvidelse UI

For å lage en popup-meny med skjema, oppretter vi tre filer: popup.html og popup.css med visuelle lag og popup.js med logikk for kommunikasjon mellom menyen og den isolerte background.js manus.

Målet vårt for brukergrensesnittet:

Her har vi et enkelt HTML-skjema med innebygd validering: 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 UNDERTEKSTER STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Vertikal posisjon fra bunnen [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Skriftstørrelse [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Skriftfarge [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Forandring</button>
     <input type="hidden" name="trp-form-language" value="nb"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Styling av popup-menyen er ikke målet med denne artikkelen, så jeg foreslår at du besøker https://github.com/twistezo/netflix-subtitles-styler og kopier hele popup.css filen inn i din prosjekt.

UI-logikk 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,
{
fil: "script.js"
},
() => {
const error = chrome.runtime.lastError;
if (error) "Feil. Fane-ID: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

I skriptet ovenfor laster vi inn innstillinger fra Local Storage og knytter dem til skjemainnganger. Deretter oppretter vi en lytter til sende inn hendelse med funksjoner for å lagre innstillingene i Local Storage og sende dem via melding til skriptet vårt. Som du ser, bruker vi Local Storage i hver komponent. Chrome-utvidelsen har ikke sin egen dataplass, så den enkleste løsningen er å bruke nettleserens lokale plass som Local Storage. Vi bruker også ofte sendMessage funksjon. Det skyldes Chromme-utvidelsenes arkitektur - de har separat logikk fra brukergrensesnittet.

Manuset

Nå er det på tide å skape script.js med logikk for å manipulere Netflix' undertekststiler.

Først oppretter vi onMessage lytter for mottak av meldinger med innstillinger fra filtypen.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // funksjon for manipulering av stiler
 });

I den samme filen oppretter vi deretter en funksjon for å endre Netflix-stilene til våre stiler i sanntid.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : observatøren fungerer... ", "color: red;");

callback = () => {
// .player-timedText
const subtitles = document.querySelector(".player-timedtext");
if (undertekster) {
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,
attributter: false,
childList: true
});
};
```

For Netflix, hver gang den mottar hele undertekstsetninger, bytter den bare ut undertekstdelen av sidens DOM. Så vi må bruke en observatørfunksjon som MutasjonsObserver, som vil utløse vår changeSubtitlesStyle funksjon hver gang sidens DOM har endret seg. I tilbakekalling funksjonen ser vi enkel manipulering av stiler. De kommenterte linjene inneholder informasjon om hvor du kan finne riktige stiler.

På tide å løpe

Jeg antar at du ikke har en utviklerkonto i Chrome Webstore. Så for å kjøre denne utvidelsen, gå til chrome://extensions/ i Chrome, klikker du på Last utpakket, velg mappe med utvidelsen, og det er det! Gå deretter til Netflix-siden for å teste den.

Konklusjoner

Som du ser, er det enkelt å begynne å lage noen utvidelser som gjør livet enklere. Det viktigste er å forstå Google Chrome Extension-arkitekturen og kommunikasjonen mellom komponentene. Denne undertekststyleren er bare en enkel demonstrasjon av hva du kan gjøre med Chrome Extension API.

Som du ser, er det enkelt å begynne å lage noen utvidelser som gjør livet enklere. Det viktigste er å forstå arkitekturen i Google Chrome Extension og kommunikasjonen mellom komponentene. Denne undertekststyleren er bare en enkel demonstrasjon av hva du kan gjøre med Chrome Extension API.

Forestill deg at du kan forbedre seeropplevelse på plattformer som Netflix ved hjelp av utvidelser. For eksempel kan den populære Netflix-fest gjør det mulig for brukere å se på innhold sammen og synkronisere det. En utvidelsesikon i verktøylinjen kan gi deg rask tilgang til kontrollfunksjoner når du strømming av Netflix. Ideen bak verktøy som Netflix Extended er å legge til mer funksjonalitet direkte i Netflix-appen gjennom Netflix-utvidelse integrert i Chrome. Når du surfer på Netflix' nettstedkan slike utvidelser hjelpe brukerne med å navigere gjennom Netflix-kategorier mer effektivt eller til og med oppdage skjulte Netflix-innhold som de ellers kanskje ikke ville kommet over.

Dessuten, tenk deg å kunne legge til en tilpasset profilbilde til Netflix-profilen din eller ha mer kontroll over undertekster og avspillingshastighet. Alt dette er tilgjengelig direkte fra Chrome web nettleser, noe som gjør den totale Netflix-opplevelse mer skreddersydd til hver enkelt brukers preferanser. Utvidelser forbedrer ikke bare funksjonaliteten til nettsteder som Netflix, men løfter også den generelle brukerinteraksjonen, noe som gjør den mer oppslukende og brukervennlig.

Nyttige lenker:

• Repository med dette prosjektet https://github.com/twistezo/netflix-subtitles-styler
• Offisiell Google-guide https://developer.chrome.com/extensions/overview
• API for Chrome-utvidelser https://developer.chrome.com/extensions/api_index