Vytvoření rozšíření pro Google Chrome pomocí stylusu titulků Netflix

Naše cíle:

• vytvořit logiku rozšíření
• uložit nastavení do místního úložiště prohlížeče
• automatické načítání a aktivace rozšíření pouze na stránce Netflix.
• vytvořit vyskakovací menu
• vytvořit formuláře s možnostmi titulků

Požadavky:

• základní znalosti HTML, CSS a JavaScript

Netflix prostřednictvím svého rozhraní API odesílá každou větu s titulky zvlášť. Pro stylování titulků používá styly CSS. Díky přístupu k DOM stránky můžeme s těmito přijatými styly manipulovat pomocí rozšíření Chrome.

Projev

Nejprve musíme vytvořit soubor manifest s názvem manifest.json. Ten prohlížeči sdělí informace o nastavení rozšíření, jako jsou soubory uživatelského rozhraní, skripty na pozadí a možnosti, které rozšíření může mít.

Zde je kompletní seznam.

 {
   "name": "Netflix subtitles styler",
   "version": "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
 }

Jak vidíte, máme některé standardní informace, jako je název, verze, popis, domovská stránka.url a manifestverze.

Jednou z důležitých částí manifestu je část s oprávněními. Jedná se o pole s prvky, ke kterým může naše rozšíření přistupovat.

V našem případě potřebujeme mít přístup k kartám, abychom mohli najít aktivní kartu, spouštět skripty a posílat zprávy mezi uživatelským rozhraním a rozšířením. Potřebujeme úložiště pro ukládání nastavení rozšíření v prohlížeči a deklarativníContent pro provádění akcí v závislosti na obsahu karty. Poslední prvek https://*.netflix.com/ umožňuje přístup rozšíření pouze k doméně netflix.com.

Rozšíření Chrome mají logiku oddělenou od uživatelského rozhraní, takže potřebujeme mít background.scripts, který rozšíření říká, kde najde svou logiku. persistent: false znamená, že tento skript bude použit pouze v případě potřeby. page_action je sekce s částí uživatelského rozhraní. Máme zde jednoduchý soubor HTML pro vyskakovací nabídku a logo PNG rozšíření.

Logika rozšíření

Nejprve musíme nastavit chování runtime.onInstalled, odstranit všechna stávající pravidla (například ze starších verzí) a deklarovat funkci pro přidání nových pravidel. Pro nastavení úložiště použijeme Local Storage, abychom mohli po instalaci rozšíření přidělit výchozí nastavení.

Budeme používat tři parametry stylu titulků:

• vPos - svislá poloha zespodu [px]
• fSize - velikost písma [px]
• fColor - barva písma [HEX]

