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"
}
}
}
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."
Enlace de la entrada: davdomin.blogspot.com/2023/10/como-crear-una-extension-para-chrome-en.html
Top comments (0)