<SearchPlugin xmlns="

Transcripción

1 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=" <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=" lient=firefox&hl={moz:locale}&q={searchterms}"/> <Url type="text/html" method="get" template=" <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" condition="defaultengine" truevalue="firefox-a" falsevalue="firefox"/> </Url> <SearchForm> </SearchPlugin> Vamos por pasos:

2 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=" 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=" 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=" 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 (sin ningún "?") sería método POST, y si aparece algo como 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

3 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=" por template=" (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=" 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 " la dirección 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: 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"/>

4 <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 type='submit' name='b1' value='go' style='fontsize:12px;'></td> </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).

5 <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" condition="defaultengine" truevalue="firefox-a" falsevalue="firefox"/> 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> </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=" <ShortName>Firefoxmanía</ShortName> <Description>Buscador de Firefoxmanía</Description> <InputEncoding>UTF-8</InputEncoding>

6 <Image width="16" height="16">data:image/png;base64, [cadena de caracteres muy larga] </Image> <Url type="text/html" method="get" template=" "> <Param name="search" value="{searchterms}"/> <Param name="searchtype" value="game"/> <Param name="b1" value="go"/> </Url> <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:

7 El necesita la dirección de ese icono para poder convertirlo, y para conformar la dirección, seria así: 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: 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.