Jorge Reyes
1
Kappa
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
- Desde
- 29 Mar 2012
- Mensajes
- 2.647
Hola!! Bueno, el día de hoy me anime a crear un tutorial sobre como crear extensión para Google Chrome
primero comenzaré con un poco de teoria luego nos ponemos manos a la obra¿Qué son las extensiones de Chrome?
Las extensiones para Google chrome sirven para agregar nuevas funciones a tu navegador Chrome o modifica las funciones de tus sitios favoritos.
¿Que conocimientos necesito para poder hacer una extensión para chrome?
Pues necesitas saber HTML, CSS, JAVASCRIPT con que sepas lo básico te sirve, si quieres algo mas complejo pues ya debes saber dominar mas esos lenguajes.
¿Que necesito para poder hacer una extensión para chrome?
Pues un editor de texto y obvio google chrome, de editor yo uso Notepad++ haz click aqui para descargarlo
Bueno, ya con esas preguntas basicas comenzamos, quiero explicar un poco la estructura de la extensión, lo principal de todo es el Manifest.json ahi se podría decir que es el centro de control de la extensión, ahí es donde están los datos de la extensión.
Lo segundo sería el archivo popup.html (es opcional el nombre le podes poner como quieras) en el popup.html estara el contenido que saldrá de la extensión, como su nombre lo dice el popup de la extensión aquí un ejemplo por si no me entienden
Pueden ver la imagen de rafa en la extensión, cuando hice click en el icono de la extensión se abrió el popup con la imagen, a eso me refiero con el poup de la extensión
Lo tercero sería el icono de la extensión, el icono de la extensión es el que aparece al lado de la barra de dirección aquí una imagen por si no entienden
Bueno, ya dejando de lado la teoria comencemos con lo practico
Primer Paso
Lo primero será abrir el editor, en este caso tengo Notepad++ lo que haremos es pegar el siguiente código
Insertar CODE, HTML o PHP:
{
"name": "Tutorial Forobeta",
"manifest_version": 2,
"version": "1.0",
"description": "Descripción de la extensión",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}Bueno, les explico el codigo de arriba es JSON un formato ligero para el intercambio de datos, se podría decir que lo primero que sale "name": esa una variable y el contenido de la variable es "Tutorial Forobeta", bueno, entonces si ya tienen mas claro como es paso a detallar que contenido debe ir en cada variable
Name : ahi debe ir el Nombre de la Extensión.
manifest_version : La versión del json, no tocar.
Version : Aquí va la versión de la extensión, en este caso 1.0 ya que es la primera versión.
Description : Descripción de la extensión
Lo demás es el icono y el popup que ya explique mas arriba
Segundo Paso
Bueno, ahora vamos a crear un nuevo archivo en notepad++ y vamos a pegar el siguiente codigo y guardamos como popup.html
HTML:
<!DOCTYPE html>
</html>
<head>
<!--aqui algún css a agregar o js-->
</head>
<body>
<h1>Hola Mundo!</h1>
</body>
</html>Tercer Paso
Por ultimo vamos a buscar un icono para la extensión, debe ser 128x128 de preferencia que tenga transaparencia.
Bueno, en caso de haber hecho todo les quedará así
Ultimo Paso [Testear la extensión]
Bueno, hasta ahora ya se podría decir que terminamos la extensión, ahora hay que probarla lo que vamos a hacer es entrar a la sección de Extensiones de chrome y dar click en "Modo Desarrollador" aquí una imagen por si no la localizan
Bueno, al hacer click ahi se abriran unas opciones la que vamos a usar es "Cargar Extension descomprimida" al darle click ahi se abrira una ventana, en la ventana nos vamos a donde tenemos la extensión
Le damos click a "aceptar" si todo lo hicieron bien ya les aparecera la extensión en la sección de extensiones
Ahora ya podremos usar la extensión y todo
en este caso como es sencilla al hacer click en el icono se abrira el popup con el "Hola Mundo"
Bueno hasta ahora todo bien, probamos la extensión pero solo nosotros podrémos usarla ya que está desempaquetada, debemos empaquetarla ¿Como lo hacemos?
Empaquetando extensión
Bueno, ahora vamos a la parte donde estan las extensiones y en la sección de desarrollo (la que abrimos mas arriba) sale la opción de "Empaquetar Extensión" bueno, damos click ahi y nos saldra la siguiente ventana
Ahora en la primera opción darémos click en examinar, nos vamos a donde está la extensión y le damos aceptar, ahora damos click en empaquetar extensión, ahora nos saldrá una ventana confirmando todo
Y pues eso es todo el archivo Tutorial Forobeta.crx es la extensión la que podemos compartir con los demas usuarios
Bueno, esto fue todo por ahora, mas luego haré un tutorial de como poner el Feeds de un sitio/blog en una extensión
espero les haya sido util saludos!
