Opret Google Chrome-udvidelser med Netflix-undertekststyler

Vores mål:

• Opret udvidelseslogik
• gemme indstillinger i browserens lokale lager
• Autoload og aktiver kun udvidelser på Netflix-siden
• Opret popup-menu
• Opret formularer med muligheder for undertekster

Krav:

• grundlæggende viden om HTML, CSS og JavaScript

Netflix sender via sin API hver undertekstsætning separat. Den bruger CSS-stilarter til at style undertekster. Med adgang til sidens DOM kan vi manipulere de modtagne stilarter med en Chrome-udvidelse.

Det åbenlyse

For det første skal vi oprette manifestfilen kaldet manifest.json. Den fortæller browseren om udvidelsens opsætning, såsom UI-filer, baggrundsscripts og de muligheder, som udvidelsen måtte have.

Her er et komplet manifest.

 {
   "navn": "Netflix-undertekststyler",
   "version": "1.0",
   "description": "Netflix undertekststyler",
   "author": "twistezo",
   "permissions": ["tabs", "storage", "declarativeContent", "https://*.netflix.com/"],
   "background": {
     "scripts": ["background.js"],
     "vedvarende": falsk
   },
   "page_action": {
     "default_popup": "popup.html",
     "default_icon": "logo.png"
   },
   "manifest_version": 2
 }

Som du kan se, har vi nogle standardoplysninger, såsom navn, version, beskrivelse, hjemmesideurl og manifestversion.

En af de vigtige dele af manifestet er afsnittet om tilladelser. Det er et array med elementer, som vores udvidelse kan få adgang til.

I vores tilfælde skal vi have adgang til faner for at finde den aktive fane, udføre scripts og sende beskeder mellem brugergrænsefladen og udvidelsen. Vi har brug for storage til at gemme udvidelsens indstillinger i browseren og declarativeContent til at foretage handlinger afhængigt af fanens indhold. Det sidste element https://*.netflix.com/ giver kun udvidelsen adgang til netflix.com-domænet.

Chrome-udvidelser har en separat logik fra brugergrænsefladen, så vi er nødt til at have background.scripts, som fortæller udvidelsen, hvor den kan finde sin logik. persistent: false betyder, at dette script kun bruges, hvis det er nødvendigt. page_action er sektionen med brugergrænsefladedelen. Vi har her en simpel HTML-fil til en popup-menu og en udvidelses PNG-logo.

Udvidelseslogik

Først skal vi opsætte runtime.onInstalled behaviours, fjerne eventuelle nuværende regler (f.eks. fra ældre versioner) og erklære en funktion til at tilføje nye regler. Vi bruger Local Storage til lagringsindstillingerne, så vi kan tildele standardindstillinger, når udvidelsen er installeret.

Vi vil bruge tre parametre for undertekststil:

• vPos - lodret position fra bunden [px]
• fStørrelse - Skriftstørrelse [px]
• fFarve - skriftfarve [HEX]

Opret baggrund.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 med regler
]);
});
});
```

Vores primære mål er at deaktivere udvidelsesknappen på alle andre domæner end netflix.com. Vi opretter en ny regel med PageStateMatcher betingelser og erklære VisSideAktion hvor den nye regel vil blive tildelt.

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

Det næste skridt er at tilføje tabs.onUpdated-lytteren, som vil udføre vores script, når den aktive fane indlæses eller opdateres.

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

Først tjekker vi, at changeInfo.status har status complete. Det betyder, at hjemmesiden på denne fane er indlæst. Derefter henter vi indstillinger fra Local Storage og erklærer, hvilket script der skal køres på den aktuelle fane med tabId. Endelig sender vi beskeden med indstillinger fra brugergrænsefladen til scriptet i callback.

Udvidelse UI

For at oprette en udvidet popup-menu med formular skal vi oprette tre filer: popup.html og popup.css med visuelle lag og popup.js med logik til at kommunikere mellem menuen og den isolerede baggrund.js Manuskript.

Vores UI-mål:

Her har vi en simpel HTML-formular med indbygget 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">Lodret position fra bunden [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">Skrifttypefarve [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="da"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Styling af popup-menuen er ikke målet med denne artikel, så jeg foreslår, at du besøger https://github.com/twistezo/netflix-subtitles-styler og kopier hele popup.css fil ind i din projekt.

UI-logik -. 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) "Fejl. Tab ID: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

I ovenstående script indlæser vi indstillinger fra Local Storage og knytter dem til formularinput. Derefter opretter vi en lytter til indsende event med funktioner til at gemme indstillinger i Local Storage og sende dem som besked til vores script. Som du kan se, bruger vi Local Storage i alle komponenter. Chrome-udvidelsen har ikke sit eget datarum, så den enkleste løsning er at bruge browserens lokale rum som Local Storage. Vi bruger også ofte sendBesked funktion. Det skyldes Chromme-udvidelsernes arkitektur - de har separat logik fra brugergrænsefladen.

Manuskriptet

Nu er det tid til at skabe script.js med logik til at manipulere Netflix' undertekststil.

Først opretter vi onMessage lytter til modtagelse af beskeder med indstillinger fra lokalnummeret.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // funktion til at manipulere stilarter
 });

I samme fil opretter vi så en funktion til at ændre de rigtige Netflix-stilarter til vores stile i realtid.

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

tilbagekald = () => {
// .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, {
undertræ: true,
attributter: false,
childList: true
});
};
```

