window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = finestra if (w.LeadBooster) { console.warn('LeadBooster esiste già') } 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 }) }, } } })() Creare estensioni per Google Chrome con lo styler dei sottotitoli di Netflix - The Codest
The Codest
  • Chi siamo
  • Servizi
    • Sviluppo di software
      • Sviluppo Frontend
      • Sviluppo backend
    • Staff Augmentation
      • Sviluppatori Frontend
      • Sviluppatori backend
      • Ingegneri dei dati
      • Ingegneri del cloud
      • Ingegneri QA
      • Altro
    • Consulenza
      • Audit e consulenza
  • Industrie
    • Fintech e banche
    • E-commerce
    • Adtech
    • Tecnologia della salute
    • Produzione
    • Logistica
    • Automotive
    • IOT
  • Valore per
    • CEO
    • CTO
    • Responsabile della consegna
  • Il nostro team
  • Case Studies
  • Sapere come
    • Blog
    • Incontri
    • Webinar
    • Risorse
Carriera Contattate
  • Chi siamo
  • Servizi
    • Sviluppo di software
      • Sviluppo Frontend
      • Sviluppo backend
    • Staff Augmentation
      • Sviluppatori Frontend
      • Sviluppatori backend
      • Ingegneri dei dati
      • Ingegneri del cloud
      • Ingegneri QA
      • Altro
    • Consulenza
      • Audit e consulenza
  • Valore per
    • CEO
    • CTO
    • Responsabile della consegna
  • Il nostro team
  • Case Studies
  • Sapere come
    • Blog
    • Incontri
    • Webinar
    • Risorse
Carriera Contattate
Freccia indietro TORNA INDIETRO
2019-07-29
Sviluppo di software

Creare estensioni per Google Chrome con lo styler per i sottotitoli di Netflix

Lukasz Kolko

Oggi creeremo delle estensioni per Google Chrome per manipolare gli stili dei sottotitoli di Netflix in tempo reale. Troverete informazioni sulla creazione di estensioni da zero, alcuni consigli pratici e opinioni generali sull'architettura delle estensioni. Se non siete soddisfatti delle opzioni disponibili per i sottotitoli di Netflix o semplicemente volete creare rapidamente un'estensione per semplificarvi la vita, questo articolo fa per voi.

I nostri obiettivi:

  • creare una logica di estensione
  • memorizzare le impostazioni nella Memoria locale del browser
  • Autoload e attivazione delle estensioni solo sulla pagina di Netflix
  • creare un menu a comparsa
  • creare moduli con opzioni per i sottotitoli

Requisiti:

  • conoscenza di base di HTML, CSS e JavaScript

Netflix, tramite la sua API, invia ogni frase dei sottotitoli separatamente. Utilizza gli stili CSS per lo styling dei sottotitoli. Con l'accesso al DOM della pagina possiamo manipolare gli stili ricevuti con un'estensione di Chrome.

Il manifesto

Per prima cosa, dobbiamo creare il file manifest, chiamato manifest.json. Questo file informa il browser sulla configurazione dell'estensione, come i file dell'interfaccia utente, gli script di sfondo e le funzionalità che l'estensione può avere.

Ecco il manifesto completo.

 {
   "name": "Styler sottotitoli Netflix",
   "version": "1.0",
   "description": "Netflix subtitles styler",
   "autore": "twistezo",
   "permessi": ["tabs", "storage", "declarativeContent", "https://*.netflix.com/"],
   "sfondo": {
     "scripts": ["background.js"],
     "persistente": false
   },
   "page_action": {
     "default_popup": "popup.html",
     "default_icon": "logo.png"
   },
   "manifest_version": 2
 }

Come si vede, abbiamo alcune informazioni standard, come nome, versione, descrizione, homepageurl e manifestoversione.

Una delle parti importanti del manifest è la sezione dei permessi. Si tratta di un array di elementi a cui la nostra estensione può accedere.

Nel nostro caso, dobbiamo avere accesso alle schede per trovare la scheda attiva, eseguire script e inviare messaggi tra l'interfaccia utente e l'estensione. Abbiamo bisogno di storage per memorizzare le impostazioni dell'estensione nel browser e di declarativeContent per intraprendere azioni in base al contenuto della scheda. L'ultimo elemento https://*.netflix.com/ consente l'accesso dell'estensione solo al dominio netflix.com.

Le estensioni di Chrome hanno una logica separata dall'interfaccia utente, quindi è necessario avere background.scripts, che indica all'estensione dove può trovare la sua logica. persistent: false significa che questo script sarà usato solo se necessario. page_action è la sezione con la parte dell'interfaccia utente. Abbiamo qui un semplice file HTML per un menu a comparsa e un logo PNG dell'estensione.

Logica di estensione

Per prima cosa dobbiamo impostare i comportamenti runtime.onInstalled, rimuovere tutte le regole attuali (ad esempio quelle delle versioni precedenti) e dichiarare le funzioni per aggiungere nuove regole. Utilizziamo Local Storage per le impostazioni di memorizzazione, in modo da poter allocare le impostazioni predefinite dopo l'installazione dell'estensione.

