¿Cómo hacer una extensión para Google Chrome?
¿Que es una extensión?
Una extensión es un pequeño programa que agrega funciones a tu navegador, en este caso Google Chrome. Las extensiones están basadas en lenguajes de programación Frontend como Javascript; y lenguajes de diseño como HTML y CSS. Esto es por el simple hecho de que las extensiones se ejecutan en el navegador en el que estén instaladas y no en los servidores de los sitios.
¿Cómo empezar?
Para poder comenzar, primero debes tener al menos una idea de lo que es Javascript y HTML.
Pasemos por arriba lo que son estos lenguajes
HTML:
Html es el código base de un sitio web.
Simplemente dejaré un link a un tutorial de HTML.
Si me pongo a explicarlo todo acá no me va a dar el post
. Además quedaría demasiado largo.
Click aquí para un tutorial HTML
Javascript:
Javascript es un lenguaje de porgramación que se ejecuta del lado del cliente (en el navegador).
Es un lenguaje que te permite interactuar con el sitio. Las notificaciónes de on board de Taringa! son puro Javascript, los carteles emergentes de Taringa! son javascript.
Te dejo un tutorial
Por si el link no anda = http://librosweb.es/javascript/
Bueno, empecemos con lo que es la extensión
Primero que nada deberan tener un editor de código para hacer todo más fácil, yo recomiendo Sublime text . Pero también puedes usar otros Notepad++ o algún otro que te guste.
¿Que vamos lenguajes usaremos?
Para esta extensión usaremos Javascript (Usando el framework JQuery) y un poco de Html.
¿Qué es jQuery?
jQuery es considerado un Framework de Javascript. Es decir, un conjunto de funciones que ya fueron desarrolladas y probadas, estan listas para utilizarlas de una manera muy simplificada.
¿Que vamos a hacer?
Lo que vamos a hacer es agregar un botón a mi perfil, haremos que al presionar el botón nos aparezca un cartel de alert que nos dirá que la extensión funciona perfecto.
Para empezar debemos crear un directorio (carpeta) que será el directorio raíz, es decir, la carpeta principal. Este directorio se llamara “Mi primera extensión”.
Una vez dentro del directorio crearemos un archivo al que le nombraremos “manifest.json”.
Este archivo contendrá lo siguiente:
Dentro de “contents_scripts”, en “js” es donde declaramos los scripts que tienen todas la órdenes a ejecutar. Mientras que en “matches” declaramos en que sitio se ejecutarán esos scripts.
"manifest_version" indica la version del manifest, si o si debe ser 2 (al menos hasta que chrome haga la version 3.
“name” contendra el nombre de nuestra extensión
“version” deberá tener la versión de la extensión, como es la primera le podremos “1.0”
“description” debe contener la descripcion de nuestra extensión
"author" indica el nombre del creador
"permissions": Indica en que lugares y en que cosas la extensión tiene permiso de actuar
"web_accessible_resources" declara los recursos (archivos) que se ejecutarán y mostrarán. Como vamos a usar jquery debemos descargar la libreria, colocarla en la carpeta raíz de la extensión y luego declararla en este campo.
Encuentrala aquí y colócala en la carpeta raíz de la extensión
Click aqui
Para descargarla debes entrar y dar click derecho, loego presionas "guardar como" y lo guardas
Para descargarla debes entrar y dar click derecho, loego presionas "guardar como" y lo guardas
También es posible declarar muchas más cosas, pero por ahora esto es lo necesario, posiblemente más adelante les cuente más.
Ahora vamos al Script.
Todo irá dentro de
$(document).ready(function() {
-
});
. Esto quiere decir que cuando la página se cargue se ejecutará el código que hayamos escrito.
Para saber en donde debemos poner el botón debemos entrar en mi perfil (donde la extensión tendrá efecto) y buscar la caja en donde agregaremos el botón.
Una vez dentro de mi perfil, iremos a la caja donde se encuentran los botones de “Seguir” y “Enviar Mensaje”, un un lugar vació al lado de estos botones, presionaremos click derecho e iremos a “Inspeccionar elemento”
Ahora dentro de el código html la caja que contiene a estos botones.
Esta Caja tiene una class, el nombre es “perfil-info”.
Ahora vamos a nuestro Script y agregamos lo siguiente:
$('.perfil-info').append();
“.append” Es un método que nos permite agregar contenido a la página via JavaScript
Lo que se encuentra antes del “.append” es la caja donde en agregaremos nuestro botón. Mientras que lo que se encuentra después de este es el código que queremos agregar.
Como queremos que el boton que agregaremos tenga el mismo diseño que los botones de T! debemos ir denuevo a ver el código HTML del sitio.
Esta vez debemos averiguar cual es el código de los botones, para eso iremos a un botón, presionaremos click derecho sobre él y luego “Inspeccionar elemento”.
(Yo lo haré con el de “Editar Privacidad”, ustedes con el de “Enviar Mensaje”)
Ustedes verán que el botón es:
<a class="btn g require-login floatL" href="/mensajes/a/ElNicko077">
Aquí vemos que el botón tiene varias class “btn”, “g”, “require-login” y “floatL”. Nosotros usaremos solo las primeras dos. “btn” Indica que es un botón y “g” indica que el color del botón es gris.
Ahora iremos al script y colocaremos esto después del “.append”. Entre los paréntesis colocaremos el código del botón entre comillas.
Nos quedará así:
<a class='btn g' onclick='miFuncion()'>Probar mi extensión</a>
“onclick” llama a la función que debe ser ejecutada al oprimir el botón.
Por ahora el script nos debe quedar así:
Ahora debemos crear la función que hace que al presionar el botón nos aparezca el cartel de alert.
Para eso crearemos un nuevos script al que llamaremos “funcion.js”, y lo guardaremos en la carpeta raíz.
“funcion.js” deberá contener lo siguiente:
Esta es la función que hace que nos aparezca el cartel de alert, lo que se encuentra entre los paréntesis de “alert” es lo que dirá el cartel.
Ahora debemos volver a nuestro “script.js”, ahora debemos hacer que la función se declare en el sitio, de lo contrario al presionar el botón no pasará nada porque el navegador no encontrará la función.
Para hacer esto debemos agragar lo siguiente:
$('head').append("<script type='text/javascript' src='"+chrome.extension.getURL("funcion.js")+"'></script>");
Esto hará que dentro de la etiqueta “<head>” se importe nuestra función. “chrome.extension.getURL(‘funcion.js’)” indica la url de nuestro script "funcion.js" una vez instalada la extensión
Finalmente “script.js” nos debe quedar así:
La Carpeta raíz debe quedar así:
¡Miralo en GitHub para manejar mejor el código!
(Click en la imágen)
Ya está casi listo, solo queda instalar nuestra extensión.
Ahora iremos a la pestaña de extensiones de chrome.
(Si no sabes como llegar escribe “chrome://extensions/” en la barra superior de Chrome y presiona enter).
Bueno, una vez dentro deberás activar el modo desarrollador (en caso de que lo tengas desactivado).
Para activarlo simplemente clickea donde dice “Modo desarrollador”.
Una vez activado, ve a donde dice “Cargar extensión descomprimida” y busca la carpeta raiz de tu extensión, selecciónala y aprieta aceptar.
Si todo está bien, la aceptará sin problemas, de lo contrario lee denuevo el post.
Ahora vayamos a probar la extensión.
Ve a mi perfil, y espera que cargue la página, te deberá aparecer un botón que dirá “Probar mi extensión”, presionarlo. Si hiciste todo bien te aparecerá el cartel, de lo contrario, lee de nuevo el post.
¡Ahora te enseñaré a empaquetarla!
Debes entrar nuevamente en la pestaña de extensiones.
Esta vez deberás clickear el boton que dice “Empaquetar extensión” y luego seleccionar el directorio raiz, le das aceptar y listo. te creará dos archivos, uno “.crx” y otro “.pem”.
Importante: solo deberás pasar el “.crx”, el otro solo te servirá a ti si algún dia quieres actualizar la extensión.
Consultas por mp o en el post
No olvides comentar si te sirvio, recomiendalo!.
Saludos! espero que les sirva!
No olvides comentar si te sirvio, recomiendalo!.
Saludos! espero que les sirva!