Tworzenie rozszerzeń Google Chrome ze stylizatorem napisów Netflix

Nasze cele:

• tworzenie logiki rozszerzenia
• zapisywanie ustawień w lokalnej pamięci przeglądarki
• automatyczne ładowanie i aktywowanie rozszerzeń tylko na stronie Netflix
• tworzenie menu podręcznego
• tworzenie formularzy z opcjami napisów

Wymagania:

• podstawowa wiedza na temat HTML, CSS i JavaScript

Netflix przez swój interfejs API wysyła każde zdanie napisów osobno. Używa stylów CSS do stylizacji napisów. Mając dostęp do DOM strony, możemy manipulować otrzymanymi stylami za pomocą rozszerzenia Chrome.

Manifest

Po pierwsze, musimy utworzyć plik manifestu o nazwie manifest.json. Informuje on przeglądarkę o konfiguracji rozszerzenia, takich jak pliki interfejsu użytkownika, skrypty tła i możliwości, jakie może mieć rozszerzenie.

Oto kompletny manifest.

 {
   "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 widać, mamy kilka standardowych informacji, takich jak nazwa, wersja, opis, strona głównaurl i manifestwersja.

Jedną z ważnych części manifestu jest sekcja uprawnień. Jest to tablica z elementami, do których nasze rozszerzenie może uzyskać dostęp.

W naszym przypadku musimy mieć dostęp do kart, aby znaleźć aktywną kartę, wykonywać skrypty i wysyłać wiadomości między interfejsem użytkownika a rozszerzeniem. Potrzebujemy storage do przechowywania ustawień rozszerzenia w przeglądarce i declarativeContent do podejmowania akcji w zależności od zawartości karty. Ostatni element https://*.netflix.com/ umożliwia rozszerzeniu dostęp tylko do domeny netflix.com.

Rozszerzenia Chrome mają oddzielną logikę od interfejsu użytkownika, więc musimy mieć background.scripts, który mówi rozszerzeniu, gdzie może znaleźć swoją logikę. persistent: false oznacza, że ten skrypt będzie używany tylko w razie potrzeby. page_action to sekcja z częścią interfejsu użytkownika. Mamy tutaj prosty plik HTML dla menu podręcznego i logo PNG rozszerzenia.

Logika rozszerzenia

Najpierw musimy skonfigurować zachowanie runtime.onInstalled, usunąć wszelkie bieżące reguły (na przykład ze starszych wersji) i zadeklarować funkcję dodawania nowych reguł. Używamy Local Storage do przechowywania ustawień, dzięki czemu możemy przypisać ustawienia domyślne po zainstalowaniu rozszerzenia.

Będziemy używać trzech parametrów stylu napisów:

• vPos - pozycja pionowa od dołu [px]
• fSize - rozmiar czcionki [px]
• fColor - kolor czcionki [HEX]

Utwórz 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([
// tablica z regułami
]);
});
});
```

Naszym głównym celem jest wyłączenie przycisku rozszerzenia we wszystkich domenach innych niż netflix.com. Tworzymy nową regułę z PageStateMatcher warunki i deklaracja ShowPageAction gdzie zostanie przypisana nowa reguła.

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

Kolejnym krokiem jest dodanie listenera tabs.onUpdated, który wykona nasz skrypt podczas ładowania lub odświeżania aktywnej zakładki.

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

Najpierw sprawdzamy, czy changeInfo.status ma status complete. Oznacza to, że strona na tej karcie jest załadowana. Następnie pobieramy ustawienia z Local Storage i deklarujemy, który skrypt powinien zostać uruchomiony na bieżącej zakładce z tabId. Wreszcie, w wywołaniu zwrotnym wysyłamy wiadomość z ustawieniami z interfejsu użytkownika do skryptu.

Interfejs użytkownika rozszerzenia

Aby utworzyć rozszerzenie menu podręcznego z formularzem, tworzymy trzy pliki: popup.html i popup.css z warstwami wizualnymi i popup.js z logiką do komunikacji między menu a odizolowanymi urządzeniami background.js scenariusz.

Nasz cel UI:

Tutaj mamy prosty formularz HTML z wbudowaną walidacją: 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 SUBTITLES STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Pozycja pionowa od dołu [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Rozmiar czcionki [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Kolor czcionki [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Zmiana</button>
     <input type="hidden" name="trp-form-language" value="pl"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Stylizacja menu podręcznego nie jest celem tego artykułu, więc proponuję odwiedzić stronę https://github.com/twistezo/netflix-subtitles-styler i skopiować całość popup.css do pliku projekt.

Logika interfejsu użytkownika - 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) "Błąd. ID zakładki: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

W powyższym skrypcie ładujemy ustawienia z Local Storage i dołączamy je do wejść formularza. Następnie tworzymy listener do przedkładać z funkcjami zapisywania ustawień do Local Storage i wysyłania ich za pomocą wiadomości do naszego skryptu. Jak widać, używamy Local Storage w każdym komponencie. Rozszerzenie Chrome nie ma własnej przestrzeni danych, więc najprostszym rozwiązaniem jest użycie lokalnej przestrzeni przeglądarki, takiej jak Local Storage. Często korzystamy również z sendMessage funkcja. Jest to spowodowane architekturą rozszerzeń Chromme - mają one oddzielną logikę od interfejsu użytkownika.

Scenariusz

Teraz nadszedł czas na stworzenie script.js z logiką do manipulowania stylami napisów Netflix.

Najpierw tworzymy onMessage listener do odbierania wiadomości z ustawieniami z rozszerzenia.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // funkcja do manipulowania stylami
 });

Następnie w tym samym pliku tworzymy funkcję do zmiany odpowiednich stylów Netflix na nasze style w czasie rzeczywistym.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : obserwator działa... ", "color: red;");

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

W przypadku Netflixa, za każdym razem, gdy otrzymuje całe zdania napisów, zamienia tylko część napisów w DOM strony. Musimy więc użyć funkcji obserwatora, takiej jak MutationObserverktóry będzie uruchamiał nasz changeSubtitlesStyle za każdym razem, gdy DOM strony ulegnie zmianie. W callback widzimy prostą manipulację stylami. Zakomentowane linie zawierają informacje o tym, gdzie można znaleźć odpowiednie style.

Czas na bieg

Zakładam, że nie posiadasz konta deweloperskiego w Chrome Webstore. Aby uruchomić to rozszerzenie, przejdź do chrome://extensions/ w przeglądarce Chrome, kliknij ikonę Ładunek rozpakowany, wybierz folder z rozszerzeniem i to wszystko! Następnie oczywiście przejdź do strony Netflix, aby ją przetestować.

Wnioski

Jak widać, łatwo jest zacząć tworzyć rozszerzenia, które ułatwiają życie. Najważniejszą częścią jest zrozumienie podzielonej architektury rozszerzeń Google Chrome i komunikacji między komponentami. Ten styler napisów jest tylko prostą demonstracją tego, co można zrobić za pomocą interfejsu API rozszerzeń Chrome.

Jak widać, łatwo jest zacząć tworzyć rozszerzenia, które ułatwiają życie. Najważniejszą częścią jest zrozumienie podzielonej architektury rozszerzeń Google Chrome i komunikacji między komponentami. Ten styler napisów jest tylko prostą demonstracją tego, co można zrobić za pomocą interfejsu API rozszerzeń Chrome.

Wyobraź sobie ulepszenie wrażenia z oglądania na platformach takich jak Netflix z mocą rozszerzeń. Na przykład popularna aplikacja Netflix Party umożliwia użytkownikom wspólne oglądanie treści w synchronizacji. An ikona rozszerzenia na pasku narzędzi może zapewnić szybki dostęp do funkcji sterowania, gdy streaming Netflix. Idea stojąca za narzędziami takimi jak Netflix Extended jest dodanie większej funkcjonalności bezpośrednio do Aplikacja Netflix przez Rozszerzenie Netflix zintegrowana z Chrome. Podczas przeglądania Witryna NetflixTakie rozszerzenia mogą pomóc użytkownikom w nawigacji przez Kategorie Netflix bardziej wydajne, a nawet odkrywanie ukrytych Zawartość Netflix na które mogliby nie natrafić w inny sposób.

Co więcej, wyobraź sobie możliwość dodania niestandardowe zdjęcie profilowe do profilu Netflix lub mieć większą kontrolę nad napisami i szybkością odtwarzania. Wszystko to jest dostępne bezpośrednio z poziomu aplikacji Chrome web przeglądarka, dzięki czemu ogólna Doświadczenie z Netflix bardziej dostosowane do preferencji każdego użytkownika. Rozszerzenia nie tylko zwiększają funkcjonalność witryn takich jak Netflix, ale także poprawiają ogólną interakcję z użytkownikiem, czyniąc ją bardziej wciągającą i przyjazną dla użytkownika.

Przydatne linki:

• Repozytorium z tym projektem https://github.com/twistezo/netflix-subtitles-styler
• Oficjalny przewodnik Google https://developer.chrome.com/extensions/overview
• Interfejs API rozszerzeń Chrome https://developer.chrome.com/extensions/api_index