Hasta hace poco más de un año no tenía ni idea de que eran los Bookmarklets y leyendo un post del blog de Manuel Prieto descubrí estos trocitos de código que me engancharían.
Los bookmarklets son pequeños programas escritos en JavaScript que se guardan como marcadores en tu navegador. Pueden ejecutar tareas útiles con solo hacer clic en ellos, sin necesidad de instalar extensiones. ¡Son como pequeñas dosis de magia digital que hacen tu vida en línea más fácil!
En el post de Manuel, habla de mostrar los encabezados de una web de forma rápida y directamente sobre la web renderizada sin necesidad de utilizar las devstools o mirar el código fuente. En este caso os traigo un par de ejemplos y algunas ideas más para que las desarrolléis vosotros mismos.
Obtener todos los enlaces de una web
Más de una vez he querido obtener todos los enlaces de una web y hay muchas formas de hacerlo pero tener esto a mano a golpe de marcador es un gustazo. Este fue uno de los primeros, o quizá el primero, que hice y aquí lo tenéis.
javascript:(function() {
let win = window.open('', '', 'width=600,height=400');
let links = document.querySelectorAll('a');
let style = `
<style>
body { font-family: Arial, sans-serif; padding: 20px; background-color: #2e2e2e; color: #fff;}
h1 { font-size: 24px; }
ul { list-style-type: none; padding: 0; }
li { margin: 5px 0; }
a { text-decoration: none; color: #fff; }
a:hover { text-decoration: underline; }
button { background-color: #1a73e8; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-bottom: 20px; cursor: pointer; }
</style>
`;
win.document.write(`
<html>
<head>
<title>Enlaces</title>
${style}
</head>
<body>
<button onclick="copyLinks()">Copiar todos los enlaces</button>
<h1>Enlaces en esta página</h1>
<ul>
`);
links.forEach(link => {
if (link.href.trim() !== '') {
win.document.write(`
<li>
<a href="${link.href}" target="_blank">${link.href}</a>
</li>
`);
}
});
win.document.write(`
</ul>
<footer>Build by <a href="https://d-v.es">dvillodres</a></footer>
<script>
function copyLinks() {
let links = document.querySelectorAll('a');
let linkList = '';
links.forEach(link => {
if (link.href.trim() !== '') {
linkList += link.href + '\\n';
}
});
const tempInput = document.createElement('textarea');
tempInput.value = linkList;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
}
</script>
</body>
</html>
`);
})();Genera una imagen con tu quote favorito
¿Alguna vez has querido compartir una cita inspiradora que encontraste en la web pero con un toque personal? Aquí te dejo un bookmarklet que convierte cualquier texto seleccionado en una imagen. Solo copia el siguiente código y guárdalo como un marcador en tu navegador, también te invito a probar modificando el código para adaptarlo a tu gusto.
javascript:(function() {
let selectedText = window.getSelection().toString();
const bgColor = '#1e1e1e';
const color = '#eee';
if (!selectedText) return;
let canvas = document.createElement('canvas');
canvas.width = 1000;
canvas.height = 1000;
let ctx = canvas.getContext('2d');
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = color;
ctx.font = '200px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('“', 50, 100);
ctx.font = '50px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
let lines = getLines(ctx, selectedText, canvas.width - 200);
lines.forEach((line, i) => {
ctx.fillText(line, 120, canvas.height / 2 - 120 + i * 60);
});
ctx.textAlign = 'center';
ctx.font = '20px Arial';
let url = window.location.href;
ctx.fillText(url, canvas.width / 2, canvas.height - 50);
let link = document.createElement('a');
link.download = 'quote.jpg';
link.href = canvas.toDataURL('image/jpeg');
link.click();
function getLines(ctx, text, maxWidth) {
let words = text.split(' ');
let lines = [];
let currentLine = words[0];
for (let i = 1; i < words.length; i++) {
let word = words[i];
let width = ctx.measureText(currentLine + ' ' + word).width;
if (width < maxWidth) {
currentLine += ' ' + word;
} else {
lines.push(currentLine);
currentLine = word;
}
}
lines.push(currentLine);
return lines;
}
})();Cómo guardar y usar un bookmarklet
- Copia el código: Selecciona todo el código del bookmarklet que te interese y cópialo.
- Crea un nuevo marcador: Abre tu navegador, ve a los marcadores y crea uno nuevo.
- Pega el código: En la URL del marcador, pega el código copiado.
- Nómbralo: Ponle un nombre atractivo y reconocible.
- Úsalo: Navega a cualquier página, selecciona el texto que te guste, y haz clic en tu nuevo bookmarklet. ¡Voilá! Obtendrás una imagen con tu cita seleccionada.
Otros bookmarklets útiles
Aquí te dejo algunas ideas de bookmarklets que puedes tratar de desarrollar por tu cuenta y así obtener funcionalidades que te interesen y prácticar tus habilidades de programación.
- Eliminar Ads: Elimina todos los anuncios y elementos no deseados para una experiencia de lectura limpia.
- Modo Oscuro: Cambia el esquema de colores de cualquier sitio web a un tema oscuro para una navegación más cómoda por la noche.
- Descargar Imágenes: Descarga todas las imágenes de una página con un solo clic.
Espero que te haya resultado interesante este artículo, si tienes alguna duda me puedes encontrar en twitter o x o lo que sea como @dvillodres_, si creas tus propios Bookmarklets también me encantaría probarlos.
