Crear extensiones de Google Chrome con el estilizador de subtítulos de Netflix

Nuestros objetivos:

• crear lógica de ampliación
• almacenar la configuración en el almacenamiento local del navegador
• autocargar y activar extensiones sólo en la página de Netflix
• crear menú emergente
• crear formularios con opciones de subtítulos

Requisitos:

• conocimientos básicos de HTML, CSS y JavaScript

Mediante su API, Netflix envía cada frase de los subtítulos por separado. Utiliza estilos CSS para dar estilo a los subtítulos. Con acceso al DOM de la página podemos manipular los estilos recibidos con la extensión de Chrome.

El manifiesto

En primer lugar, tenemos que crear el archivo de manifiesto llamado manifest.json. Esto le dice al navegador acerca de la configuración de la extensión, tales como los archivos de interfaz de usuario, scripts de fondo y las capacidades de la extensión podría tener.

Aquí tiene un manifiesto completo.

 {
   "nombre": "Estilizador de subtítulos de Netflix",
   "version": "1.0",
   "description": "Estilizador de subtítulos de Netflix",
   "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
 }

Como puede ver, tenemos algunos datos estándar, como el nombre, la versión, la descripción, la página de iniciourl y manifiestoversión.

Una de las partes importantes del manifiesto es la sección de permisos. Se trata de un array con elementos a los que nuestra extensión puede acceder.

En nuestro caso, necesitamos tener acceso a las pestañas para encontrar la pestaña activa, ejecutar scripts y enviar mensajes entre la UI y la extensión. Necesitamos almacenamiento para guardar la configuración de la extensión en el navegador y declarativeContent para realizar acciones en función del contenido de la pestaña. El último elemento https://*.netflix.com/ permite el acceso de la extensión sólo al dominio netflix.com.

Las extensiones de Chrome tienen una lógica separada de la interfaz de usuario, por lo que necesitamos tener background.scripts, que indica a la extensión dónde puede encontrar su lógica. persistent: false significa que este script se utilizará sólo si es necesario. page_action es la sección con la parte de interfaz de usuario. Aquí tenemos un simple archivo HTML para un menú emergente y un logo PNG de la extensión.

Lógica de ampliación

Primero tenemos que configurar los comportamientos runtime.onInstalled, eliminar cualquier regla actual (por ejemplo de versiones anteriores) y declarar la función para añadir nuevas reglas. Usamos Local Storage para las configuraciones de almacenamiento para que podamos asignar configuraciones predeterminadas después de que se instale la extensión.

Utilizaremos tres parámetros de estilo de subtítulos:

• vPos - posición vertical desde abajo [px]
• fSize - tamaño de letra [px]
• fColor - color de fuente [HEX]

Cree fondo.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 con reglas
]);
});
});
```

El objetivo de nuestra regla es desactivar el botón de extensión en todos los dominios que no sean netflix.com. Creamos una nueva regla con PageStateMatcher condiciones y declarar MostrarPáginaAcción donde se asignará la nueva regla.

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

El siguiente paso es añadir el listener tabs.onUpdated, que ejecutará nuestro script mientras se carga o refresca la pestaña activa.

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

En primer lugar comprobamos que changeInfo.status tiene el estado completo. Esto significa que el sitio web en esta pestaña está cargado. Luego obtenemos la configuración del Almacenamiento Local y declaramos qué script debe ejecutarse en la pestaña actual con tabId. Finalmente, en el callback enviamos el mensaje con la configuración desde la UI al script.

Extensión de la interfaz de usuario

Para crear un menú emergente de extensión con formulario, creamos tres archivos: popup.html y popup.css con capas visuales y popup.js con la lógica para la comunicación entre el menú y aislado fondo.js guión.

Nuestro objetivo de IU:

Aquí tenemos un simple formulario HTML con validación incorporada: 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">Posición vertical desde abajo [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Tamaño de fuente [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Color de fuente [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Cambia</button>
     <input type="hidden" name="trp-form-language" value="es"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Estilizar el menú emergente no es el objetivo de este artículo, así que te sugiero que visites https://github.com/twistezo/netflix-subtitles-styler y copiar todo el popup.css en su proyecto.

Lógica de IU - 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 = datos[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,
{
archivo: "script.js"
},
() => {
const error = chrome.runtime.lastError;
if (error) "Error. ID de pestaña: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

En el script anterior, cargamos la configuración del almacenamiento local y la adjuntamos a las entradas del formulario. Luego creamos un listener para enviar con funciones para guardar las configuraciones en el Almacenamiento Local y enviarlas por mensaje a nuestro script. Como ves, usamos Local Storage en cada componente. La extensión de Chrome no tiene su propio espacio de datos así que la solución más simple es usar el espacio local del navegador como Local Storage. También utilizamos a menudo el enviarMensaje función. Se debe a la arquitectura de las extensiones Chromme, que tienen una lógica independiente de la interfaz de usuario.

El guión

Ahora es el momento de crear script.js con lógica para manipular los estilos de subtítulos de Netflix.

En primer lugar, creamos onMessage listener para recibir mensajes con configuraciones de la extensión.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // función para manipular estilos
 });

Luego en el mismo archivo creamos la función para cambiar los estilos propios de Netflix a nuestros estilos en tiempo real.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : el observador funciona... ", "color: rojo;");

callback = () => {
// .player-timedText
const subtitles = document.querySelector(".player-timedtext");
if (subtítulos) {
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 (segundoContenedorNiño) {
      for (const span of segundoContenedorInfantil.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, {
subárbol: true
atributos: false
childList: true
});
};
```

