Artículo original escrito por Seth Falco
Artículo original What are Bookmarklets? How to Use JavaScript to Make a Bookmarklet in Chromium and Firefox
Traducido y adaptado por Keiler Guardo Herrera

Bookmarklets son marcadores del navegador que ejecutan JavaScript en lugar de abrir una página web. También se conocen como applets de marcadores, favlets o marcadores de JavaScript.

Los Bookmarklets están disponibles de forma nativa en los principales navegadores, incluyendo Mozilla Firefox y navegadores basados en Chromium como Chrome o Brave.

Scripting con JavaScript

Aprender a escribir scripts ofrece muchas ventajas, sobre todo el enorme ahorro de tiempo que supone automatizar tareas repetitivas o tediosas.

Si no eres un desarrollador, la idea de aprender a codificar puede ser intimidante, sin embargo, el scripting no requiere conocimientos de ingeniería de software o patrones de diseño. El objetivo no es hacer software escalable, sino automatizar tareas especializadas o triviales.

Independientemente de la profesión, incluso si nunca has escrito código antes, considera lo que haces en tu navegador. Si alguna vez sientes que lo que haces es repetitivo o robótico, considera la posibilidad de delegar la tarea a un robot real.

Casos de uso de los Bookmarklets

Con los bookmarklets, puedes manipular la página actual, ya que la función tendrá el contexto de la pestaña actual. Esto significa que puedes:

  • Hacer clic en los botones virtualmente
  • Modificar el contenido
  • Utilizar el contenido de la página para abrir una nueva página
  • Eliminar elementos de la página

También puedes hacer marcadores que no utilicen el contexto en absoluto, como abrir condicionalmente una URL o generar HTML para una nueva pestaña.

Encontrarás algunos bookmarklets que se realizaron para este artículo en la sección de Ejemplos de Bookmarklets. Son solo para demostración, pero deberían hacer evidentes las capacidades e implementaciones.

Como crear Bookmarklets

La creación de un bookmarklet es casi idéntica a la de un marcador normal. La única diferencia es que escribirás JavaScript en el campo de URL en lugar de una URL HTTP/HTTPS.

Mozilla Firefox

Ya sea en la barra de marcadores o en la barra lateral de marcadores (CTRL + B), puedes hacer clic con el botón derecho del ratón y luego hacer clic en "Añadir marcador...":

The "Add bookmark" modal when creating a new bookmark in Firefox.

Chromium

Puedes hacer clic con el botón derecho del ratón en la barra de marcadores y luego hacer clic en "Añadir página...". También puedes ir a tu administrador de marcadores, hacer clic con el botón derecho del ratón y pulsar "Añadir nuevo marcador":

The "Edit bookmark" modal when creating a new bookmark in Chromium.

Como escribir un Bookmarklet

En el campo URL del marcador, escriba una función JavaScript con el siguiente formato.

javascript: (() => {
  // Tu código aquí!
})();

javascript: es el protocolo de la URL. Indica que el navegador debe ejecutar el marcador como JavaScript.

(() => { }) define una función anónima (lambda). Debes escribir el código que quieres ejecutar entre las llaves.

(); ejecutará la función anónima que acabas de crear.

javascript: (() => {
  alert('Hola, Mundo!');
})();
"Hola, Mundo!", como un marcador del navegador.
A browser alert with the message: "Hello, World!"

También puedes hacer que genere HTML y abrirlo como un documento HTML:

javascript: (() => {
  return '<h1 style="color: white; background-color: black;">Hola, Mundo!</h1>';
})();

Espacio para los Bookmarklets

La mayoría de los navegadores no permiten un campo de entrada de varias líneas en la URL de los marcadores, por lo que normalmente tendrás que hacer un uso estricto de llaves ({ y }), también puntos y comas (;) cuando escribas bookmarklets. Esto es especialmente importante cuando se trata de construcción de condicionales (if/for/while).

Aparte de esto, el espaciado no importa. No tengas miedo de tener mucho código en una línea porque es todo lo que tienes:

javascript: (() => {   const documentoHTML = document.documentElement.outerHTML;   const coincidencias = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);   const coincidenciasFijas = Array.from(coincidencias).map((elemento) => elemento[0]);   const coincidenciasUnicas
 = Array.from(new Set(coincidenciasFijas));      if (coincidenciasUnicas.length > 0) {     const resultado = coincidenciaFija.join('\n');     alert(resultado);   } else {     alert('No se han encontrado correos electrónicos.');   } })();
Ejemplo de una función JavaScript escrita en una línea.

Si tu script es complejo, será más fácil mantener tu bookmarklet en un editor de código como Visual Studio Code. Puedes copiarlo y pegarlo en tu navegador cuando esté listo.