Utilizzeremo tre parametri di stile dei sottotitoli:

  • vPos - posizione verticale dal basso [px]
  • fDimensione - dimensione del carattere [px]
  • fColore - colore del carattere [HEX]

Creare sfondo.js:

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

chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
// array con regole
]);
});
});
```

Il nostro obiettivo è quello di disabilitare il pulsante di estensione su tutti i domini diversi da netflix.com. Creiamo una nuova regola con L'accoppiatore di stati della pagina condizioni e dichiarare MostraAzionePagina dove verrà assegnata la nuova regola.

 {
   condizioni: [
     nuovo chrome.declarativeContent.PageStateMatcher({
       pageUrl: { hostSuffix: "netflix.com" }
     })
   ],
   azioni: [new chrome.declarativeContent.ShowPageAction()].
 }

Il passo successivo è aggiungere l'ascoltatore tabs.onUpdated, che eseguirà il nostro script durante il caricamento o l'aggiornamento della scheda attiva.

 {
   condizioni: [
     nuovo chrome.declarativeContent.PageStateMatcher({
       pageUrl: { hostSuffix: "netflix.com" }
     })
   ],
   azioni: [new chrome.declarativeContent.ShowPageAction()].
 }

Innanzitutto controlliamo che changeInfo.status abbia lo stato completo. Ciò significa che il sito web di questa scheda è stato caricato. Quindi si ottengono le impostazioni dal Local Storage e si dichiara quale script deve essere eseguito sulla scheda corrente con tabId. Infine, nella callback inviamo il messaggio con le impostazioni dall'interfaccia utente allo script.

Interfaccia utente dell'estensione

Per creare un menu a comparsa con modulo, creiamo tre file: popup.html e popup.css con strati visivi e popup.js con una logica di comunicazione tra il menu e il sistema isolato sfondo.js sceneggiatura.

Il nostro obiettivo UI:

Styler Netflix

Qui abbiamo un semplice modulo HTML con validazione integrata: 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">
       STYLER SOTTOTITOLI NETFLIX
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Posizione verticale dal basso [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Dimensione del carattere [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Colore del carattere [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Cambiamento</button>
     <input type="hidden" name="trp-form-language" value="it"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Lo stile del menu a comparsa non è l'obiettivo di questo articolo, per cui si consiglia di visitare il sito https://github.com/twistezo/netflix-subtitles-styler e copiare l'intero file popup.css nel file progetto.

Logica dell'interfaccia utente - 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) "Errore. ID scheda: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

Nello script sopra riportato, carichiamo le impostazioni dal Local Storage e le colleghiamo agli input del modulo. Poi creiamo un ascoltatore per presentare con funzioni per salvare le impostazioni nel Local Storage e inviarle tramite messaggio al nostro script. Come si vede, utilizziamo il Local Storage in ogni componente. L'estensione di Chrome non ha un proprio spazio dati, quindi la soluzione più semplice è utilizzare lo spazio locale del browser, come Local Storage. Spesso utilizziamo anche il file inviaMessaggio funzione. È causato dall'architettura delle estensioni di Chromme, che hanno una logica separata dall'interfaccia utente.

Il copione

Ora è il momento di creare script.js con la logica per manipolare gli stili dei sottotitoli di Netflix.

Per prima cosa, creiamo suMessaggio per ricevere i messaggi con le impostazioni dell'estensione.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // funzione per manipolare gli stili
 });

Poi, nello stesso file, creiamo la funzione per cambiare gli stili di Netflix con i nostri stili in tempo reale.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : l'osservatore funziona... ", "color: red;");

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

Per Netflix, ogni volta che riceve intere frasi di sottotitoli, scambia solo la parte dei sottotitoli nel DOM della pagina. Quindi dobbiamo usare una funzione osservatore come Osservatore di mutazioniche attiverà il nostro cambiaStileSottotitoli ogni volta che il DOM della pagina è cambiato. Nella sezione callback vediamo una semplice manipolazione degli stili. Le righe commentate contengono informazioni su dove trovare gli stili corretti.

Tempo di correre

Presumo che non abbiate un account di sviluppatore in Chrome Webstore. Quindi per eseguire questa estensione andate su chrome://extensions/ in Chrome, fare clic sul pulsante Carico disimballatoselezionare la cartella con l'estensione e il gioco è fatto! Poi, ovviamente, andate alla pagina di Netflix per testarlo.

Conclusioni

Come vedete, è facile iniziare a creare alcune estensioni che semplificano la vita. La parte più importante è capire l'architettura divisa di Google Chrome Extension e la comunicazione tra i componenti. Questo styler di sottotitoli è solo una semplice dimostrazione di ciò che si può fare con l'API di Chrome Extension.

Come vedete, è facile iniziare a creare alcune estensioni che semplificano la vita. La parte più importante è capire l'architettura divisa di Google Chrome Extension e la comunicazione tra i componenti. Questo styler di sottotitoli è solo una semplice dimostrazione di ciò che si può fare con l'API delle estensioni di Chrome.

Immaginate di migliorare il vostro esperienza di visione su piattaforme come Netflix con la potenza delle estensioni. Per esempio, il popolare Festa di Netflix consente agli utenti di guardare insieme i contenuti in modo sincronizzato. Un icona dell'estensione nella barra degli strumenti può fornire un accesso rapido alle funzioni di controllo quando streaming Netflix. L'idea alla base di strumenti come Netflix esteso è quello di aggiungere ulteriori funzionalità direttamente nel Applicazione Netflix attraverso il Estensione Netflix integrato in Chrome. Quando si naviga nel sito Sito web di NetflixTali estensioni possono aiutare gli utenti a navigare attraverso Categorie di Netflix in modo più efficiente o addirittura di scoprire Contenuti di Netflix che altrimenti non avrebbero potuto incontrare.

Inoltre, immaginate di poter aggiungere un immagine del profilo personalizzata al proprio profilo Netflix o di avere un maggiore controllo sui sottotitoli e sulla velocità di riproduzione. Tutto questo è accessibile direttamente dalla schermata Chrome web browser, rendendo l'intero Esperienza Netflix più su misura per le preferenze di ciascun utente. Le estensioni non solo migliorano le funzionalità di siti web come Netflix, ma migliorano anche l'interazione complessiva con l'utente, rendendola più coinvolgente e facile da usare.

Link utili:

  • Repository con questo progetto https://github.com/twistezo/netflix-subtitles-styler
  • Guida ufficiale di Google https://developer.chrome.com/extensions/overview
  • API per le estensioni di Chrome https://developer.chrome.com/extensions/api_index

Articoli correlati

Sviluppo di software

Costruire applicazioni web a prova di futuro: le intuizioni del team di esperti di The Codest

Scoprite come The Codest eccelle nella creazione di applicazioni web scalabili e interattive con tecnologie all'avanguardia, offrendo esperienze utente senza soluzione di continuità su tutte le piattaforme. Scoprite come la nostra esperienza favorisce la trasformazione digitale e il business...

IL CANCRO
Sviluppo di software

Le 10 principali aziende di sviluppo software con sede in Lettonia

Scoprite le migliori aziende di sviluppo software della Lettonia e le loro soluzioni innovative nel nostro ultimo articolo. Scoprite come questi leader tecnologici possono aiutarvi a migliorare la vostra attività.

thecodest
Soluzioni per aziende e scaleup

Essenziali di sviluppo software Java: Guida all'outsourcing di successo

Esplorate questa guida essenziale sullo sviluppo di software Java con successo outsourcing per migliorare l'efficienza, accedere alle competenze e guidare il successo del progetto con The Codest.

thecodest
Sviluppo di software

La guida definitiva all'outsourcing in Polonia

L'aumento di outsourcing in Polonia è guidato dai progressi economici, educativi e tecnologici, che favoriscono la crescita dell'IT e un clima favorevole alle imprese.

IlCodesto
Soluzioni per aziende e scaleup

Guida completa agli strumenti e alle tecniche di audit IT

Gli audit IT garantiscono sistemi sicuri, efficienti e conformi. Per saperne di più sulla loro importanza, leggete l'articolo completo.

The Codest
Jakub Jakubowicz CTO e cofondatore

Iscrivetevi alla nostra knowledge base e rimanete aggiornati sulle competenze del settore IT.

    Chi siamo

    The Codest - Società internazionale di sviluppo software con centri tecnologici in Polonia.

    Regno Unito - Sede centrale

    • Ufficio 303B, 182-184 High Street North E6 2JA
      Londra, Inghilterra

    Polonia - Poli tecnologici locali

    • Parco uffici Fabryczna, Aleja
      Pokoju 18, 31-564 Cracovia
    • Ambasciata del cervello, Konstruktorska
      11, 02-673 Varsavia, Polonia

      The Codest

    • Casa
    • Chi siamo
    • Servizi
    • Case Studies
    • Sapere come
    • Carriera
    • Dizionario

      Servizi

    • Consulenza
    • Sviluppo di software
    • Sviluppo backend
    • Sviluppo Frontend
    • Staff Augmentation
    • Sviluppatori backend
    • Ingegneri del cloud
    • Ingegneri dei dati
    • Altro
    • Ingegneri QA

      Risorse

    • Fatti e miti sulla collaborazione con un partner esterno per lo sviluppo di software
    • Dagli Stati Uniti all'Europa: Perché le startup americane decidono di trasferirsi in Europa
    • Confronto tra gli hub di sviluppo Tech Offshore: Tech Offshore Europa (Polonia), ASEAN (Filippine), Eurasia (Turchia)
    • Quali sono le principali sfide di CTO e CIO?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Condizioni di utilizzo del sito web

    Copyright © 2025 di The Codest. Tutti i diritti riservati.

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