Generador de bookmarklets: convierte JavaScript en un bookmarklet

Cómo usar este generador de bookmarklets

1. Ponle un nombre al marcador y pega tu JavaScript en el cuadro de código, o pulsa Cargar el ejemplo del título de la página para ver un ejemplo terminado. El javascript: inicial es opcional: el generador lo quita y añade el suyo.
2. Pulsa Crear bookmarklet. La URL generada aparece debajo, con su longitud en caracteres.
3. Arrastra el botón oscuro a tu barra de marcadores. Si la barra está oculta, actívala antes desde el menú Ver o los ajustes de tu navegador.
4. Abre cualquier página y pulsa el marcador. El script se ejecuta una vez, sobre esa página.

Pulsar el botón en esta página no hace nada a propósito: un bookmarklet está pensado para ejecutarse en la página que estás leyendo, no en el generador.

Qué es en realidad un bookmarklet

Un bookmarklet es un marcador normal del navegador cuya dirección empieza por javascript:en lugar de https:. Abres una página, pulsas el marcador y el navegador ejecuta tu script sobre esa página en vez de navegar a otro sitio. Los bookmarklets sirven para acciones propias de una página: copiar una cita con formato, activar una vista de lectura, extraer el texto seleccionado o abrir la URL actual en otro servicio. No requieren instalar ninguna extensión, no piden permisos y viven en la barra de marcadores como cualquier otro enlace.

Cómo convertir JavaScript en un bookmarklet

Convertir un script a mano son tres pasos, y el generador hace cada uno por ti. Este es un script de dos líneas y el bookmarklet en que se convierte:

const n = document.links.length;
alert(n + ' enlaces en esta página');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20enlaces%20en%20esta%20p%C3%A1gina')%3B%0A%7D)()

1. Envuelve el código en una función

La herramienta mete tu código dentro de una función flecha de invocación inmediata,(() => { … })(). Así tus variables no chocan con lo que la página ya define y, además, importa por un segundo motivo: cuando el código de una URL javascript:termina con un valor de texto, el navegador sustituye la página por un documento nuevo que muestra ese texto. Una función con cuerpo en bloque no devuelve nada, así que la página se queda donde está. Si lo escribes a mano, la alternativa clásica es empezar el código convoid.

2. Codifícalo con porcentajes

Los navegadores eliminan los caracteres de tabulación y de salto de línea sin codificar de cualquier URL antes de usarla, así que un script de varias líneas pegado tal cual en un marcador queda aplastado en una sola línea. Entonces un único comentario // se traga todo lo que viene después, y las instrucciones que dependían de los saltos de línea se pegan unas a otras. Al codificar, cada salto de línea pasa a ser %0A, que sobrevive; el navegador decodifica el código otra vez justo antes de ejecutarlo. La codificación también protege los espacios, las comillas dobles, el % y el#.

3. Añade el prefijo javascript:

El esquema javascript: es lo que le dice al navegador que ejecute el resto de la dirección como script. La cadena terminada es la que arrastras a la barra o pegas en un marcador.

Cómo instalar un bookmarklet

En el ordenador

Arrastra el botón oscuro a la barra de marcadores de Chrome, Edge, Firefox, Safari o cualquier otro navegador de escritorio. Si arrastrar no te resulta cómodo, pulsaCopiar la URL del marcador, crea un marcador nuevo y pega la URL en su campo de dirección.

En iPhone, iPad y Android

Los navegadores móviles no tienen una barra de marcadores a la que arrastrar, así que usa el método de edición:

1. Pulsa Copiar la URL del marcador.
2. Guarda como marcador cualquier página; esta sirve.
3. Abre tus marcadores, edita el marcador nuevo y sustituye su dirección por la URL javascript: copiada. Aprovecha para cambiarle el nombre.
4. Ve a la página en la que quieres ejecutarlo. En Safari para iPhone o iPad, abre el marcador desde tu lista de marcadores. En Chrome para Android, escribe el nombre del bookmarklet en la barra de direcciones y toca la sugerencia del marcador; abrirlo desde la pantalla de marcadores te saca de la página, y entonces no tiene nada sobre lo que ejecutarse.

No lo pegues en la barra de direcciones

Parece un atajo, pero Chrome elimina a propósito el javascript: inicial del texto que se pega en la barra de direcciones, una defensa contra las estafas que engañan a la gente para que pegue código malicioso. Lo que queda se trata como una búsqueda. Guardar el código como marcador es la vía fiable.

Ejemplos de bookmarklets que puedes pegar

Todos usan solo las API estándar del navegador. Pega uno en el cuadro de código de arriba, pulsa Crear bookmarklet e instálalo.

Copiar la página como enlace en Markdown

Abre un cuadro con el enlace seleccionado, listo para copiar.

prompt('Enlace en Markdown:', '[' + document.title + '](' + location.href + ')');

Contar las palabras que seleccionaste

Selecciona primero el texto y después pulsa el bookmarklet.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert(words + ' palabras seleccionadas');

Hacer editable la página

Púlsalo otra vez para desactivar la edición. Al recargar vuelve el original.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

Abrir la página en la Wayback Machine

