Сайты и разработка2 мин чтения
Kwork Hider: расширение, которое прячет неинтересные проекты на Kwork
На бирже Kwork ежедневно появляются десятки проектов, половина из которых не подходит конкретному исполнителю, а кнопки «скрыть» на сайте нет. Разработчик написал расширение для браузера Kwork Hider: две кнопки на карточке, локальное хранилище и наблюдатель за динамической лентой. Разбираем, как это сделано.
Что делает расширение
На каждую карточку проекта добавляются две кнопки: скрыть и сохранить. Скрытые объявления исчезают из ленты, сохранённые подсвечиваются зелёным, а значок расширения показывает счётчики. Все данные лежат в браузере пользователя, на сервер ничего не уходит.
По тому же шаблону мы делаем небольшие внутренние инструменты для клиентов: кнопка в админке или расширение для менеджера решает задачу быстрее, чем доработка ядра CMS. Главное помнить, что привязка к вёрстке живёт до первого редизайна.
Как это устроено технически
Внутри три знакомых веб-разработчику механизма.
- Контент-скрипт находит элементы карточек по классу .want-card и добавляет кнопки в блок .want-card__buttons.
- Идентификаторы скрытых и сохранённых проектов хранятся в chrome.storage.local.
- MutationObserver следит за появлением новых карточек при подгрузке ленты и обрабатывает их без перезагрузки страницы.
Где взять
Расширение опубликовано в Chrome Web Store, исходный код открыт на GitHub, есть страница у автора. Открытый код важен для расширений, которые работают на чужих сайтах: любой может проверить, что данные не уходят наружу.
Чему учит этот маленький проект
Во-первых, функция, которой не хватает в чужом продукте, часто реализуется за вечер расширением, а не ожиданием обновления. Во-вторых, зависимость от классов вёрстки вроде .want-card — главный риск: после редизайна площадки расширение перестанет работать, и это надо честно понимать. В-третьих, такие инструменты — хороший тест для разработчика перед более крупными задачами с DOM и хранилищем.
Итог
Kwork Hider решает узкую проблему фрилансеров и одновременно показывает шаблон любого расширения для чужого сайта: найти элементы, добавить управление, запомнить состояние, следить за изменениями.
Источники
Подписаться на журнал
Новые разборы о сайтах, SEO и ИИ выходят в журнале QIO. Подпишитесь в Google, по RSS или в Telegram, чтобы получать их первыми.
