Las extensiones de navegador son complementos de los navegadores que se utilizan para agregar estética al sitio y también brindar una experiencia de usuario óptima.
El concepto de secuencia de comandos de contenido en el desarrollo de extensiones es un conocimiento bastante útil que deben adquirir tanto los desarrolladores, ya que amplía significativamente los casos de uso de las extensiones del navegador.

Este artículo tiene como objetivo presentar qué son los guiones de contenido y cómo funcionan. También habrá un proyecto de demostración en el que se discutirán los conceptos básicos de las extensiones de Chrome y se utilizará un script de contenido simple en nuestra extensión. Con eso, comencemos.

Comprender los guiones de contenido

En primer lugar, ¿qué es un guión de contenido? Los scripts de contenido son códigos JavaScript que, al interactuar con páginas web a través de una extensión del navegador, se ejecutan para modificar la página web.

Lo logra fácilmente interactuando con el modelo de objetos del documento de la página web. El modelo de objetos de documento de la página web es la estructura sin formato de la página web determinada. La forma en que actúan los scripts de contenido de Chrome para modificar la página web en cuestión suele denominarse inyección.

Habiendo tenido una breve introducción a los scripts de contenido, luego pasaríamos a implementarlos en nuestras páginas web. Pero antes de eso, necesitamos configurar la extensión de nuestro navegador que impulsará el script.

Configurando su extensión de Chrome

Configurar un archivo de extensión de Chrome es bastante sencillo. Para obtener más extensiones de creación de referencia, a continuación se adjunta el enlace a la página de documentación de la extensión de Chrome.
Una extensión de Chrome ideal debe incluir un archivo manifest.json bien detallado que proporcione información básica predeterminada sobre la extensión de Chrome.
Además, también se incluye el archivo JS apropiado a ejecutar. Otros archivos adicionales (HTML y CSS) ayudan a darle estética a la extensión.
Con eso, pasemos a construir nuestra extensión, incorporando nuestra inyección de script de contenido. Ilustraremos el poder de los scripts de contenido creando una extensión de Chrome que muestra un botón superpuesto a cualquier página web activa a la que naveguemos.

Escribir un archivo de manifiesto

En esta sección, se resaltarán y analizarán las partes del archivo de manifiesto. Aquí está el código del archivo de manifiesto del proyecto.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

Versión del manifiesto: Generalmente se solicita la versión del manifiesto. De forma predeterminada, está configurado en 3, ya que es una actualización significativamente mejor que la versión 2.
Nombre: El nombre de la extensión también se escribe en el archivo de manifiesto. En mi caso, el proyecto se llama Botón Agregar. Esto se puede modificar para adaptarlo a las preferencias del usuario.
También se ingresa la versión de la extensión de Chrome. En nuestro caso, esta es la primera versión de la extensión, por eso se llama 1.0, las mejoras posteriores en esta extensión pueden solicitar la modificación del archivo para aumentar las versiones respectivamente.
Descripción: una descripción de lo que hace la extensión también da crédito a la extensión de Chrome ante los usuarios no técnicos de la extensión.

Los puntos planteados posteriormente son bastante convincentes a la hora de crear los guiones de contenido.

El objeto de permisos resalta la ruta para la ejecución de los scripts de contenido. Esto también evita que los scripts de contenido se ejecuten en pestañas y páginas web inesperadas. Nos permite enumerar todos los permisos que nuestra extensión de Chrome pueda requerir. Es posible que algunas extensiones de Chrome necesiten acceso al almacenamiento del navegador, a otras API de Chrome y a algunos sitios en cuestión. En nuestro caso para este proyecto, estamos limitando nuestra extensión de Chrome solo a la pestaña activa del navegador que se utiliza. Es importante tener esto implementado para reducir el riesgo de que la extensión de Chrome comprometa otras partes no utilizadas de nuestro navegador Chrome.

Luego configuraremos el campo de secuencias de comandos de contenido en nuestro archivo de manifiesto.
El campo de scripts de contenido especifica los diversos archivos de código que pretendemos inyectar en nuestra página web.
Contiene el subcampo de coincidencias que especifica la URL de la página web sobre la que queremos que actúe. Para facilitar su uso, simplemente incluimos todas las URL que permiten que esto actúe en todas las páginas web a las que accedemos. Sin embargo, puede especificar la URL que desea insertar en el valor del subcampo. Por ejemplo, www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

También se especifican los archivos JS que contienen el código de inyección. En nuestro caso,
Nuestro archivo JS se llama Content script.js. También especificamos el archivo CSS utilizado para diseñar este proyecto.

Con esto, hemos tenido una implementación en miniatura del archivo de manifiesto para nuestro proyecto. Luego pasaremos a escribir nuestro código de inyección en la sección siguiente

Crear guiones de contenido

Con el fin de mantener las cosas simples, crearíamos un botón simple que, al hacer clic en él, muestra un mensaje de alerta. Se espera que este botón se superponga a la página web existente.
Aquí está el código a continuación

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

El estilo se puede cambiar según sus preferencias; sin embargo, se ha incluido una plantilla de estilo en el repositorio de código.

aquí hay una imagen de su implementación.

Aquí está el enlace al código fuente que contiene el estilo del código.

Técnicas avanzadas y casos de uso

Hasta ahora hemos completado el proyecto. Sin embargo, para mejorar sus conocimientos, estas son algunas de las técnicas avanzadas y mejores prácticas que también puede implementar al crear guiones de contenido.

• Interacción cruzada con scripts de fondo del navegador
• Implementación de administradores de estado de datos para permitir secuencias de comandos dinámicas
• La integración de otras API externas permite la manipulación y el análisis de datos
• Emplear estrategias de almacenamiento en caché para optimizar el rendimiento de la extensión
• Integración de scripts de contenido con trabajadores de servicios

Conclusión

También puedes interactuar conmigo en mi blog y consultar mis otros artículos aquí. ¡Hasta la próxima, sigue codificando!