Cómo crear un bookmarklet

Según la Wikipedia, un bookmarklet es:

un marcador que, en lugar de apuntar a una dirección URL, hace referencia a una pequeña porción de código JavaScript para ejecutar ciertas tareas automáticamente.

La sintaxis es javascript: seguido del código javascript. El código javascript no debe contener cambios de líneas y no debe ser demasiado extenso, esto un compresor de javascript nos lo puede facilitar. Para usar un bookmarklet basta con añadirlo a los favoritos como un enlace más, y en navegadores como Firefox es tan fácil como arrastrarlo a la barra de favoritos.

Con algo tan sencillo podemos resolver un sinfín de limitaciones de los buscadores y enriquecerlos con nuevas funcionalidades. El uso de los bookmarklets data del 2001, por lo que podemos encontrarnos muchos ya desarrollados como estos que no pueden faltar en mi barra:

• Googmarklets (Google Bookmarklets)
• XRAY
• Design

Pero, por muchos que existan ya desarrollados, siempre hay alguna necesidad por cubrir, por eso os comparto un par de plantillas que nos permitirán hacer algunos bien sencillos.

Uno de los usos más típicos es realizar una acción con el texto seleccionado en la página, como por ejemplo buscar dicho texto en algún buscador. El mismo ejemplo que nos brinda La Wikipedia lo podemos reutilizar con solo sustituir la URL de búsqueda por la del buscador que nos interese. Así por ejemplo podemos hacer un bookmarklet que busque el texto seleccionado en un comparador de productos como Ciao.

Para ello sustituiremos http://es.wikipedia.org/w/wiki.phtml?search= por http://www.ciao.es/sr/q-

Para Firefox y Konkeror

1

javascript:(function(){q=document.getSelection();if(!q)q=prompt('De qué estás buscando información?:'); if(q)location.href='http://www.ciao.es/sr/q-'+escape(q);})()

Bookmarklet Ciao

Para Safari

1

javascript:void(q=prompt('De qué estás buscando información?:',getSelection())); if(q)void(location.href='http://www.ciao.es/sr/q-'+escape(q))

Bookmarklet Ciao

Para Internet Explorer

1

javascript:(function(){q=document.selection.createRange().text;if(!q)q=prompt('De qué estás buscando información?:',''); if(q)location.href=' http://www.ciao.es/sr/q-'+escape(q);})()

Bookmarklet Ciao

Otro uso más avanzado de los bookmarklets es para modificar el comportamiento de la página como lo hacen XRAY y Design. Estos por su complejidad necesitan añadir dinámicamente librerías externas de javascript a la página. Aquí os dejo una plantilla que podemos reutilizar con nuestro propio script externo:

1

javascript:function cargaScript(scriptURL) { var scriptEl = document.createElement('SCRIPT'); scriptEl.setAttribute('language', 'JavaScript'); scriptEl.setAttribute('src', scriptURL); document.body.appendChild(scriptEl);} cargaScript('http://camino/a/miscript.js');

Solo tenemos que sustituir http://camino/a/miscript.js por la URL real de nuestro script. Y si necesitáramos cargar más de uno entonces repetimos la llamada a la función cargaScript con la URL del otro script.

Con este bookmarklet puedes probar e24Presenter en tu página: e24Presenter

En un próximo post compartiré un grupo de bookmarklets que he desarrollado para mi día a día y que alguno podría serte útil.

Soy Alfredo Artiles, Co-Fundador de equipo24 y e24Presenter. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

• Evite distracciones molestas de YouTube con Quietube.
• Twitlet, actualiza tu estado en Twitter con un click
• Interpretando las ubicaciones en Twitter con formato iPhone:Lat,Lon
• Wikia