☕️ Букмарклеты: мощные кнопки в вашей панели закладок

Вы когда-нибудь сталкивались с ситуацией, когда нужно постоянно делать одни и те же действия на веб-страницах? Копировать информацию из разных мест, преобразовывать текст или скрывать чувствительные данные перед скриншотом?

Сегодня расскажу про букмарклеты, которые решат эти проблемы за один клик.

Букмарклет (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

☕️ Вайбкодинг как он есть

Вчера за 30 мин (прям буквально за 30 мин) сделал себе тулу, о которой давно мечтал.

Мне часто для работы надо смотреть что приходит с бэкенда, иногда то что приходит надо использовать для анализа либо для обработки (в Excel) и использования в другом месте.

Решил, что пора — волна вайбкодинга в самом апогее. Результат нашей переписки с агентом (Claude Code) на скринах выше. С чистого листа, до установленного расширения в браузере прошло 30 мин.
Агенту я лишь описал образ результата. Дальше он сам:
— Поискал в интернете как делать экстеншены
— Создал детальный план
— Скачал нужные библиотеки
— Установил нужный софт
— Сделал нужные настройки в IDE
— ... перечислять можно бесконечно, по факту - имея доступ к CLI агент может делать ВСЁ на вашем компе и взаимодействовать с любыми ресурсами, у которых есть такая возможность
— Результат опубликовал на Github

Размышления:
Для вайбкодинга хорошо бы знать терминологию и процессы разработки, фреймворки, библиотеки и прочее. Чтобы не просто "эй, сделай красиво", а прям с конретным описанием того, как это должно выглядеть и что должно быть под капотом

(для этого этот канал и есть😉)

Что на выходе
API Data Grabber — расширение для браузера которое перехватывает все API-запросы, которые делает сайт, и позволяет:
— увидеть их список
— открыть JSON-ответ любого запроса (ну это итак можно было)
— автоматически найти в ответе массивы данных (списки пользователей, заказов, товаров — что угодно)
— посмотреть их в табличном виде с сортировкой, поиском и пагинацией 🔥
— Скачать в Excel или CSV 🔥🔥

👥 Кому полезно:
Продактам — быстро выгрузить данные из админки, когда нет готового отчёта
Аналитикам — получить сырые данные из любого внутреннего инструмента без запросов к бэкенду
QA — проверить что реально приходит в ответе API
Всем, кто хоть раз думал "мне бы эту таблицу в Excel скинуть"

📖 Как установить
— Скачать репозиторий: нажать зелёную кнопку Code → Download ZIP
— Распаковать ZIP-архив в любую папку
— Открыть в Chrome: chrome://extensions
— Включить Developer mode (переключатель справа вверху)
— Нажать Load unpacked и выбрать распакованную папку (ту, в которой лежит manifest.json)
— Готово — расширение установлено

https://github.com/Working-in-IT/api-data-grabber

#ai #vibecoding