tutorial de como crear un buscador para la barra de

¿Cómo crear un buscador para la barra de Firefox?
Supongamos que queremos añadir un buscador distinto a los que ofrece Firefox para la
barra de búsqueda. Todos esos buscadores están en una carpeta del directorio de
Firefox (en Windows XP en "C:\Archivos de programa\Mozilla Firefox\searchplugins").
Hay un archivo .xml para cada buscador, por lo que tendremos que crear un archivo
para el nuestro (o si alguien lo ha creado, simplemente ponerlo ahí).
Vamos a abrir un archivo XML existente y rellenar los valores con los del buscador de
esa página. Por ejemplo, abrid el XML de Google. Se puede abrir con cualquier editor
de texto (block de notas o similar). Saldrá algo como esto:
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Google</ShortName>
<Description>Google Search</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">data:image/png;base64, [cadena de caracteres muy
larga] </Image>
<Url
type="application/x-suggestions+json"
method="GET"
template="http://suggestqueries.google.com/complete/search?output=firefox&c
lient=firefox&hl={moz:locale}&q={searchTerms}"/>
<Url type="text/html" method="GET" template="http://www.google.com/search">
<Param name="q" value="{searchTerms}"/>
<Param name="ie" value="utf-8"/>
<Param name="oe" value="utf-8"/>
<Param name="aq" value="t"/>
<!-- Dynamic parameters -->
<Param name="rls" value="{moz:distributionID}:{moz:locale}:{moz:official}"/>
<MozParam
name="client"
falseValue="firefox"/>
condition="defaultEngine"
</Url>
<SearchForm>http://www.google.com/</SearchForm>
</SearchPlugin>
Vamos por pasos:
trueValue="firefox-a"
1. Guarda el fichero con otro nombre antes de seguir, no vayas a sobrescribir el
buscador de Google. Por ejemplo, en este caso, mi_buscador.xml
2. <SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
No parece ser nada específico de Google, así que déjalo como está.
3. <ShortName>Google</ShortName>
<Description>Google Search</Description>
En ShortName tienes que poner un nombre que quepa en el menú desplegable de
selección. Por ejemplo "Buscador". En Description pones una descripción del buscador.
Por ejemplo "Buscador para buscar" o "Búsqueda en la UCI".
4. <InputEncoding>UTF-8</InputEncoding>
Éste es el juego de caracteres que vas a usar para las búsquedas. A menos que uses
chino o algo así puedes dejar el que está.
5. <Image width="16" height="16">data:image/png;base64, [cadena de caracteres
muy larga] </Image>
Esto es el icono que aparecerá. Por ahora vamos a hacer lo otro y luego lo cambiamos.
Esta es la parte más difícil.
6. <Url type="application/x-suggestions+json" method="GET"
template="http://suggestqueries.google.com/complete/search?output=firefox&c
lient=firefox&hl={moz:locale}&q={searchTerms}"/>
Ésta es la dirección para que te vaya haciendo sugerencias mientras escribes. Puesto
que el buscador que vamos a añadir no hace sugerencias, simplemente borramos esta
línea
7. <Url type="text/html" method="GET" template="http://www.google.com/search">
Bien, esta es la parte buena. Vamos allá:
Primero, hay dos métodos, "GET" y "POST". Para averiguar cuál usa, hacemos una
búsqueda de prueba. Si en la barra de direcciones del navegador aparece luego algo
como http://dirección (sin ningún "?") sería método POST, y si aparece algo como
http://dirección?propiedad1=valor1&propiedad2=valor2... sería el método GET.
También podemos mirar el código fuente de la página que contiene la caja de
búsqueda y buscar algo como <form ... method="GET"... (asegúrate de que es el
correcto mirando si el texto cercano a la caja de búsqueda aparece también cerca de
aquí. En este caso es fácil, está justo después de "SEARCH")
Ahora
ponemos
en
method
"GET"
o
"POST"
y
sustituimos
template="http://www.google.com/search" por template="http://dirección" (si usa el
método POST la dirección que sale al buscar, si usa el método GET la dirección que
sale, pero sólo hasta la "?", sin incluirla).
También puedes buscar en el código fuente si pone en <form...
action="http://dirección".
Si
no
pone
http,
pero
sí
algo
como
action="/metasearch.php", sustituye todo lo que esté tras la última barra "/" de la
dirección por lo que aparezca en action, por ejemplo, si es action="/metasearch.php" y
estás en
"http://firefoxmania.uci.cu/profile.php?action=viewmine",
la
dirección
http://firefoxmania.uci.cu/profile.php?action=viewminemetasearch.php
http://firefoxmania.uci.cu/metasearch.php
será
=
8. <Param name="q" value="{searchTerms}"/>
<Param name="ie" value="utf-8"/>
<Param name="oe" value="utf-8"/>
<Param name="aq" value="t"/>
Esto es un poco más difícil. Hay dos formas de hacerlo:
Hacer una búsqueda de prueba (sólo método GET):
Si usa el método GET, simplemente busca algo, y mira en la barra de direcciones los
pares atributo=valor que necesitas (separados por &), por ejemplo:
http://firefoxmania.uci.cu/metasearch.php?searchtype=tipobusqueda&search=busqueda-ejemplo&B1=Go
http://firefoxmania.uci.cu/metasearch.php es la dirección que tenemos que poner en
template en el paso anterior, y hay tres pares: searchtype=tipo-busqueda,
search=busqueda-ejemplo y B1=Go. Uno de estos pares contiene lo que hemos
buscado (en este caso he buscado "busqueda-ejemplo"), y los otros tienen valor fijo.
Sustituimos lo que hemos buscado por "{searchTerms}", de forma que nos quedan los
pares searchtype=tipo-busqueda, search={searchTerms} y B1=Go. Ahora, tenemos que
poner una línea por cada par, de este modo:
<Param name="(nombre atributo)" value="(valor del atributo)"/> en nuestro caso:
<Param name ="searchtype" value ="tipo-busqueda"/>
<Param name ="search" value ="{searchTerms} "/>
<Param name ="B1" value ="Go"/>
(Da igual el orden) y borramos el resto de las líneas que empiecen por "<Param" en
caso de que haya alguna de más. Mirar el código fuente (sirve para método GET y
POST):
Si usa el método POST, es lo mismo, pero los pares atributo=valor no aparecen en la
barra de direcciones al hacer la búsqueda. No hay más remedio que ir al código de la
página que contiene la barra de búsqueda y buscar entre las etiquetas "<form>" y
"</form>" las etiquetas "<input" y <option, y anotar su nombre (name=...) y valor
(value=...) recordando sustituir el valor de la que contiene los campos de búsqueda por
"{searchTerms}" (normalmente será de tipo texto, y pondrá type='text'). Solo para que
no se preocupen, en nuestro caso:
<form method="GET" action="/metasearch.php" style='padding:0; margin:0;'>
<select name='searchtype' style='font-size:12px;'>
<option value='tipo' SELECTED>Tipo</option>
<option value ='ejemplo1' >Ejemplo1</option>
<option value ='ejemplo2' >Ejemplo2</option>
<option value ='ejemplo3' >Ejemplo3</option>
<option value ='ejemplon' >EjemploN</option>
</select></td><td valign='middle'><input size=25 type="text" name="search"
style='border: 1px solid #B0B0B0; padding:2px; font-size:12px;'></td>
<td valign='middle'><input
size:12px;'></td>
type='submit'
name='B1'
value='Go'
style='font-
…
</form>
Donde pone select es una lista desplegable. Name es el nombre del atributo, y para el
valor, buscamos entre las opciones y anotamos el "value" que nos interesa. En este
caso queremos buscar entre los ejemplos.
<option value='tipo' SELECTED>Tipo</option>
por lo que el par será searchtype (lo pone en name dentro de select) = tipo(lo pone en
value dentro del option que nos interesa).
<input size=25 type="text" name="search"
Esta es la barra de búsqueda. Como ves, se llama "search", así que el par es
search={searchTerms}.
<input type='submit' name='B1' value='Go'
Este es el botón, creo que no es necesario, pero bueno, tiene value, así que el par es
B1=Go Igual que en el sistema anterior, escribimos en el xml tantas líneas
<Param name="(nombre atributo)" value="(valor del atributo)"/>
Como pares tengamos (el orden no importa) y borramos el resto de las líneas que
comiencen por <Param.
9. Volviendo a nuestro xml:
<!-- Dynamic parameters -->
<Param name="rls" value="{moz:distributionID}:{moz:locale}:{moz:official}"/>
<MozParam
name="client"
falseValue="firefox"/>
condition="defaultEngine"
trueValue="firefox-a"
No creo que nuestra búsqueda tenga parámetros dinámicos, así que borramos todo
eso (solo las que son muy complejas como Google los tienen).
10. </Url>
<SearchForm>http://www.google.com/</SearchForm>
</SearchPlugin>
Y por último, aquí se pone la página web de la búsqueda por si la prefieres en lugar de
la barra. Yo he ido a la búsqueda avanzada en board game geek y he copiado la
dirección que aparece en la barra de direcciones para sustituirla por esta.
Si lo has hecho bien, te debería quedar algo como:
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Firefoxmanía</ShortName>
<Description>Buscador de Firefoxmanía</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">data:image/png;base64, [cadena de caracteres muy
larga] </Image>
<Url
type="text/html"
method="GET"
http://firefoxmania.uci.cu/metasearch.php ">
template="
<Param name="search" value="{searchTerms}"/>
<Param name="searchtype" value="game"/>
<Param name="B1" value="go"/>
</Url>
<SearchForm> http://firefoxmania.uci.cu/searchform.php3</SearchForm>
</SearchPlugin>
Cuando vuelvas a abrir el Firefox, ya tu buscador saldrá disponible en la barra de
búsqueda.
¿Cómo hacer el icono del buscador?
En la línea del buscador que estamos haciendo:
<Image width="16" height="16">data:image/png;base64, [cadena de caracteres muy
larga] </Image>
Tenemos que sustituir donde dice [cadena de caracteres muy larga] por lo que vamos
hacer debajo.
El icono que necesita este buscador se basa en Base64, que es un tipo de imagen
creado para las webs.
Lo primero seria buscar la imagen que quieres que represente a tu buscador, les
recomiendo su logotipo, y si este esta puesto como si favicon mucho mejor.
Bien, busca en el código fuente de la pagina del buscador algo como esto:
<LINK rel="icon" href="/favicon.ico" type="image/ico" />
href="/favicon.ico" es la localización del icono de la pagina, y para poder convertirla
necesitas poner la dirección de este icono en el conversor a Base64. En nuestro caso,
yo utilice un sitio web que se dedica a esto, y no consume casi nada por hacerlo, son
solo KBs.
El sitio es el siguiente: http://www.greywyvern.com/code/php/binary2base64
El necesita la dirección de ese icono para poder convertirlo, y para conformar la
dirección, seria así: http://direccion-de-tu-buscador.dominio/localizacion
y donde pongo localización lo sustituimos por lo que extraemos del código fuente
anterior del icono, el valor que viene en href (/favicon.ico).
Ejemplo: http://direccion-de-tu-buscador.dominio/favicon.ico
Si lo quieres testear, escribes esta dirección y te debe salir el icono del buscador, si no
es así, esta mal.
Y continuas con las pasos del asistente del sitio para convertir y sustituyes [cadena de
caracteres muy larga] por la nueva sucesión de caracteres que te ofrecerá el sitio.
También te da la posibilidad de usar una imagen que tengas guardada, y esto ya es
más fácil, porque te ahorras los pasos de arriba, tan solo debes contar con la imagen.