Google Chrome Erweiterungen mit Netflix Untertitel Styler erstellen

Unsere Ziele:

• Erweiterungslogik erstellen
• Einstellungen im lokalen Speicher des Browsers speichern
• Autoload und Aktivierung von Erweiterungen nur auf der Netflix-Seite
• Popup-Menü erstellen
• Formulare mit Untertiteloptionen erstellen

Anforderungen:

• Grundkenntnisse über HTML, CSS und JavaScript

Netflix sendet über seine API jeden Untertitelsatz einzeln. Es verwendet CSS-Stile für die Gestaltung von Untertiteln. Mit Zugriff auf das DOM der Seite können wir diese empfangenen Stile mit der Chrome-Erweiterung manipulieren.

Das Manifest

Zunächst müssen wir eine Manifestdatei namens manifest.json erstellen. Sie informiert den Browser über die Einrichtung der Erweiterung, z. B. über die UI-Dateien, die Hintergrundskripte und die Fähigkeiten, die die Erweiterung haben könnte.

Hier ist ein vollständiges Manifest.

 {
   "Name": "Netflix Untertitel Styler",
   "version": "1.0",
   "description": "Netflix Untertitel Styler",
   "Autor": "twistezo",
   "permissions": ["tabs", "storage", "declarativeContent", "https://*.netflix.com/"],
   "Hintergrund": {
     "scripts": ["background.js"],
     "persistent": false
   },
   "page_action": {
     "default_popup": "popup.html",
     "default_icon": "logo.png"
   },
   "manifest_version": 2
 }

Wie Sie sehen, haben wir einige Standardinformationen, wie Name, Version, Beschreibung, Homepageurl und manifestVersion.

Einer der wichtigsten Teile des Manifests ist der Abschnitt "Berechtigungen". Dies ist ein Array mit Elementen, auf die unsere Erweiterung zugreifen kann.

In unserem Fall benötigen wir Zugriff auf Registerkarten, um die aktive Registerkarte zu finden, Skripte auszuführen und Nachrichten zwischen der Benutzeroberfläche und der Erweiterung zu senden. Wir brauchen einen Speicher für die Einstellungen der Erweiterung im Browser und declarativeContent, um abhängig vom Inhalt der Registerkarte Maßnahmen zu ergreifen. Das letzte Element https://*.netflix.com/ erlaubt der Erweiterung nur den Zugriff auf die netflix.com-Domäne.

Chrome-Erweiterungen haben eine von der Benutzeroberfläche getrennte Logik, daher brauchen wir background.scripts, das der Erweiterung mitteilt, wo sie ihre Logik finden kann. persistent: false bedeutet, dass dieses Skript nur bei Bedarf verwendet wird. page_action ist der Abschnitt mit dem Benutzeroberflächenteil. Wir haben hier eine einfache HTML-Datei für ein Popup-Menü und ein PNG-Logo für eine Erweiterung.

Logik der Erweiterung

Zunächst müssen wir das Verhalten runtime.onInstalled einrichten, alle aktuellen Regeln (z. B. aus älteren Versionen) entfernen und eine Funktion zum Hinzufügen neuer Regeln deklarieren. Wir verwenden Local Storage für die Speichereinstellungen, damit wir nach der Installation der Erweiterung Standardeinstellungen zuweisen können.

Wir werden drei Parameter für die Gestaltung von Untertiteln verwenden:

• vPos - vertikale Position von unten [px]
• fSize - Schriftgröße [px]
• fColor - Schriftfarbe [HEX]

