DEV Community

Cover image for Crear una Extensión para Chrome en 10 Sencillos Pasos
David Dominguez
David Dominguez

Posted on

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.

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" } } }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Í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."

Enlace de la entrada: davdomin.blogspot.com/2023/10/como-crear-una-extension-para-chrome-en.html

Top comments (0)