Cómo interactuar con los sitios web

Lo más habitual es que los bookmarklets sirvan para manipular o interactuar con los sitios web que tienes abiertos.

El Global Document Object

Como el bookmarklet tiene el contexto de la página en la que se encuentra, tiene acceso al document object.

Las funciones ideales para seleccionar elementos para nuestro caso de uso son:

  • querySelector para seleccionar un solo elemento por el selector CSS.
  • querySelectorAll para seleccionar todos los elementos que coincidan por el selector CSS.
  • evaluate para seleccionar todos los elementos coincidentes por XPath.

Existen otras funciones como getElementById y getElementsByClassName, pero queremos evitar los falsos positivos, por lo que siempre haremos una selección estricta utilizando múltiples atributos de elementos.

Selectores CSS y XPath

Si solamente está seleccionando elementos basados en nombres de los elementos, IDs, clases y otros atributos, usar un selector CSS será simple y eficiente.

Los selectores CSS se emplean para seleccionar elementos en documentos HTML para aplicar estilos. Si estás familiarizado con el desarrollo web o con CSS en general, entonces ya sabes cómo utilizar los selectores CSS. (Más información: MDN)

Si también necesita hacer coincidir el contenido de texto de un elemento, entonces tendrá que usar XPath en su lugar.

XPath se emplea para atravesar documentos XML, proporciona todas las capacidades de los selectores de CSS y más, incluida la comparación del contenido de los elementos o el uso de una expresión regular para que coincida. (Más información: MDN , Wikipedia).

Cómo seleccionar elementos de la página web

Uno de los usos más comunes de los bookmarklets es la manipulación de páginas web. Para interactuar, manipular o eliminar elementos de la página, siempre tendrá que seleccionar los elementos primero.

  1. Primero abra las herramientas de desarrollo del navegador presionando, F12o CTRL+ SHIFT+I .
  2. Haga clic en Inspector de página / Elementos, que muestra el documento HTML completo de la página que tiene abierta.
  3. Utilice la herramienta de selección de elementos (CTRL+ SHIFT+ C) y haga clic en el elemento con el que desea interactuar. El visor de documentos se desplazará hasta el elemento en el que hizo clic en el documento HTML. Verá el ID del elemento, las clases y los atributos.
  4. Comprueba si estás en el elemento correcto. Los elementos se pueden anidar donde es más fácil navegar manualmente en el HTML. Por ejemplo, es posible que haya hecho clic en un elemento svg, pero en realidad necesitaba el button o un div dentro del mismo.
  5. Defina un selector de CSS o XPath que coincida con todo lo que desea, es posible que desee que sea más estricto de lo necesario para evitar posibles falsos positivos.

Por ejemplo, supongamos que quisiera descartar todas las sugerencias de temas en Twitter porque son molestas. Así es como se ve un elemento en el que se puede hacer clic para descartar un tema.

Sugerencias de temas de Twitter, con un botón X para marcarlo como "No me interesa".
Sugerencias de temas de Twitter, con un botón X para marcarlo como "No me interesa".
<div aria-label="Dismiss" role="button" tabindex="0" class="...">
  <!-- El elemento div padre está escuhando los clics -->
  <div class="...">
    <svg viewBox="0 0 24 24" aria-hidden="true" class="...">
      <!-- El icono actual de la X. -->
    </svg>
  </div>
</div>

Un selector apropiado es div[aria-label=Dismiss][role=button].

Necesitamos usar la función querySelectorAll del Global Document Object , luego llamar el método click para simular un clic.

Se puede implementar un bookmarklet para seleccionar cada botón de eliminar y activar un evento clic para todos ellos, con un intervalo de 250 ms.

javascript: (() => {
  const selector = 'div[aria-label=Dismiss][role=button]';
  const temas = document.querySelectorAll(selector);
    
  for (let i = 0; i < temas.length; i++) {
    let tema = temas[i];
    setTimeout(() => tema.click(), i * 250);
  }
})();
Marca todos los temas sugeridos en Twitter como "No me interesa".

Cómo redistribuir marcadores

Para "instalar" un bookmarklet, los usuarios crean un marcador en su navegador, copian y pegan el código en él.

Esto puede ser inconveniente, por lo que es común vincular bookmarklets al compartir. Esto es tan simple como ponerlo en el atributo href del enlace.

<a href="javascript: (() => {   alert('Hola, Mundo!'); })();">
  Hola, Mundo!
</a>

Ahora los usuarios pueden hacer clic derecho y "Agregar enlace", o arrastrarlo a la barra de marcadores para un fácil acceso.

Al hacer clic en el enlace de la página web, se ejecutará el script inmediatamente. Asegúrese de que no obstruya lo que un usuario está tratando de lograr en su sitio si accidentalmente hace clic en él.

