window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = Fenster if (w.LeadBooster) { console.warn('LeadBooster existiert bereits') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() Google Chrome Erweiterungen mit Netflix Untertitel Styler erstellen - The Codest
Der Codest
  • Über uns
  • Dienstleistungen
    • Software-Entwicklung
      • Frontend-Softwareentwicklung
      • Backend-Softwareentwicklung
    • Staff Augmentation
      • Frontend-Entwickler
      • Backend-Entwickler
      • Daten-Ingenieure
      • Cloud-Ingenieure
      • QS-Ingenieure
      • Andere
    • IT-Beratung
      • Prüfung und Beratung
  • Branchen
    • Fintech & Bankwesen
    • E-commerce
    • Adtech
    • Gesundheitstechnik
    • Herstellung
    • Logistik
    • Automobilindustrie
    • IOT
  • Wert für
    • CEO
    • CTO
    • Delivery Manager
  • Unser Team
  • Fallstudien
  • Gewusst wie
    • Blog
    • Begegnungen
    • Webinare
    • Ressourcen
Karriere Kontakt aufnehmen
  • Über uns
  • Dienstleistungen
    • Software-Entwicklung
      • Frontend-Softwareentwicklung
      • Backend-Softwareentwicklung
    • Staff Augmentation
      • Frontend-Entwickler
      • Backend-Entwickler
      • Daten-Ingenieure
      • Cloud-Ingenieure
      • QS-Ingenieure
      • Andere
    • IT-Beratung
      • Prüfung und Beratung
  • Wert für
    • CEO
    • CTO
    • Delivery Manager
  • Unser Team
  • Fallstudien
  • Gewusst wie
    • Blog
    • Begegnungen
    • Webinare
    • Ressourcen
Karriere Kontakt aufnehmen
Pfeil zurück ZURÜCK
2019-07-29
Software-Entwicklung

Google Chrome Erweiterungen mit Netflix Untertitel Styler erstellen

Lukasz Kolko

Heute werden wir Google Chrome-Erweiterungen für die Bearbeitung von Netflix-Untertitelstilen in Echtzeit erstellen. Sie werden Informationen über die Erstellung von Erweiterungen von Grund auf, einige praktische Ratschläge und allgemeine Ansichten über die Architektur von Erweiterungen finden. Wenn Sie mit den verfügbaren Optionen für Netflix-Untertitel nicht zufrieden sind oder einfach nur schnell eine Erweiterung erstellen möchten, um sich das Leben zu erleichtern, ist dieser Artikel genau das Richtige für Sie.

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:

Netflix-Styler

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

Ähnliche Artikel

Software-Entwicklung

Zukunftssichere Web-Apps bauen: Einblicke vom The Codest-Expertenteam

Entdecken Sie, wie sich The Codest bei der Erstellung skalierbarer, interaktiver Webanwendungen mit Spitzentechnologien auszeichnet, die nahtlose Benutzererfahrungen auf allen Plattformen bieten. Erfahren Sie, wie unsere Expertise die digitale Transformation und...

DAS SCHÖNSTE
Software-Entwicklung

Top 10 Softwareentwicklungsunternehmen in Lettland

Erfahren Sie in unserem neuesten Artikel mehr über die besten Softwareentwicklungsunternehmen Lettlands und ihre innovativen Lösungen. Entdecken Sie, wie diese Technologieführer Ihr Unternehmen voranbringen können.

thecodest
Enterprise & Scaleups Lösungen

Grundlagen der Java-Softwareentwicklung: Ein Leitfaden für erfolgreiches Outsourcing

Entdecken Sie diesen wichtigen Leitfaden zum erfolgreichen Outsourcing der Java-Softwareentwicklung, um die Effizienz zu steigern, auf Fachwissen zuzugreifen und den Projekterfolg mit The Codest voranzutreiben.

thecodest
Software-Entwicklung

Der ultimative Leitfaden für Outsourcing in Polen

Der Anstieg des Outsourcings in Polen wird durch wirtschaftliche, bildungspolitische und technologische Fortschritte angetrieben, die das IT-Wachstum und ein unternehmensfreundliches Klima fördern.

TheCodest
Enterprise & Scaleups Lösungen

Der vollständige Leitfaden für IT-Audit-Tools und -Techniken

IT-Audits gewährleisten sichere, effiziente und gesetzeskonforme Systeme. Erfahren Sie mehr über ihre Bedeutung, indem Sie den vollständigen Artikel lesen.

Der Codest
Jakub Jakubowicz CTO & Mitbegründer

Abonnieren Sie unsere Wissensdatenbank und bleiben Sie auf dem Laufenden über das Fachwissen aus dem IT-Sektor.

    Über uns

    The Codest - Internationales Software-Unternehmen mit technischen Zentren in Polen.

    Vereinigtes Königreich - Hauptsitz

    • Büro 303B, 182-184 High Street North E6 2JA
      London, England

    Polen - Lokale Tech-Hubs

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Kraków
    • Brain Embassy, Konstruktorska
      11, 02-673 Warszawa, Polen

      Der Codest

    • Startseite
    • Über uns
    • Dienstleistungen
    • Fallstudien
    • Gewusst wie
    • Karriere
    • Wörterbuch

      Dienstleistungen

    • IT-Beratung
    • Software-Entwicklung
    • Backend-Softwareentwicklung
    • Frontend-Softwareentwicklung
    • Staff Augmentation
    • Backend-Entwickler
    • Cloud-Ingenieure
    • Daten-Ingenieure
    • Andere
    • QS-Ingenieure

      Ressourcen

    • Fakten und Mythen über die Zusammenarbeit mit einem externen Softwareentwicklungspartner
    • Aus den USA nach Europa: Warum entscheiden sich amerikanische Start-ups für eine Verlagerung nach Europa?
    • Tech Offshore Development Hubs im Vergleich: Tech Offshore Europa (Polen), ASEAN (Philippinen), Eurasien (Türkei)
    • Was sind die größten Herausforderungen für CTOs und CIOs?
    • Der Codest
    • Der Codest
    • Der Codest
    • Privacy policy
    • Website terms of use

    Urheberrecht © 2025 von The Codest. Alle Rechte vorbehalten.

    de_DEGerman
    en_USEnglish sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek de_DEGerman