Cómo Crear una Extensión para Chrome en 10 Sencillos Pasos
Las extensiones de Chrome son pequeños programas que amplían las funcionalidades del navegador Google Chrome. En esta guía, aprenderás a crear una extensión básica desde cero. No se requiere experiencia previa en programación.
:quality(85)/cloudfront-us-east-1.images.arcpublishing.com/infobae/Y46CD4PTRBDGXLSWIARUWEA7DM.webp)
Configuración del Entorno de Desarrollo
Instalar Google Chrome: Si aún no tienes Google Chrome instalado, descárgalo e instálalo en tu computadora. Debes utilizar Chrome como navegador principal para probar tus extensiones.
Editor de Código: Utiliza un editor de código de tu elección. Recomiendo Visual Studio Code, que es gratuito y fácil de usar.
Crear la Estructura de Carpetas 3. Crea una Carpeta: En tu computadora, crea una carpeta para tu extensión. Nombremos esta carpeta "MiPrimeraExtension."
Archivo de Manifiesto 4. Crear el Archivo de Manifiesto: En la carpeta "MiPrimeraExtension," crea un archivo llamado "manifest.json". El manifiesto es un archivo importante que define la extensión y sus propiedades.
Editar el Manifiesto: Abre "manifest.json" en tu editor de código y agrega el siguiente código básico:
json
{
"manifest_version": 3,
"name": "Mi Primera Extensión",
"version": "1.0",
"description": "Una extensión simple de Chrome",
"permissions": [
"activeTab"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
}
Este código define información básica sobre la extensión, como su nombre y descripción, así como los íconos y la página emergente.
Archivo HTML para la Página Emergente 6. Crear la Página Emergente: En la misma carpeta, crea un archivo llamado "popup.html." Esta será la página que aparecerá cuando hagas clic en el ícono de la extensión.
Editar la Página Emergente: Abre "popup.html" y agrega el siguiente código HTML simple:
<!DOCTYPE html>
<html>
<head>
<title>Mi Extensión</title>
</head>
<body>
<h1>Hola, esta es tu primera extensión de Chrome.</h1>
</body>
</html> Íconos para la Extensión 8. Preparar Íconos: Crea tres imágenes PNG para los íconos de la extensión con tamaños de 16x16, 48x48 y 128x128 píxeles. Guárdalas en una carpeta llamada "images" dentro de tu carpeta "MiPrimeraExtension."
Cargar la Extensión 9. Acceder a Chrome: Abre Google Chrome y visita "chrome://extensions/". Asegúrate de que la casilla de "Modo de desarrollador" esté marcada en la esquina superior derecha.
Cargar la Extensión: Haz clic en "Cargar extensión no empaquetada" y selecciona la carpeta "MiPrimeraExtension."
¡Y eso es todo! Has creado y cargado tu primera extensión de Chrome. Ahora, deberías ver el ícono de tu extensión en la barra de herramientas de Chrome. Cuando hagas clic en él, se mostrará el mensaje que definiste en "popup.html."
Escribe en comentarios si quieres que hagamos una extension mas compelja en nuestra proxima entrada
Comentarios
Publicar un comentario