For Netflix gælder det, at hver gang den modtager hele undertekstsætninger, skifter den kun undertekstdelen af sidens DOM. Så vi er nødt til at bruge en observatørfunktion som Mutationsobservatørsom vil udløse vores changeSubtitlesStyle funktion, hver gang sidens DOM har ændret sig. I tilbagekaldelse funktion ser vi simpel manipulation af stilarter. De kommenterede linjer indeholder oplysninger om, hvor du kan finde de rigtige stilarter.

Tid til at løbe

Jeg går ud fra, at du ikke har en udviklerkonto i Chrome Webstore. Så for at køre denne udvidelse skal du gå til chrome://extensions/ i din Chrome, klik på Læs udpakketVælg mappen med udvidelsen, og så er det klaret! Derefter skal du naturligvis gå til Netflix-siden for at teste den.

Konklusioner

Som du kan se, er det nemt at komme i gang med at skabe nogle udvidelser, der gør livet lettere. Det vigtigste er at forstå arkitekturen i Google Chrome Extension og kommunikationen mellem komponenterne. Denne undertekststyler er kun en simpel demonstration af, hvad du kan gøre med Chrome Extension API.

Som du kan se, er det nemt at komme i gang med at skabe nogle udvidelser, der gør livet lettere. Det vigtigste er at forstå arkitekturen i Google Chrome Extension og kommunikationen mellem komponenterne. Denne undertekststyler er kun en simpel demonstration af, hvad du kan gøre med Chrome Extension API.

Forestil dig at forbedre din seeroplevelse på platforme som Netflix med kraften fra udvidelser. For eksempel er den populære Netflix-fest giver brugerne mulighed for at se indhold sammen i synkronisering. En ikon for udvidelse i din værktøjslinje kan give dig hurtig adgang til kontrolfunktioner, når streaming af Netflix. Ideen bag værktøjer som Netflix udvidet er at tilføje mere funktionalitet direkte i Netflix-app gennem Netflix-udvidelse integreret i Chrome. Når du browser på Netflix' hjemmesidekan sådanne udvidelser hjælpe brugerne med at navigere gennem Netflix-kategorier mere effektivt eller endda opdage skjulte Netflix-indhold som de måske ellers ikke ville støde på.

Forestil dig desuden at kunne tilføje en Brugerdefineret profilbillede til din Netflix-profil eller få mere kontrol over undertekster og afspilningshastighed. Alt dette er tilgængeligt direkte fra Chrome web browser, hvilket gør den samlede Netflix-oplevelse mere skræddersyet til den enkelte brugers præferencer. Udvidelser forbedrer ikke kun funktionerne på hjemmesider som Netflix, men løfter også den samlede brugerinteraktion og gør den mere fordybende og brugervenlig.

Nyttige links:

• Repository med dette projekt https://github.com/twistezo/netflix-subtitles-styler
• Officiel Google-guide https://developer.chrome.com/extensions/overview
• Chrome Extension API https://developer.chrome.com/extensions/api_index