Вы когда-нибудь сталкивались с ситуацией, когда нужно постоянно делать одни и те же действия на веб-страницах? Копировать информацию из разных мест, преобразовывать текст или скрывать чувствительные данные перед скриншотом?
Сегодня расскажу про букмарклеты, которые решат эти проблемы за один клик.
Букмарклет (bookmarklet) — это скрипт на JavaScript, сохраненный как обычная закладка в браузере. Вместо URL-адреса в нем хранится код, который выполняется на текущей странице при клике.
🔥 Мой кейс
Нужно было собирать данные с разных страниц сайта. Написал букмарклет через LLM:
— Закинул HTML страницы
— Описал, что хочу на выходе
— Модель сама нашла нужные элементы и сгенерировала код
— Теперь за клик копирую отформатированный текст в буфер!
🛡 Ещё кейс (см. скрины)
Букмарклет для "засекречивания" цифр в дашбордах. Перед скриншотом кликаю — все числа заменяются на █. Идеально для презентаций!
Вот код (можете сохранить себе):
javascript:(function(){function replaceDigitsInNode(node) {if (node.nodeType === Node.TEXT_NODE) {const originalText = node.textContent;const modifiedText = originalText.replace(/\d/g, '█');if (originalText !== modifiedText) {const newNode = document.createTextNode(modifiedText);node.parentNode.replaceChild(newNode, node);}}}function processElement(element) {const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);const nodesToReplace = [];let node;while (node = walker.nextNode()) {nodesToReplace.push(node);}nodesToReplace.forEach(replaceDigitsInNode);}processElement(document.body);})();💡 Как создать свой?
1. Опишите задачу LLM (например: "Напиши код букмарклета в одну строку, который..."). Идеально если ещё дадите модели скачанную html-страницу (Ctrl + s)
2. Скопируйте готовый код из
javascript: (() => {
// Your code here!
})();3. Создайте закладку, вставьте код в URL — готово!
🚀 Что ещё можно
— Скрывать блоки рекламы
— Переключать тёмную тему
— Сохранять выделенный текст в Notion/Telegram
— Анализировать цены на маркетплейсах
— что угодно, загляните сюда чтобы попробовать
💬 Попробуйте!
Самые унылые рутинные задачи в браузере решаются одной закладкой. А какие моменты вас бесит больше всего? Может, придумаем букмарклет прямо в комментах? 😉
P.S. Спасибо Руслану, что рассказал про букмарклеты в своём канале)
👀 Смотрите также
— What are Bookmarklets? How to Use
— 15 Useful Bookmarklets for Web Devs
— Набор букмарклетов для аудита доступности a11y (чтобы сохранить себе, перетащите ссылку в закладки)
#lifehacks #tools #llm #dev