La guía completa de Bookmarklets

Definitivamente estás familiarizado con los marcadores. La capacidad de marcar, guardar o “marcar” páginas web ha sido un elemento básico de los navegadores durante décadas. Sin embargo, el navegador no sólo le permite marcar páginas web. También puede marcar JavaScript para poder hacer más que simplemente guardar la página.

Los scripts de JavaScript almacenados como marcadores se denominan “marcadores”, aunque algunas personas también utilizan los términos “favelet” o “favlet”. Los bookmarklets existen desde finales de la década de 1990. los sitios web que los crean, bookmarklets.comincluso todavía existe hoy. Son simples y versátiles, como lo demuestra el hecho de que la mayoría de los bookmarklets enumerados en el sitio web mencionado anteriormente todavía se pueden utilizar hoy en día a pesar de que no se han tocado durante más de veinte años.

Aunque los bookmarklets se han quedado un poco en el camino en los últimos años a medida que los navegadores han aumentado en funcionalidad y las herramientas de desarrollo han madurado, siguen siendo una herramienta valiosa en el arsenal de cualquier desarrollador web. Son simples pero potentes y no requieren software adicional para crearlos o utilizarlos. Si observas trabajar a un buen maquinista o ingeniero, verás que constantemente construye herramientas y utilidades, incluso artilugios únicos, para resolver problemas o encontrar soluciones más elegantes mientras trabaja. Como desarrolladores, debemos esforzarnos por hacer lo mismo y los marcadores son la manera perfecta de facilitarlo.

hacer marcadores

Los marcadores son muy fáciles de hacer. Los scripts se escriben exactamente de la misma manera que se escriben scripts para la consola del navegador. Luego guárdelo como marcador y prefiéralo con javascript: Especifíquelo para usarlo en la barra de URL del navegador.

Hagamos un marcador súper básico, uno que envíe una alerta simple. Usaremos el siguiente código que activa un mensaje usando el siguiente comando alert() métodoy márquelo como favorito.

alert("Hello, World!");

A continuación, convertiremos esto en una expresión de función llamada inmediatamente (IIFE), que tiene algunos beneficios. Primero, crea un nuevo alcance para evitar contaminar el espacio de nombres global y evita que nuestro bookmarklet interfiera con el JavaScript existente en la página y viceversa. En segundo lugar, hará que el bookmarklet se active al hacer clic.

Haremos esto envolviéndolo en una función anónima (lambda) (por ejemplo, (() => {})) y agregue el sufijo ();que ejecutará nuestra función.

(() => {
  alert("Hello, World!");
})();

Para lograr confiabilidad en todos los navegadores, sería ventajoso codificar en URL nuestros bookmarklets para escapar de los caracteres especiales. Si no hace esto, los navegadores pueden cometer errores y malinterpretar nuestro código. Incluso si no es del todo necesario para un marcador simple como este, evitará muchos problemas que pueden surgir con una mayor complejidad. Puedes codificar tus marcadores tú mismo usando JavaScript encodeURIComponent() función, o puede utilizar una de las muchas herramientas existentes. También lo reducimos a una línea.

(()%3D%3E%7Balert(%22Hello%2C%20World!%22)%3B%7D)()%3B

Debemos agregar el prefijo javascript: De esta manera nuestro navegador sabe que no se trata de una URL estándar para una página web, sino de un marcador de JavaScript.

javascript:(()%3D%3E%7Balert(%22Hello%2C%20World!%22)%3B%7D)()%3B

Instalar marcador

Por último, tenemos que añadirlo como favorito en el navegador. Como es de esperar, mucho depende del navegador que estés utilizando.

En Safari en macOS, la forma más sencilla es marcar una página web y luego editar el marcador en un bookmarklet:

En la versión de escritorio de Firefox, la forma más sencilla es hacer doble clic en la barra de herramientas de marcadores y luego en “Agregar marcador…”:

En la versión de escritorio de Chrome, la forma más sencilla es hacer doble clic en la barra de herramientas de marcadores y luego en “Agregar nueva página…”:

Muchos navegadores móviles también permiten la creación y uso de marcadores. Esto es especialmente valioso porque las herramientas de desarrollo de navegadores a menudo no están disponibles en dispositivos móviles.

Marcadores CSS

Sin duda miraste la palabra “JavaScript” arriba con desdén. Esto es CSS-Es una habilidad después de todo. No tengas miedo, porque hay muchas formas de crear un bookmarklet que aplique CSS a tu página.

Desde una perspectiva creativa, mi método favorito es crear un <style> El elemento que contiene el contenido que seleccioné:

javascript: (() => {
  var style = document.createElement("style");
  style.innerHTML = "body{background:#000;color:rebeccapurple}";
  document.head.appendChild(style);
})();

