Каждый раз, когда нужно скинуть скриншот интерфейса коллеге, клиенту или в чат, начинается один и тот же ритуал. Делаешь скрин, открываешь графический редактор, тратишь время на аккуратное замазывание номеров карт, email’ов и балансов. А если это созвон в Zoom или Telegram с демонстрацией экрана — пиши пропало.
Мне это надоело, и я решил автоматизировать рутину. Опыта в написании расширений у меня было немного, поэтому в компаньоны я взял нейросеть. Вместе мы за пару вечеров собрали MaskFlow — опенсорсное расширение, которое скрывает конфиденциальные данные прямо на странице.
В чем фишка и зачем это нужно?
Вместо того чтобы тратить время на пост-обработку картинок, расширение делает всё до того, как вы нажмете кнопку скриншота. Зашел на сайт, включил тумблер — данные скрылись, можно делать чистый снимок или запускать демку экрана.
-
Автоматика: расширение само находит и размывает номера банковских карт, email, аватарки и блоки переписок.
-
Широкое покрытие: работает на любых сайтах благодаря поддержке
<all_urls>.
Как это устроено внутри
Стек выбрали максимально классический, без тяжелых фреймворков: чистый JavaScript, HTML и CSS.
Основная логика завязана на поиске текстовых паттернов по страницам и динамическом наложении CSS-стилей (в частности, filter: blur()). ИИ помог быстро составить регулярные выражения для безошибочного определения форматов email-адресов и банковских карт, а также подсказал, как правильно завернуть это в архитектуру Manifest V3, с которой у многих сейчас возникают затыки.
Что по безопасности?
Для расширений, которые работают со всеми сайтами, вопрос приватности стоит на первом месте. Я сам параноик в этом плане, поэтому изначально закладывал два правила:
-
Полный офлайн: расширение работает строго локально в вашем браузере. Оно ничего и никуда не отправляет.
-
Открытый код: проект полностью опенсорсный. Весь JS-код можно изучить, форкнуть или покритиковать у меня на GitHub: slimeopus/MaskFlow.
Честные минусы и планы на будущее
Будем откровенны, это первая версия (1.0.0). На данный момент расширение отлично справляется со статичными страницами, но я пока не реализовывал обработку динамического скролла (когда вы листаете бесконечную ленту и там подгружаются новые данные). Эту фичу я буду допиливать уже в следующих апдейтах.
Как потестить?
Проект создавался для себя, но если он сэкономит вам хотя бы пару минут в день — значит, всё было не зря. Буду рад, если вы посмотрите код или протестируете само расширение:
-
Код на GitHub
-
Страница в Chrome Web Store
Пишите в комментариях, какими инструментами пользуетесь вы, и какие фичи стоит добавить в MaskFlow в первую очередь!
ссылка на оригинал статьи https://habr.com/ru/articles/1058742/