Vytvořit 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([
// pole s pravidly
]);
});
});
```

Naším cílem je zakázat tlačítko pro prodloužení na všech doménách jiných než netflix.com. Vytvoříme nové pravidlo s PageStateMatcher podmínky a prohlášení ShowPageAction kde bude přiřazeno nové pravidlo.

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

Dalším krokem je přidání posluchače tabs.onUpdated, který spustí náš skript při načítání nebo obnovování aktivní karty.

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

Nejprve zkontrolujeme, zda má soubor changeInfo.status stav complete. To znamená, že webová stránka na této kartě je načtena. Poté získáme nastavení z Místního úložiště a deklarujeme, který skript se má spustit na aktuální kartě s tabId. Nakonec v callbacku odešleme skriptovi zprávu s nastavením z uživatelského rozhraní.

Uživatelské rozhraní rozšíření

Pro vytvoření rozbalovací nabídky s formulářem vytvoříme tři soubory: popup.html a popup.css s vizuálními vrstvami a popup.js s logikou pro komunikaci mezi nabídkou a izolovanou nabídkou. background.js scénář.

Náš cíl uživatelského rozhraní:

Zde máme jednoduchý formulář HTML s integrovanou validací: 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 TITULKY STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Svislá poloha odspodu [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Velikost písma [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Barva písma [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Změna</button>
     <input type="hidden" name="trp-form-language" value="cs"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Stylování vyskakovacího menu není cílem tohoto článku, proto vám doporučuji navštívit stránku https://github.com/twistezo/netflix-subtitles-styler a zkopírujte celý popup.css do vašeho projekt.

Logika uživatelského rozhraní - 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) "Chyba. ID karty: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

Ve výše uvedeném skriptu načteme nastavení z místního úložiště a připojíme je ke vstupům formuláře. Poté vytvoříme posluchače odeslat událost s funkcemi pro uložení nastavení do místního úložiště a jejich odeslání zprávou našemu skriptu. Jak vidíte, používáme Local Storage v každé komponentě. Rozšíření Chrome nemá vlastní datový prostor, takže nejjednodušším řešením je použít místní prostor prohlížeče, jako je Local Storage. Často také používáme sendMessage funkce. Je to způsobeno architekturou rozšíření Chromme - mají oddělenou logiku od uživatelského rozhraní.

Scénář

Nyní je čas vytvořit script.js s logikou pro manipulaci se styly titulků Netflix.

Nejprve vytvoříme onMessage posluchač pro příjem zpráv s nastavením z rozšíření.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // funkce pro manipulaci se styly
 });

Ve stejném souboru pak vytvoříme funkci pro změnu správných stylů Netflix na naše styly v reálném čase.

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

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

V případě Netflixu se pokaždé, když obdrží celé věty s titulky, vymění pouze část DOM stránky s titulky. Proto musíme použít funkci pozorovatele, jako je např. MutationObserver, který bude spouštět naše changeSubtitlesStyle funkci pokaždé, když se změní DOM stránky. V zpětné volání funkce vidíme jednoduchou manipulaci se styly. V komentovaných řádcích jsou informace o tom, kde lze najít správné styly.

Čas běžet

Předpokládám, že nemáte vývojářský účet v internetovém obchodě Chrome. Chcete-li tedy toto rozšíření spustit, přejděte na chrome://extensions/ v prohlížeči Chrome klikněte na Rozbalený náklad, vyberte složku s příponou a je to! Pak samozřejmě přejděte na stránku Netflixu pro testování.

Závěry

Jak vidíte, je snadné začít vytvářet rozšíření, která vám usnadní život. Nejdůležitější je pochopit rozdělenou architekturu rozšíření Google Chrome a komunikaci mezi jednotlivými komponentami. Tento stylovač titulků je pouze jednoduchou ukázkou toho, co lze s rozhraním API rozšíření Chrome dělat.

Jak vidíte, je snadné začít vytvářet rozšíření, která vám usnadní život. Nejdůležitější je pochopit rozdělenou architekturu rozšíření Google Chrome a komunikaci mezi jednotlivými komponentami. Tento stylovač titulků je pouze jednoduchou ukázkou toho, co lze s rozhraním API rozšíření Chrome dělat.

Představte si, že byste vylepšili svůj zážitek ze sledování na platformách, jako je Netflix, pomocí rozšíření. Například populární Párty Netflix umožňuje uživatelům sledovat obsah společně a synchronizovaně. Stránka ikona rozšíření na panelu nástrojů můžete získat rychlý přístup k ovládacím prvkům, když. streamování Netflix. Myšlenka nástrojů, jako je Netflix Extended je přidat další funkce přímo do Aplikace Netflix prostřednictvím Rozšíření služby Netflix integrované v prohlížeči Chrome. Při procházení Webové stránky společnosti Netflix, taková rozšíření mohou uživatelům pomoci při navigaci prostřednictvím Kategorie služby Netflix efektivněji nebo dokonce objevovat skryté Obsah služby Netflix s nimiž by se jinak nesetkali.

Navíc si představte, že byste mohli přidat vlastní profilový obrázek k profilu Netflix nebo možnost větší kontroly nad titulky a rychlostí přehrávání. To vše je přístupné přímo z Web Chrome prohlížeče, čímž se celkový Zkušenosti se službou Netflix více přizpůsobené preferencím každého uživatele. Rozšíření nejenže rozšiřují funkce webových stránek, jako je Netflix, ale také zvyšují celkovou interakci s uživatelem, čímž ji činí více pohlcující a uživatelsky přívětivou.

Užitečné odkazy:

• Úložiště s tímto projektem https://github.com/twistezo/netflix-subtitles-styler
• Oficiální průvodce Google https://developer.chrome.com/extensions/overview
• Rozšíření Chrome API https://developer.chrome.com/extensions/api_index