erstellen. hintergrund.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 mit Regeln
]);
});
});
```

Unser Ziel ist es, die Erweiterungsschaltfläche auf allen anderen Domänen zu deaktivieren. netflix.de. Wir erstellen eine neue Regel mit PageStateMatcher Bedingungen und Erklärungen ShowPageAction wo die neue Regel zugewiesen wird.

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

Der nächste Schritt ist das Hinzufügen des Listeners tabs.onUpdated, der unser Skript beim Laden oder Aktualisieren der aktiven Registerkarte ausführt.

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

Zunächst überprüfen wir, ob changeInfo.status den Status "vollständig" hat. Dies bedeutet, dass die Website auf dieser Registerkarte geladen ist. Dann holen wir die Einstellungen aus dem lokalen Speicher und geben mit tabId an, welches Skript auf der aktuellen Registerkarte ausgeführt werden soll. Schließlich senden wir im Callback die Nachricht mit den Einstellungen aus der Benutzeroberfläche an das Skript.

Erweiterung UI

Um ein Popup-Menü mit Formular zu erstellen, müssen wir drei Dateien erstellen: popup.html und popup.css mit visuellen Ebenen und popup.js mit Logik für die Kommunikation zwischen dem Menü und den isolierten hintergrund.js Drehbuch.

Unser UI-Ziel:

Hier haben wir ein einfaches HTML-Formular mit eingebauter Validierung: 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 UNTERTITEL STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Vertikale Position von unten [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Schriftgröße [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Schriftfarbe [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Ändern Sie</button>
     <input type="hidden" name="trp-form-language" value="de"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Die Gestaltung des Popup-Menüs ist nicht das Ziel dieses Artikels, daher schlage ich vor, Sie besuchen https://github.com/twistezo/netflix-subtitles-styler und kopieren Sie die gesamte popup.css Datei in Ihr 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,
{
file: "script.js"
},
() => {
const error = chrome.runtime.lastError;
if (error) "Fehler. Tab ID: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

Im obigen Skript werden die Einstellungen aus dem lokalen Speicher geladen und den Formulareingaben zugeordnet. Dann erstellen wir einen Listener für einreichen Ereignis mit Funktionen für die Speicherung von Einstellungen im lokalen Speicher und senden sie per Nachricht an unser Skript. Wie Sie sehen, verwenden wir Local Storage in jeder Komponente. Die Chrome-Erweiterung hat keinen eigenen Datenbereich, so dass die einfachste Lösung darin besteht, den lokalen Speicherbereich des Browsers wie Local Storage zu verwenden. Wir verwenden auch oft die sendMessage Funktion. Das liegt an der Architektur der Chromme-Erweiterungen - sie haben eine von der Benutzeroberfläche getrennte Logik.

Das Drehbuch

Jetzt ist es an der Zeit, eine script.js mit Logik für die Bearbeitung von Netflix-Untertitelstilen.

Zunächst erstellen wir onMessage Listener für den Empfang von Nachrichten mit Einstellungen von der Nebenstelle.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // Funktion zur Manipulation von Stilen
 });

Dann erstellen wir in derselben Datei die Funktion, mit der wir die Netflix-Stile in Echtzeit in unsere Stile umwandeln können.

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

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

Bei Netflix wird jedes Mal, wenn ganze Untertitel-Sätze empfangen werden, nur der Untertitel-Teil des Seiten-DOMs ausgetauscht. Wir müssen also eine Beobachterfunktion verwenden wie MutationObserverdie unser Projekt auslösen wird. changeSubtitlesStyle Funktion jedes Mal, wenn sich das DOM der Seite geändert hat. In der Rückruf Funktion sehen wir eine einfache Manipulation von Stilen. Die kommentierten Zeilen enthalten Informationen darüber, wo Sie die richtigen Stile finden können.

Zeit zum Laufen

Ich gehe davon aus, dass Sie kein Entwicklerkonto im Chrome Webstore haben. Um diese Erweiterung auszuführen, gehen Sie zu chrome://extensions/ in Ihrem Chrome, klicken Sie auf die Ladung unverpacktWählen Sie den Ordner mit der Erweiterung aus, und das war's! Dann gehen Sie natürlich auf die Netflix-Seite, um es zu testen.

Schlussfolgerungen

Wie Sie sehen, ist es einfach, einige Erweiterungen zu erstellen, die das Leben einfacher machen. Das Wichtigste dabei ist, die Architektur von Google Chrome Extension und die Kommunikation zwischen den Komponenten zu verstehen. Dieser Untertitel-Styler ist nur eine einfache Demo dessen, was man mit der Chrome Extension API machen kann.

Wie Sie sehen, ist es einfach, einige Erweiterungen zu erstellen, die das Leben leichter machen. Das Wichtigste dabei ist, die Architektur der Google Chrome Extension und die Kommunikation zwischen den Komponenten zu verstehen. Dieser Styler für Untertitel ist nur ein einfaches Beispiel dafür, was man mit der Chrome Extension API machen kann.

Stellen Sie sich vor, Sie verbessern Ihr Fernseherlebnis auf Plattformen wie Netflix mit der Kraft von Erweiterungen. Zum Beispiel ist die beliebte Netflix-Party ermöglicht es den Nutzern, Inhalte gemeinsam und synchronisiert zu betrachten. Eine Erweiterungssymbol in Ihrer Symbolleiste können Sie schnell auf Kontrollfunktionen zugreifen, wenn Netflix-Streaming. Die Idee hinter Tools wie Netflix Erweitert ist es, mehr Funktionalität direkt in die Netflix-App durch die Netflix-Erweiterung in Chrome integriert. Beim Durchsuchen der Netflix-Websitekönnen solche Erweiterungen den Nutzern bei der Navigation durch Netflix-Kategorien effizienter zu gestalten oder sogar versteckte Netflix-Inhalte auf die sie sonst vielleicht nicht gestoßen wären.

Stellen Sie sich außerdem vor, Sie könnten eine Benutzerdefiniertes Profilbild zu Ihrem Netflix-Profil hinzufügen oder mehr Kontrolle über die Untertitel und die Abspielgeschwindigkeit haben. Auf all diese Funktionen können Sie direkt über die Chrome web Browser, wodurch die gesamte Netflix-Erfahrung mehr auf die Vorlieben der einzelnen Nutzer zugeschnitten. Erweiterungen erweitern nicht nur die Funktionen von Websites wie Netflix, sondern verbessern auch die gesamte Benutzerinteraktion, so dass sie noch intensiver und benutzerfreundlicher wird.

Nützliche Links:

• Repository mit diesem Projekt https://github.com/twistezo/netflix-subtitles-styler
• Offizieller Google-Leitfaden https://developer.chrome.com/extensions/overview
• Chrome-Erweiterung API https://developer.chrome.com/extensions/api_index