Google Chrome te permite mejorar tu experiencia de navegación añadiendo funciones personalizadas, llamadas extensiones, dentro de la ventana del navegador. Hay una variedad de extensiones disponibles en Chrome Web Store y de desarrolladores externos, pero también puedes crear tus propias extensiones usando HTML, CSS y JavaScript simples.

Las mejores extensiones de Chrome destacadas
Relacionado
Las mejores extensiones de Chrome en 2023

¡Aquí tienes algunas de las mejores extensiones de Chrome para ayudarte a mejorar tu productividad o simplemente habilitar funciones más interesantes en los sitios web!

¿Qué es una extensión de Chrome?

Las extensiones de Chrome mejoran la funcionalidad de la ventana de tu navegador al agregar herramientas personalizadas. Lasmejores extensiones de Chrome para 2023incluyen herramientas para detectar errores ortográficos y gramaticales, encontrar descuentos mientras compras en línea y completar automáticamente los desafíos captcha. Incluso puedes usar extensiones para administrar el navegador Chrome en sí, como reorganizar o buscar dentro de las pestañas abiertas en la ventana actual. Cualquier función disponible a través de unaAPI webes válida para las extensiones.

Acceder a las extensiones de Chrome

Si tienes alguna extensión cargada en tu ventana actual de Chrome, verás un iconode una pieza de rompecabezasa la derecha de la barra de búsqueda. Puedes ejecutar una extensión haciendo clic en el icono correspondiente en la ventana emergente, o puedes "anclar" extensiones a la barra de herramientas para acceder a ellas más rápidamente.

También puede encontrar el administrador de extensiones seleccionandoExtensionesen el menú de tres puntos en la parte superior derecha de la ventana del navegador.

Componentes necesarios para una extensión de Chrome

Escribir tu propia extensión de Chrome no es muy diferente a escribir cualquier otra aplicación web; solo debes asegurarte de incluir los componentes necesarios. Deberás crear varios archivos con uneditor de textoy guardarlos en una sola carpeta en tu PC.

Manifiesto

El manifiesto de extensión detalla metadatos importantes y especifica los recursos, permisos y archivos que se incluirán. Este es el único componente que tiene un nombre de archivo obligatorio:manifest.json. Como mínimo, el manifiesto define el nombre de la extensión, la versión, la descripción y la acción predeterminada, pero también se pueden incluir varias funciones adicionales.El material de referencia de Chrome para desarrolladores de Googleproporciona una descripción detallada del formato de archivo, así como algunos ejemplos. El estándar para este formato de archivo ha evolucionado en los últimos años, pero a partir de junio de 2024,se requerirá la versión 3 del manifiesto.

Icono

Todas las extensiones tienen un ícono en la barra de herramientas de Chrome. Si no proporciona una imagen de ícono, se utilizará la primera letra del nombre de la extensión. Para especificar íconos personalizados, debe definir la ruta en el manifiesto e incluir los archivos de imagen junto con el resto de los componentes de la extensión. Todos los íconos deben ser imágenes cuadradas de 16 x 16 píxeles independientes del dispositivo (DIP).

Archivos de código fuente

Además del manifiesto y el icono, debes tener los archivos de código fuente necesarios ubicados en la misma carpeta para tu extensión. Estos detalles se basarán en la función específica que intentas implementar. Si quieres que aparezca una ventana emergente cuando un usuario haga clic en la extensión, tendrás que incluir el archivo HTML y la información CSS. Si quieres que la extensión ejecute un script, tendrás que incluir el script necesario en la carpeta.

Ejemplo de extensión de Chrome

Para ilustrar cómo instalar una extensión simple de Chrome, los archivos a continuación crearán una ventana emergente con una cita inspiradora aleatoria deQuotable.

índice.html

<!DOCTYPE html>
<html>
<cabeza>
<title>Cita del momento</title>
<meta conjunto de caracteres="utf-8">
</cabeza>
<cuerpo>
<div style="ancho: 450px;">
<p id="cita"></p>
</div>
</cuerpo>
<script src="script.js"></script>
</html>

Esta extensión tendrá una ventana emergente que muestra una página HTML muy simple. Cuando se carga la extensión, se llamará a una función de JavaScript para insertar una cita inspiradora aleatoria. También puedes agregar detalles CSS si deseas brindar un estilo más sofisticado.

script.js

const api_url="https://api.quotable.io/random";
función asincrónica getapi(url)
{
const respuesta = await fetch(url);
var datos = esperar respuesta.json();
consola.log(datos);
document.getElementById("quote").innerHTML="\"" + datos.contenido + "\" - " + datos.autor;
}
getapi(url_api);

Estamos usando la API de código abierto y gratuita de Quotable para recuperar una cita aleatoria y luego insertarla en el código HTML de la ventana emergente de la extensión. Puedes editar este script para acceder a otra API web de manera similar.

manifiesto.json

{
"nombre": "Cita del momento",
"versión": "1.0.0",
"description": "Obtén una cita inspiradora",
"versión_del_manifiesto": 3,
"autor": "Ashley Rosilier",
"acción":{
"ventana emergente predeterminada": "index.html",
"default_title": "Cita del momento"
}
}

El manifiesto reúne todo, por lo que es importante asegurarse de tener los nombres de archivo y las rutas correctos para todos los archivos de origen y las imágenes de íconos si los está utilizando. Como se mencionó anteriormente, la versión 3 del manifiesto es la única opción válida a partir de junio de 2024.

Cómo instalar tu extensión de Chrome

Una vez que tenga el código fuente listo, instalar la extensión en Chrome es un proceso sencillo.

  1. Desde el menú de tres puntos en la parte superior derecha de la ventana del navegador, seleccioneExtensiones > Administrar extensiones.
  2. Se abrirá una nueva pestaña con el administradorde extensiones. Mueva el control deslizante en la parte superior derecha para habilitarel modo de desarrollador.
  3. Haga clic en el botónCargar descomprimidoen la parte superior izquierda de la página.
  4. Seleccione la carpeta que contiene los archivos de origen y el manifiesto.
  5. Su nueva extensión debería aparecer en el Administrador de extensiones y estar lista para usarse en el navegador.

Tenga en cuenta que una vez que haya cargado la extensión descomprimida, puede continuar editando los archivos de origen y los cambios se reflejarán en su extensión sin tener que volver a cargar los archivos. Esto es muy conveniente para depurar una nueva extensión.

Comparte tu extensión con otros

Hay varias extensiones disponibles en Chrome Web Store. De todas formas, si tienes algunas habilidades básicas de programación, escribir e instalar tu extensión de Chrome para ampliar la funcionalidad de tu navegador es una tarea sencilla. Una vez instalada, tu nueva extensión estará disponible para tu propio uso, pero si crees que tienes una idea que otros disfrutarían, consideraregistrar una cuenta de desarrolladory publicarla en la tienda. Nunca sabes cuándo tu divertido proyecto secundario se convertirá en la próxima sensación viral.