Qué son los bookmarklets y cómo usarlos (y ocho útiles ejemplos)

No todos los marcadores de tu navegador tienen por qué llevarte a una página web, aunque esa sea su función original: en algunos casos, los marcadores no almacenarán URLs, sino código JavaScript que —una vez hagamos clic en alguno de ellos— se ejecutará en la página que estemos visualizando en ese momento.

Esos marcadores reciben el nombre de ‘bookmarklets’ y son, en definitiva, tanto un precedente de las extensiones de los navegadores como una alternativa ligera (y transparente, pues todos podemos ver su código) a las mismas: un modo rápido de complementar o alterar el funcionamiento del navegador o de las propias páginas.

Un ejemplo: llegamos a una web cuyo diseñador ha decidido recurrir a JavaScript para evitar que podamos hacer uso del menú contextual y/o de la opción de seleccionar texto; una herramienta disuasoria burda pero aún muy usada.

Pues bien, meramente yendo a la barra de marcadores del navegador y haciendo clic en nuestro bookmarklet de ‘Volver a seleccionar texto’ alteraremos el código de la web y, con él, su funcionamiento.

El código que nos permitirá hacer eso es el siguiente (puede ser difícil de ‘leer’ por su falta de identación, pero así es como se almacena):

javascript:(function() { function R(a){ona = "on"+a; if(window.addEventListener) window.addEventListener(a, function (e) { for(var n=e.originalTarget; n; n=n.parentNode) n[ona]=null; }, true); window[ona]=null; document[ona]=null; if(document.body) document.body[ona]=null; } R("click"); R("mousedown"); R("mouseup"); R("selectstart"); })()

Esta estructura “javascript:(function(){FUNCIÓN})()” se mantiene siempre en los bookmarklet, y nos marca la pauta para crear los nuestros propios a poco que nos defendamos con el JavaScript.

En Genbeta

Las mejores extensiones para Chrome, Edge y Firefox del 2020

Quizá te estés preguntando “¿cómo se ‘instalan’?”. Habitualmente, encontraremos los bookmarklets en la forma de un hipervínculo cualquiera, por lo que bastará con arrastrar el enlace en cuestión a la barra de marcadores de nuestro navegador.

Prueba a hacerlo con los siguientes:

Bookmarklets útiles para tu productividad web

• Restaurar selección de texto: [Activar selección de texto]

• Restaurar clic con el botón derecho: [Activar clic derecho]

• Editar la web: ¿Quieres poder alterar el texto de una página web como si estuvieras escribiendo en MS Word? Pues esto es lo que estás buscando. [Edita la web]

• Búsqueda de segunda opinión: Si estás viendo la página de resultados de Google o de Bing, pero no te convencen los resultados, puedes usar este bookmarklet para abrir una nueva página de búsquedas en otro buscador. Concretamente, en este ejemplo, del nuevo buscador de Brave. [Buscar también en Brave]

• Diferenciar enlaces por tipo: Un clic en este bookmarklet y todos los enlaces de la web que estás visualizando adquirirán un determinado color de fondo según si son enlacen internos (rojo, por defecto), externos (azul) o si están actualmente abiertos (naranja). Una pequeña (e intuitiva) edición del código nos permitirá personalizar dicho código de colores. [Diferenciar enlace]

• The Printliminator: Este bookmarklet está pensado facilitar la tarea de imprimir una página web… ayudándonos en el proceso de ir borrando a golpe de clic elementos de la misma que no queramos ver impresos; para ello, desplegará una ventana superpuesta dentro de la pestaña del navegador. También disponible como extensión. [Prepara esta web para imprimir]