Por ejemplo, el siguiente enlace mostrará una alerta con un "¡Hola, mundo!.

Omisión de política de seguridad de contenido y contenido de usuario

Si gestionas un servicio que permite que el contenido generado por el usuario contenga HTML personalizado, es importante limpiar los enlace (a).

El bookmarklet se ejecuta como código en la consola de herramientas para desarrolladores y omite la Política de seguridad de contenido (CSP) configurada.

El link de "¡Hola, mundo!" puede enviar datos con la misma facilidad a otro servidor, incluida la entrada de campos de formulario o cookies.

Como proveedor de servicios, es importante tener cuidado de que los usuarios puedan explotar esto para compartir código malicioso en su plataforma. Si su enlace se ejecuta en una página bajo su dominio, puede acceder a información confidencial en la página y document.cookies.

Puede probarlo usted mismo en un entorno de pruebas:

<a href="javascript: (() => {   alert(document.cookie); })();">
  ScriptMalicioso
</a>

Ejecute solo código en el que confíe

Como usuario, es importante tener en cuenta que cualquier código puede ser malicioso, sólo hay que hacer clic o añadir marcadores cuando al menos una de las siguientes cosas sea cierta:

  • Provino de una fuente confiable.
  • Conoce JavaScript y revisó lo que hace.
  • Alguien en quien confía conoce JavaScript y lo revisó por usted.

Privacidad y seguridad

Los bookmarklets pueden ser útiles, pero también tenemos extensiones web y scripts de usuario . ¿Qué los hace diferentes?

Las extensiones web son increíblemente fáciles de usar y flexibles. Los marcadores no pueden bloquear solicitudes de red, actualizar contenido a medida que cambia la página ni administrar pestañas.

Sin embargo, hay algunos beneficios en el uso de bookmarklets sobre cualquier otra cosa, a saber, para la privacidad y la seguridad.

Una extensión que modifica la fuente en todas las páginas debe obtener permiso para acceder a todos los datos en todas las páginas web. En Firefox y Chrome, esto incluye todos los campos de entrada y contraseña. (Más información: Mozilla , Google )

Por el contrario, un bookmarklet solo tiene acceso a la página en el momento en que se ejecuta y solo cuando el usuario lo activa manualmente.

Esto da como resultado un menor riesgo de malware, un empleado deshonesto no puede enviar una actualización maliciosa y los datos no se enviarán silenciosamente a otros servidores.

Chrome Web Store ha tenido previamente varias extensiones maliciosas que tuvieron que eliminarse. Algunos de los cuales tenían millones de instalaciones antes de ser eliminados. ( Más Información )

Ejemplo de Bookmarklets

Aquí hay una lista de ideas de bookmarklet, junto con el código que lo implementa. Puede copiarlos y pegarlos en nuevos marcadores para probarlos.

javascript: (() => {
  const documentHTML = document.documentElement.outerHTML;
  const coincidencias = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);
  const coincidenciasFijas = Array.from(coincidencias).map((elemento) => elemento[0]);
  const coincidenciasUnicas = Array.from(new Set(coincidenciasFijas));
  
  if (coincidenciasUnicas.length > 0) {
    const resultado = coincidenciasUnicas.join('\n');
    alert(resultado);
  } else {
    alert('o se han encontrado correos electrónicos.');
  }
})();
Busca enlaces como "Empleados", "Carreras" o "Contratación" en la página y hace clic en él.
javascript: (() => {
  const todoLosElementos = document.querySelectorAll('*');

  for (let elemento of todoLosElementos) {
    elemento.style.fontFamily = 'Comic Sans MS';
  }
})();
Establezca la fuente de todo el texto en la página actual en "Comic Sans MS".
javascript: (() => {
  const destino = "https://www.freecodecamp.org/";
  const alternativa = "https://tenor.com/Y6jj.gif";
  
  const fecha = new Date();
  const horas = fecha.getHours();
    
  if (horas < 3 || horas >= 6) {
    window.open(destino);
  } else {
    window.open(alternativa);
  }
})();
Abra freeCodeCamp, pero abra un GIF en su lugar si es entre las 03:00 y las 06:00.
javascript: (() => {
  const destino = "https://www.freecodecamp.org/";
  const alternativa = "https://tenor.com/Y6jj.gif";
  
  const fecha = new Date();
  const horas = fecha.getHours();
    
  if (horas < 3 || horas >= 6) {
    window.open(destino);
  } else {
    window.open(alternativa);
  }
})();
Abre freeCodeCamp, pero si la hora actual marca entre 03:00 y las 06:00 abre un GIF en su lugar.

¡Gracias por leer! Ahora ve y crea tus propios bookmarklets.