Плагин для Google Chrome, который определяет уникальный css-селектор

Продолжение серии постов, в которых делюсь внутренними разработками – инструментами, помогающими оптимизировать и автоматизировать задачи нашей команды заказной разработки.

Первая статья была про массовую оптимизацию изображений с помощью сервиса TinyPNG. Кто не видел, можете ознакомиться тут: ссылка. На VC выкладываю оформленные решения с подробным описанием, но кроме готовых реализаций, есть много других заготовок, про которые рассказываю в своем телеграм-блоге «БАГодельня».

У нас в команде не только программисты, но и маркетологи и дизайнеры. Им тоже иногда требуется подмога с автоматизацией. В этом посте хочу поделиться одной из таких наработок. Дизайнеры, кроме макетов, частенько собирают сайты на конструкторе Tilda. Удобный инструмент для создания промо-лендингов, которые нужно быстро запустить. Если не брать готовые шаблоны, а собирать страницу «руками», то получаются красивые решения. Но кастомная сборка зачастую ведет к тому, что нужно дописывать css и js, готовых блоков и настроек не всегда хватает в таких случаях. Тильда – это конструктор, поэтому все селекторы элементов там генерируются и имеют совсем не читабельный вид. Из-за этого в консоле браузера сложно найти уникальный или наоборот такой, применить стили ко всем похожим блокам на странице. Чтобы упростить жизнь дизайнерам, мы написали небольшой плагин для браузера Chrome.

После установки в браузер, плагин можно активировать на любой странице и пользоваться аналогично инспектору из консоли разработчика. По наведению курсора на блоки, они подсвечиваются, а также выделяются и все похожие – имеющие одинаковые css-классы. Так же добавили в контекстное меню возможность сразу скопировать селектор в нескольких вариациях: уникальный, для всех похожих элементов внутри блока и для всех похожих на странице. На скриншоте ниже пример, как подсвечиваются элементы и каким образом копируются селекторы. Ну и бонусом, плагин в активированном состоянии добавляет плашку с расшифровками, где указано название элемента, сколько подобных элементов внутри блока и всего похожих на странице.

Установка плагина:
– Скачать плагин: ссылка
– Скачать и распаковать архив
– Перейти в плагины хрома, можно по ссылке: chrome://extensions/
– Нажать «Загрузить распакованное расширение» и выбрать папку куда распаковался архив
– Можно закрепить плагин в браузере, чтобы было удобней пользоваться

Использование:
– После активации плагина, по ховеру на элемент, появляется плашка с информацией о селекторе. Похожие элементы подсвечиваются на странице
– Кликом правой кнопкой мыши, вызывается контекстное меню, в котором можно скопировать в буфер обмена нужный селектор элемента

Спасибо за внимание. Надеюсь, кому-нибудь пригодится наша наработка. Если есть пожелания, рекомендации или советы по улучшению плагина, то пишите их в комментариях или присылайте в телеграм: мне в ЛС или группу «БАГодельня».