• Generador de contraseñas: Si no usas un gestor de contraseñas, puedes recurrir a este ingenioso bookmarklet que encripta el dominio de la web que estemos usando una ‘contraseña maestra’ que nosotros mismos le proporcionaremos. Cada vez que volvamos a usarlo en la misma web, nos devolverá la misma contraseña. >5]|=0x80<>9)<<4)+15]=len;var%20w=Array(80);var%20a=1732584193;var%20b=-271733879;var%20c=-1732584194;var%20d=271733878;var%20e=-1009589776;for(var%20i=0;i<x.length;i+=16){var%20olda=a;var%20oldb=b;var%20oldc=c;var%20oldd=d;var%20olde=e;for(var%20j=0;j<80;j++){if(j<16)w[j]=x[i+j];else%20w[j]=rol(w[j-3]^w[j-8]^w[j-14]^w[j-16],1);var%20t=safe_add(safe_add(rol(a,5),sha1_ft(j,b,c,d)),safe_add(safe_add(e,w[j]),sha1_kt(j)));e=d;d=c;c=rol(b,30);b=a;a=t;}a=safe_add(a,olda);b=safe_add(b,oldb);c=safe_add(c,oldc);d=safe_add(d,oldd);e=safe_add(e,olde);}return%20Array(a,b,c,d,e);}function%20sha1_ft(t,b,c,d){if(t<20)return%20(b&c)|((~b)&d);if(t<40)return%20b^c^d;if(t<60)return%20(b&c)|(b&d)|(c&d);return%20b^c^d;}function%20sha1_kt(t){return%20(t<20)?1518500249:(t<40)?1859775393:(t>16)+(y>>16)+(lsw>>16);return%20(msw<<16)|(lsw&0xFFFF);}function%20rol(num,cnt){return%20(num<>>(32-cnt));}function%20str2binb(str){var%20bin=Array();var%20mask=(1<<chrsz)-1;for(var%20i=0;i>5]|=(str.charCodeAt(i/chrsz)&mask)<<(24-i);return%20bin;}function%20binb2b64(binarray){var%20tab=%27ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/%27;var%20str=%27%27;for(var%20i=0;i>2]>>8*(3-i%254))&0xFF)<>2]>>8*(3-(i+1)%254))&0xFF)<>2]>>8*(3-(i+2)%254))&0xFF);for(var%20j=0;jbinarray.length*32)str+=b64pad;else%20str+=tab.charAt((triplet>>6*(3-j))&0x3F);}}return%20str;}function%20doIt(){var%20master=window.prompt(%27Enter%20your%20master%20password%27);if(master!=%27%27&&master!=null){host=document.location.href.match(/http(s*)://([^/]+)/)[2];if(sld=host.match(/([^.]+.([a-z][a-z][a-z]+|a[^abhjkpvy]|b[^cdklnpqux]|c[^bejkpqsty]|d[ejkmoz]|e[cegsu]|f[imor]|g[^cjkouvxz]|h[kmnrtu]|i[demnoqrst]|j[eop]|k[gimnpryz]|l[abcikrstuvy]|m[^bfijmz]|n[acefgloru]|om|p[aefhklmnrstwy]|qa|r[eosuw]|s[^fpqsw]|t[^abeiqrsuxy]|u[agsyz]|v[aceginu]|w[fs]|yt))$/i)){domain=sld[0];}else{domain=host.match(/([^.]+.[^.]+.[a-z][a-z])$/i)[0];}var%20i=0,j=0,p=b64_sha1(master+%27:%27+domain).substr(0,13)+%27@1a%27,E=document.getElementsByTagName(%27input%27),g=false;;for(j=0;j[Generar contraseña]

• Wappalyzer: Este bookmarklet (también disponible como extensión del navegador) nos muestra información sobre qué tecnologías web se han utilizado en la creación del sitio en cuestión (base de datos, gestor de contenidos, bibliotecas JS, sistema de analítica, plataforma de publicidad online, etc). [Ver tecnologías web]

(function() { window._JS_MODULES = window._JS_MODULES || {}; var headElement = document.getElementsByTagName(‘head’)[0]; if (_JS_MODULES.instagram) { var instagramScript = document.createElement(‘script’); instagramScript.src = ‘https://platform.instagram.com/en_US/embeds.js’; instagramScript.async = true; instagramScript.defer = true; headElement.appendChild(instagramScript); } })();

–
La noticia Qué son los bookmarklets y cómo usarlos (y ocho útiles ejemplos) fue publicada originalmente en Genbeta por Marcos Merino .