En el caso de Netflix, cada vez que recibe frases enteras de subtítulos intercambia sólo la parte de subtítulos del DOM de la página. Así que tenemos que utilizar una función de observador como Observador de mutacionesque activará nuestro cambiarEstiloSubtítulos cada vez que cambia el DOM de la página. En la función devolución de llamada vemos una simple manipulación de estilos. Las líneas comentadas tienen información sobre dónde encontrar estilos adecuados.

Hora de correr

Supongo que no tienes una cuenta de desarrollador en Chrome Webstore. Así que para ejecutar esta extensión vaya a chrome://extensions/ en su navegador Chrome, haga clic en el botón Carga desembaladaselecciona la carpeta con la extensión y ¡ya está! Luego, obviamente ir a la página de Netflix para probarlo.

Conclusiones

Como ves, es fácil empezar a crear algunas extensiones que te hagan la vida más fácil. La parte más importante es entender la arquitectura dividida de las extensiones de Google Chrome y la comunicación entre los componentes. Este estilizador de subtítulos es sólo una simple demostración de lo que se puede hacer con la API de extensiones de Chrome.

Como ves, es fácil empezar a crear algunas extensiones que te hagan la vida más fácil. La parte más importante es entender la arquitectura dividida de las extensiones de Google Chrome y la comunicación entre los componentes. Este estilizador de subtítulos es sólo una simple demostración de lo que se puede hacer con la API de extensiones de Chrome.

Imagine mejorar su experiencia visual en plataformas como Netflix con el poder de las extensiones. Por ejemplo, el popular Fiesta Netflix permite a los usuarios ver contenidos juntos de forma sincronizada. Un icono de extensión en su barra de herramientas puede proporcionarle un acceso rápido a las funciones de control cuando Netflix en streaming. La idea detrás de herramientas como Netflix ampliado es añadir más funciones directamente en el Aplicación Netflix a través de la Ampliación de Netflix integrado en Chrome. Al navegar por Sitio web de Netflixestas extensiones pueden ayudar a los usuarios a navegar por Categorías de Netflix más eficaz o incluso descubrir Contenidos de Netflix que de otro modo no encontrarían.

Además, imagínese poder añadir un foto de perfil personalizada a tu perfil de Netflix o tener más control sobre los subtítulos y la velocidad de reproducción. A todo ello se puede acceder directamente desde la Web de Chrome navegador, haciendo que el Experiencia Netflix más adaptadas a las preferencias de cada usuario. Las extensiones no sólo mejoran las funcionalidades de sitios web como Netflix, sino que también elevan la interacción general con el usuario, haciéndola más inmersiva y fácil de usar.

Enlaces útiles:

• Repositorio con este proyecto https://github.com/twistezo/netflix-subtitles-styler
• Guía oficial de Google https://developer.chrome.com/extensions/overview
• API de extensión de Chrome https://developer.chrome.com/extensions/api_index