Una forma más elegante es utilizar CSSStyleSheet interfaz. Este enfoque permite actualizaciones incrementales y le permite acceder directamente al modelo de objetos CSS (CSSOM) para leer selectores, modificar propiedades existentes, eliminar o reordenar reglas e inspeccionar estructuras calculadas. El navegador también valida los valores ingresados ​​de esta manera, lo que ayuda a evitar que ingrese CSS incorrecto. Es más complejo, pero también te da más control.

javascript: (() => {
  const sheet = new CSSStyleSheet();
  document.adoptedStyleSheets = (...document.adoptedStyleSheets, sheet);
  sheet.insertRule("body { border: 5px solid rebeccapurple !important; }", 0);
  sheet.insertRule("img { filter: contrast(10); }", 1);
})();

Cuando escribimos CSS para que sea universal en cualquier página en la que deseemos utilizar un bookmarklet, es importante darnos cuenta de que podemos encontrarnos con problemas de especificidad o conflictos con la hoja de estilo existente de la página. usar !important A menudo se considera un mal olor a código, pero en el caso de anular estilos existentes desconocidos, era un enfoque razonable para nuestras necesidades.

límite

Desafortunadamente, existen algunos obstáculos que pueden impedirnos utilizar bookmarklets. La más común es la Política de seguridad de contenido (CSP). CSP es una característica de seguridad diseñada para evitar comportamientos maliciosos, p. secuencias de comandos entre sitios El ataque se lleva a cabo permitiendo que el sitio web regule qué contenido se puede cargar. Por ejemplo, no desea permitir que se ejecute un script en el sitio web de un banco. Los bookmarklets que dependen de solicitudes de origen cruzado (solicitudes desde fuera del sitio web actual) a menudo se bloquean. Por lo tanto, lo ideal es que un bookmarklet sea independiente y no dependa de nada externo. Si sospecha que un bookmarklet está bloqueado por la política de seguridad de un sitio, puede verificar si hay errores en la consola de las herramientas de desarrollo de su navegador.

Dado que el bookmarklet es solo una URL, no existe ningún límite estricto en la longitud que puede especificar. En uso, el navegador impone límites, aunque son más altos que los que encontrará en la mayoría de situaciones. En mis propias pruebas (que pueden variar según la versión y la plataforma), estos son los límites superiores que encontré: El marcador más grande que puedo crear en Firefox y Safari es 65536 bytes. Firefox no me permite crear más marcadores, Safari me permite crear uno, pero no hace nada cuando se activa. La longitud máxima de marcador que puedo crear en Chrome es 9999999 caracteres, después de lo cual empiezo a tener problemas para interactuar con el cuadrado de texto. Si le lleva más tiempo, puede considerar cargar el script desde una ubicación externa, teniendo en cuenta las limitaciones de CSP mencionadas anteriormente:

javascript:(() => {
  var script=document.createElement('script');
  script.src="https://example.com/bookmarklet-script.js";
  document.body.appendChild(script);
})();

De lo contrario, podría considerar utilizar una herramienta de script para el consumidor como mono manipuladoro, para algo más avanzado, crea tu propia extensión de navegador. Otra opción es Crear un fragmento en las herramientas de desarrollo del navegador. Los marcadores funcionan mejor para fragmentos pequeños.

marcador genial

Ahora que sabe qué son los bookmarklets y comprende hasta cierto punto sus funciones, podemos echar un vistazo a algunos bookmarklets útiles. Sin embargo, antes de hacer eso, quiero enfatizar que debes tener cuidado al ejecutar los marcadores que encuentres en línea. Los marcadores que encuentras en la web son códigos escritos por otra persona. Como siempre, debéis permanecer alerta, cautelosos y perspicaces. La gente puede y ha escrito marcadores maliciosos para robar credenciales de cuentas o algo peor.

Entonces si pegas javascript: Ingrese a la barra de direcciones y el navegador la eliminará automáticamente. javascript: prefijo para evitar que las personas activen accidentalmente el bookmarklet. Es necesario volver a introducir el prefijo. para evitar javascript: Los bookmarklets despojados generalmente se distribuyen como enlaces en la página que arrastra y suelta en el marcador.

Los marcadores específicos se han discutido anteriormente en CSS-Tricks. Dada la evolución de los navegadores y las plataformas web, gran parte de este contenido ahora está desactualizado, pero algunos artículos más modernos incluyen:

Asegúrese de revisar los comentarios de estas publicaciones, ya que contienen toneladas de excelentes marcadores de la comunidad. Hablando de bookmarklets comunitarios:

Si tiene marcadores dorados valiosos, asegúrese de compartirlos en los comentarios.