TORNA INDIETRO
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.
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.
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.
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.
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:
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.
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.
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.
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.
Italian 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Japanese 
Korean 
Spanish 
Dutch