Skapa Google Chrome-tillägg med Netflix undertextstyler

Våra mål:

• skapa logik för förlängning
• lagra inställningar i webbläsaren Lokal lagring
• autoload och aktivera tillägg endast på Netflix-sidan
• skapa popup-meny
• skapa formulär med alternativ för undertexter

Krav som ställs:

• grundläggande kunskaper om HTML, CSS och JavaScript

Netflix skickar via sitt API varje undertextmening separat. Det använder CSS-stilar för styling av undertexter. Med tillgång till sidans DOM kan vi manipulera de mottagna stilarna med Chrome-tillägget.

Det uppenbara

För det första måste vi skapa manifestfilen som heter manifest.json. Detta berättar för webbläsaren om tilläggskonfigurationen, till exempel UI-filer, bakgrundsskript och de funktioner som tillägget kan ha.

Här är en fullständig förteckning.

 {
   "namn": "Styler för Netflix undertexter",
   "version": "1.0",
   "description": "Netflix undertexter styler",
   "author": "twistezo",
   "permissions": ["tabs", "storage", "declarativeContent", "https://*.netflix.com/"],
   "background": {
     "skript": ["background.js"],
     "ihållande": false
   },
   "page_action": {
     "default_popup": "popup.html",
     "default_icon": "logo.png"
   },
   "manifest_version": 2
 }

Som du ser har vi en del standardinformation, till exempel namn, version, beskrivning, hemsidawebbadress och manifestversion.

En av de viktigaste delarna i manifestet är avsnittet om behörigheter. Detta är en matris med element som vårt tillägg kan komma åt.

I vårt fall behöver vi ha tillgång till flikar för att hitta den aktiva fliken, köra skript och skicka meddelanden mellan användargränssnittet och tillägget. Vi behöver lagring för att lagra inställningar för tillägget i webbläsaren och declarativeContent för att vidta åtgärder beroende på flikens innehåll. Det sista elementet https://*.netflix.com/ ger tillägget åtkomst endast till netflix.com-domänen.

Chrome-tillägg har en separat logik från användargränssnittet, så vi måste ha background.scripts, som talar om för tillägget var det kan hitta sin logik. persistent: false innebär att detta skript endast kommer att användas vid behov. page_action är avsnittet med användargränssnittsdelen. Här har vi en enkel HTML-fil för en popup-meny och en PNG-logotyp för ett tillägg.

Logik för förlängning

Först måste vi ställa in runtime.onInstalled-beteenden, ta bort alla aktuella regler (till exempel från äldre versioner) och deklarera funktionen för att lägga till nya regler. Vi använder Local Storage för lagringsinställningarna så att vi kan tilldela standardinställningar efter att tillägget har installerats.

Vi kommer att använda tre stilparametrar för undertexter:

• vPos - vertikal position från botten [px]
• fStorlek - teckenstorlek [px]
• fFärg - teckensnittsfärg [HEX]

Skapa bakgrund.js:

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

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

Vårt mål är att inaktivera förlängningsknappen på alla andra domäner än netflix.com. Vi skapar en ny regel med PageStateMatcher villkor och deklaration VisaSidaAktion där den nya regeln kommer att tilldelas.

 {
   villkor: [
     ny chrome.declarativeContent.PageStateMatcher({
       pageUrl: { hostSuffix: "netflix.com" }
     })
   ],
   åtgärder: [new chrome.declarativeContent.ShowPageAction()]
 }

Nästa steg är att lägga till lyssnaren tabs.onUpdated, som kommer att exekvera vårt skript när den aktiva fliken laddas eller uppdateras.

 {
   villkor: [
     ny chrome.declarativeContent.PageStateMatcher({
       pageUrl: { hostSuffix: "netflix.com" }
     })
   ],
   åtgärder: [new chrome.declarativeContent.ShowPageAction()]
 }

Först kontrollerar vi att changeInfo.status har statusen complete. Det betyder att webbplatsen på den här fliken är laddad. Sedan hämtar vi inställningar från Local Storage och deklarerar vilket skript som ska köras på den aktuella fliken med tabId. Slutligen, i callback, skickar vi meddelandet med inställningar från användargränssnittet till skriptet.

Förlängning UI

För att skapa en popup-meny med formulär skapar vi tre filer: popup.html och popup.css med visuella lager och popup.js med logik för kommunikation mellan menyn och isolerad bakgrund.js manus.

Vårt UI-mål:

Här har vi ett enkelt HTML-formulär med inbyggd 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 UNDERTEXTER STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Vertikal position från botten [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Teckenstorlek [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Fontfärg [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Förändring</button>
     <input type="hidden" name="trp-form-language" value="sv"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Att utforma popup-menyn är inte målet med den här artikeln, så jag föreslår att du besöker https://github.com/twistezo/netflix-subtitles-styler och kopiera hela popup.css fil till din projekt.

Användargränssnitt - 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(
flikar[0].id,
{
fil: "script.js"
},
() => {
const error = chrome.runtime.lastError;
if (error) "Fel. Flik-ID: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

I ovanstående skript laddar vi inställningar från Local Storage och kopplar dem till formulärinmatningar. Sedan skapar vi en lyssnare till skicka in event med funktioner för att spara inställningar i Local Storage och skicka dem med ett meddelande till vårt skript. Som du ser använder vi Local Storage i varje komponent. Chrome-tillägget har inte sitt eget datautrymme så den enklaste lösningen är att använda webbläsarens lokala utrymme som Local Storage. Vi använder också ofta skicka meddelande funktion. Det orsakas av Chromme-tilläggens arkitektur - de har separat logik från användargränssnittet.

Manuset

Nu är det dags att skapa script.js med logik för att manipulera Netflix undertextstilar.

Först skapar vi påMeddelande lyssnare för mottagning av meddelanden med inställningar från anknytningen.

 chrome.runtime.onMessage.addListener((meddelande, _avsändare, _sendResponse) => {
   // funktion för att manipulera stilar
 });

I samma fil skapar vi sedan funktionen för att ändra Netflix korrekta stilar till våra stilar i realtid.

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

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

För Netflix, varje gång den tar emot hela undertextmeningar byter den bara ut undertextdelen av sidans DOM. Så vi måste använda en observatörsfunktion som Mutationsobservatör, vilket kommer att utlösa vår ändraSubtitlesStyle funktion varje gång när sidans DOM har ändrats. I återuppringning funktion ser vi enkel manipulation av stilar. De kommenterade raderna innehåller information om var du kan hitta rätt stilar.

Tid att springa

Jag antar att du inte har ett utvecklarkonto i Chrome Webstore. Så för att köra det här tillägget, gå till chrome://extensions/ i Chrome, klicka på knappen Last oförpackad, välj mapp med tillägget och det är det! Gå sedan självklart till Netflix-sidan för att testa den.

Slutsatser

Som du ser är det lätt att börja skapa några tillägg som gör livet enklare. Den viktigaste delen är att förstå Google Chrome Extension delad arkitektur och kommunikation mellan komponenter. Denna subtitles styler är bara en enkel demo av vad du kan göra med Chrome Extension API.

Som du ser är det lätt att börja skapa några tillägg som gör livet enklare. Den viktigaste delen är att förstå Google Chrome Extension delade arkitektur och kommunikation mellan komponenter. Denna subtitles styler är bara en enkel demo av vad du kan göra med Chrome Extension API.

Tänk dig att förbättra din visningsupplevelse på plattformar som Netflix med hjälp av tillägg. Till exempel är den populära Netflix Party gör det möjligt för användare att titta på innehåll tillsammans i synkronisering. En ikon för förlängning i ditt verktygsfält kan ge dig snabb åtkomst till kontrollfunktioner när streaming Netflix. Tanken bakom verktyg som Netflix förlängd är att lägga till mer funktionalitet direkt i Netflix app genom Netflix-tillägg integrerad i Chrome. När du surfar på Netflix webbplatskan sådana tillägg hjälpa användare att navigera genom Netflix kategorier mer effektivt eller till och med upptäcka dolda Netflix innehåll som de kanske inte skulle ha stött på annars.

Tänk dig dessutom att kunna lägga till en anpassad profilbild till din Netflix-profil eller ha mer kontroll över undertexter och uppspelningshastighet. Allt detta kan nås direkt från Chrome webb webbläsare, vilket gör att den totala Netflix-erfarenhet mer skräddarsydda efter varje användares preferenser. Extensions förbättrar inte bara funktionerna på webbplatser som Netflix utan höjer också den övergripande användarinteraktionen, vilket gör den mer uppslukande och användarvänlig.

Användbara länkar:

• Repository med detta projekt https://github.com/twistezo/netflix-subtitles-styler
• Officiell Google-guide https://developer.chrome.com/extensions/overview
• API för Chrome-tillägg https://developer.chrome.com/extensions/api_index