Última Revisión: Mayo del 2011
Indice:
- Justificación 1.
- Conocimientos previos necesarios 2.
- Materiales necesarios 3.
o Editores de texto 3.1.
o Navegadores 3.2.
- Conceptos básicos 4.
- Fuentes consultadas 5.
- Pasos a seguir 6.
o Creación de carpeta de la extensión 6.1.
o Archivo de configuración 6.2.
o Configuración del icono de la extensión 6.3.
o Creación del Popup (HTML) 6.4.
o Activación de la extensión 6.5.
- Producto esperado 7.
- Planes a futuro 8.
1. Justificación:
Hoy en día los navegadores web son una parte esencial del uso de un computador. Por lo tanto se puede decir que son una importante herramienta. Debido a esta situación se crean las extensiones, las cuales facilitan el acceso a diferentes aplicaciones rápidamente y de forma versátil. En este tutorial se pretende exponer la manera de construir una extensión para el navegador Google Chrome.
2. Conocimientos previos necesarios:
- HTML (básico)
- Javascript (básico)
- Un poco de lógica :3 (AVANZADA)
3. Materiales necesarios:
3.1. Editores de texto:
- Nano
- Gedit
3.2. Navegador:
- Google Crome
4. Conceptos básicos:
- Javascript (Wikipedia) http://bit.ly/jTtMuY
- Popup (Wikipedia) http://bit.ly/k4Bgns
- HTML (Wikipedia) http://bit.ly/l3DbON
5. Fuentes consultadas:
6. Pasos a seguir:
Pasos para construir tu propia extensión de Google Chrome para Goear.com, busca música directamente en la pagina www.goear.com.
6.1. Crea una carpeta en cualquier lugar del sistema (recomendable ubicaciones que se puedan recordar con facilidad) ejemplo: “Mi_Extensión” (o para nuestro caso: “Goear_search”).
6.2. Crear un archivo vacío llamado mainfest y darle extensión json, es decir “mainfest.json”, este será nuestro “archivo de configuración” que se encargará de describir la extensión e indicar las rutas tanto de la imagen del icono, como la ruta de el formulario de la extensión. Dentro del archivo que acabamos de crear, pegamos el siguiente código.
{
"name": "Goear Search",
"version": "1.0",
"description": "Buscador rápido de canciones en www.goear.com.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"tabs"
]
}
Como podemos observar en este archivo se encuentra el nombre de la extensión en el atributo “name”, su versión en “version”, una breve descripción de lo que hará en “description”, el nombre del logo de la extensión en “default_icon” y el formulario propio de la extensión en “popup” (todo esto dentro de la carpeta misma de la extensión).
6.3. Copiar y pegar la imagen que queremos como icono dentro de la carpeta con el nombre de “icon.png” de tal manera que encaje directamente dentro de la ruta especificada en el “mainfest.json”
6.4. Crear un archivo vacío y nombrarlo con “popup.html”, esta es la médula espinal de la yuca, la que le da sentido a tu trabajo, ya que contiene el código del formulario que se muestra, junto con la función que realiza (contenida en un script de Javascript) en la primera parte del documento html. Este es en nuestro caso el código a utilizar.
<head>
<style>
body {
min-width:200px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<script>
var url = "http://www.goear.com/search.php?q=";
function init() {
document.getElementById("searchBox").focus();
document.getElementById("searchButton").addEventListener("click",_search,false);
document.getElementById("searchBox").addEventListener("keyup",_keyUp,false);
//var as = new O($("searchBox"));
}
function _keyUp(e) {
if (e.keyCode==13) {
_search();
}
}
function _search() {
var query = document.getElementById("searchBox").value;
chrome.tabs.create({url:url+query})
}
</script>
</head>
<body onload="init()" style='background:url("goear.gif") no-repeat'>
<div id="container">
<table border=0>
<tr>
<td>
<input type="text" id="searchBox" value/>
</td>
<td>
<input type="button" id="searchButton" title="Search" onclick="init" value="Search"/>
</td>
</tr>
</table>
</div>
</body>
6.5. Por último se debe cargar la extensión:
a) Hacer que aparezca la página de administración de extensiones haciendo clic en el icono de llave inglesa y seleccionando Herramientas> Extensiones
b) Sí el modo de desarrollo tiene un +, hacer clic en el signo + para añadir información a la página del desarrollador.
d) En el diálogo de archivo, ve a la extensión de tu carpeta y haz clic en Aceptar.
Y listo!! Ya tienes tu gran yuca :3
7. Producto esperado:
8. Ideas a futuro:
Un reproductor de música que complemente dicha extensión de manera en que no sea obligatorio acceder por completo a la página www.goear.com para poder escuchar música.
No hay comentarios:
Publicar un comentario