Muestra las copias archivadas de la página en la que estás.

location.href = 'https://web.archive.org/web/*/' + location.href;

Usos habituales de los bookmarklets

Por qué un bookmarklet no funciona

La política de seguridad del sitio lo bloquea

Si un bookmarklet funciona en la mayoría de los sitios pero no hace nada en uno, mira la Content-Security-Policy de ese sitio. La especificación de CSP dice que la política de una página no debería interferir con los bookmarklets, pero los navegadores aún pueden bloquear las URL javascript: en páginas cuyas reglas script-src son estrictas. Un bookmarklet que inyecta un script de otro dominio se ve afectado dos veces: aunque se ejecute, la política de la página decide si ese script externo puede cargarse. Nada dentro del bookmarklet puede anular esto. Si necesitas el script en un sitio así, la salida es una extensión del navegador o un userscript.

La página se convirtió en una página en blanco con texto

Tu código terminaba con un valor de texto y el navegador lo mostró como una página nueva. Quita cualquier return que devuelva texto. Si escribiste el bookmarklet a mano, regenerarlo aquí lo envuelve en una función, de modo que una expresión de texto final ya no sustituye la página.

No pasa nada y no hay ningún error

Abre la consola de desarrollador de tu navegador y pulsa el bookmarklet otra vez. Los errores de sintaxis, los elementos que faltan y los scripts bloqueados se muestran ahí. Una causa frecuente en los bookmarklets hechos a mano es un comentario // que acabó en la misma línea que el resto del código; regenerarlo a partir del código original lo arregla.

Cómo editar un bookmarklet existente

Copia la dirección del marcador, quita el javascript: inicial y decodifica el resto con el codificador y decodificador de URL (en inglés) para recuperar el código legible. Haz tu cambio, pega el código en este generador de bookmarklets y sustituye la dirección del marcador antiguo por la URL nueva. Guardar el código original en un archivo de texto te ahorra este vaivén.

La seguridad importa

Un bookmarklet se ejecuta con el mismo acceso que tienen los scripts de la propia página: puede leer y modificar todo lo que la página expone. Revisa el código antes de instalarlo, evita los fragmentos que cargan scripts remotos (una URL que controla otra persona puede cambiar después de que la instales) y no ejecutes nunca un bookmarklet desconocido en una página con información sensible. Si un sitio web, un mensaje o un vídeo te pide que pegues código en un marcador o en la barra de direcciones, trátalo como una estafa.

Bookmarklet, userscript o extensión

Los tres se parecen, pero responden a necesidades distintas. Un bookmarkletes un script que se ejecuta una vez, en una página, cuando lo pulsas: cero instalación y viaja con tus marcadores. Un userscript (gestionado por un gestor de userscripts) se asocia a los sitios que coinciden y puede ejecutarse automáticamente en cada visita, conservando sus propios ajustes entre páginas. Una extensión del navegadorpuede hacer ambas cosas y más (trabajo en segundo plano, interceptación de red, iconos en la barra de herramientas), a cambio de un paso de instalación y de permisos amplios que el navegador te muestra desde el principio. Las políticas de seguridad de las páginas también tratan distinto a las extensiones: la especificación de CSP señala que Chrome se esfuerza por que las inyecciones desde extensiones sigan funcionando sea cual sea la política de la página. Empieza por el bookmarklet y pasa a otra cosa solo cuando choques con sus límites.

Límites: cuándo no usar un bookmarklet

Un bookmarklet solo se ejecuta cuando lo pulsas, en una página cada vez. No puede conservar el estado entre visitas, actuar en segundo plano ni modificar todas las páginas de forma automática. La longitud rara vez es el problema (Chrome documenta una longitud máxima de URL de 2 MB), pero un script largo se convierte en una URL de marcador ilegible y, a ese tamaño, un gestor de userscripts o una extensión es más fácil de mantener. Además, los cambios que hace un bookmarklet desaparecen al recargar: si quieres resaltados que sigan ahí la próxima vez, consulta cómo resaltar texto en cualquier web y conservarlo. Y si el trabajo es «guardar esta página con un clic» y no «ejecutar un fragmento», una extensión del navegador hecha para eso lo resuelve sin que tengas que mantener código.

Privacidad: adónde va tu código

A ninguna parte. El nombre, el fragmento y la URL generada no salen de la página: crear un bookmarklet no implica ninguna petición de red. Una advertencia honesta: el bookmarklet terminado se guarda como un marcador normal, así que si sincronizas los marcadores entre dispositivos, el script viaja con tus demás marcadores y es visible para cualquier cosa que pueda leer ese perfil sincronizado.

Herramientas y guías relacionadas

El bookmarklet de enlace en Markdown de arriba copia un enlace cada vez; para convertir el HTML de toda una página en Markdown, usa el convertidor de HTML a Markdown (en inglés). Si los enlaces que copias van llenos de parámetros de seguimiento, el limpiador de URLs los quita. Para guardar y trabajar con páginas sin escribir ningún script, consulta elresaltador web de Marqly, elgestor de marcadores para Chrome y el flujo desegundo cerebro, o lee la guía sobrecómo organizar los marcadores del navegador.