jueves, 21 de junio de 2007

Cómo crear un buscador para la barra de firefox

Si es que me piden las cosas más raras...



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 meterlo ahí).

Puesto que probé a leerme las instrucciones de la página de ayuda del firefox y no me enteré de absolutamente nada, os lo voy a explicar con un ejemplo.

Pongamos que queremos buscar mucho en una página que visitamos a menudo, por ejemplo la boardgame geek (sí, me pidieron esa). Si vais a esa página, podeis ver que tiene una barra de búsqueda.

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/x-icon;base64,[cadena de caracteres muy larga]</Image>
<Url type="application/x-suggestions+json" method="GET" template="http://suggestqueries.google.com/complete/search?output=firefox&client=firefox&qu={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" condition="defaultEngine" trueValue="firefox-a" falseValue="firefox"/>
</Url>
<SearchForm>http://www.google.com/firefox</SearchForm>
</SearchPlugin>


Vamos por pasos:

  1. Guarda el fichero con otro nombre antes de seguir, no te vayas a cargar el buscador de google. Por ejemplo, en este caso, bgg.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 "BGG". En description pones una descripción del buscador. Por ejemplo "Board Game Geek" o "Busqueda juegos de mesa".

  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/x-icon;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&client=firefox&qu={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 gorda. 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 metódo 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úsqueday 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://www.boardgamegeek.com/profile.php?action=viewmine", la dirección será http://www.boardgamegeek.com/ profile.php?action=viewminemetasearch.php = http://www.boardgamegeek.com/metasearch.php

  8. <Param name="q" value="{searchTerms}"/>
    <Param name="ie" value="utf-8"/>
    <Param name="oe" value="utf-8"/>
    <Param name="aq" value="t"/>

    Vale, 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://www.boardgamegeek.com/metasearch.php ?searchtype=game&search=arkham&B1=Go

    http://www.boardgamegeek.com/metasearch.php es la dirección que tenemos que poner en template en el paso anterior, y hay tres pares: searchtype=game, search=arkham y B1=Go. Uno de estos pares contiene lo que hemos buscado (en este caso he buscado "arkham"), y los otros tienen valor fijo. Sustituimos lo que hemos buscado por "{searchTerms}", de forma que nos quedan los pares searchtype=game, search={searchTerms} y B1=Go. Ahora, tenemos que poner una linea por cada par, de este modo:
    <Param name="(nombre atributo)" value="(valor del atributo)"/>

    en nuestro caso:

    <Param name="searchtype" value="game"/>
    <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 os asusteis, en nuestro caso:
    <form method="GET" action="/metasearch.php" style='padding:0; margin:0;'>
    ...
    <select name='searchtype' style='font-size:12px;'>
    <option value='game' SELECTED>Games</option>

    <option value='designer' >Designers</option>
    <option value='publisher' >Publishers</option>
    <option value='forum' >Forums</option>
    <option value='geeklist' >GeekLists</option>
    <option value='tag' >Tags</option>
    <option value='wiki' >Wiki</option>
    <option value='user' >Users</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='font-size: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 juegos (games)
    <option value='game' SELECTED>Games</option>
    por lo que el par será searchtype (lo pone en name dentro de select) = game (lo pone en value dentro del option que nos interesa).

    <input size=25 type="text" name="search"

    Esta es la barra de busqueda. Como veis, 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>http://www.google.com/firefox</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>BGG</ShortName>
<Description>BoardGame Geek</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">data:image/x-icon,[cadena larga de caracteres]</Image>
<Url type="text/html" method="GET" template="http://www.boardgamegeek.com/metasearch.php">
<Param name="search" value="{searchTerms}"/>
<Param name="searchtype" value="game"/>
<Param name="B1" value="go"/>

</Url>
<SearchForm>http://www.boardgamegeek.com/searchform.php3</SearchForm>
</SearchPlugin>

(Si quieres buscar en boardgamegeek no tienes mas que copiar todo esto y pegarlo en un fichero de texto, y guardarlo en "C:\Archivos de programa\Mozilla Firefox\searchplugins"). Después de guardarlo, cierra el firefox y cuando vuelvas a abrirlo, el buscador aparecerá en la lista. Comprueba si funciona.




No me aparece icono, o me aparece el de google...

Vale, una vez funcione el buscador, hay que sustituir la cadena larga de caracteres (o lo que puse yo, [cadena larga de caracteres]), por la cadena correcta para que aparezca un icono que permita identificar el buscador. Para ello, pasad a la parte 2.




Actualización: Alguien me ha sugerido en comentarios que los buscadores también funcionan si se guarda el archivo xml en "C:\Documents and Settings\[nombre_de_usuarios]\Datos de programa\Mozilla\Firefox\Profiles\[nombre_aleatorio].default\searchplugins". La diferencia entre guardarlo ahí y no en C:\Archivos de programa\Mozilla Firefox\searchplugins" es que en esa otra carpeta sólo le aparecerán a tu usuario de windows, y no a todos los usuarios de windows que usen firefox. Lo digo por si alguien quiere añadirse un buscador en un ordenador que comparte con familiares, por ejemplo, y no quiere que a éstos les aparezca (No me había planteado ese problema, pero la verdad no suelo buscar "el mejor porno XY" ;D )

3 comentarios:

Anónimo dijo...

Lo he probado y funciona perfectamente.

Quería comentar que parte de los ficheros XML me aparecen donde dices, pero los que he añadido después de forma automática aparecen en otro sitio (en windows XP y en mi caso en "C:\Documents and Settings\mi_ususario\Datos de programa\Mozilla\Firefox\Profiles\ r4wa8d00.default\searchplugins).

Aracne dijo...

Ah, vale. Yo no he añadido ninguno automáticamente y no lo sabía, pero si añades uno automáticamente parece ser que te lo guarda para que sólo le aparezca a tu usuario (igual que si instalas una extensión sólo le aparece a tu usuario, y no a todos los usuarios del ordenador). Si lo guardas en "C:\Archivos de programa\Mozilla Firefox\searchplugins" le aparece a todos los usuarios del ordenador.

Gracias, es bueno saberlo. Lo voy a añadir, no sea que alguien se añada un buscador porno en el ordenador de su familia :)

Anónimo dijo...

Gracias, el metodo sigue funcionando hazta este momento y ademas sirve para todos los otros navegadores que se basan en el Firefox como Wyzo y Palemon.