Selector Parser Widget

Инструмент для поиска и проверки уникальности CSS-селекторов на веб-страницах.

🚀 Основные фичи

• Выбор элементов прямо на странице кликом мыши;
• Возможность перемещение по DOM вверх и вниз для получения селектора нужного элемента;
• Визуальная подсветка выбранных элементов;
• Проверка уникальности селектора;
• Экспорт конфигурации в JSON формате
• Автоматический поиск селекторов (comming soon)

📦 Установка

Шаг 1: Установка Tampermonkey

Установите расширение Tampermonkey для вашего браузера:

• Chrome Web Store
• Firefox Add-ons
• Edge Add-ons
• Safari Extension

Шаг 2: Добавление скрипта в Tampermokey

• Нажмите на иконку расширения, выберите "Создать новый скрипт"

• Очистите весь текст, вместо него вставьте код из спойлера ниже

  Код для Tampermonkey

    // ==UserScript==
    // @name         Selector parser
    // @version      dynamic
    // @description  Widget for parsing selectors of target elements
    // @author       Anton Edigarev
    // @match        *://*/*
    // @require      https://github.com/SentByRain/selector_parser/raw/main/bundle.js
    // @downloadURL  https://github.com/SentByRain/selector_parser/raw/main/bundle.js
    // @updateURL    https://github.com/SentByRain/selector_parser/raw/main/bundle.js
    // @run-at       document-ready
    // @grant        none
    // ==/UserScript==
  

• Вставьте скопированный код

• Сохраните скрипт (Ctrl+S / Cmd+S)

✅ Готово! Виджет будет доступен на всех сайтах.

How to use it || Ручной выбор элементов

1. Нажмите кнопку редактирования ✏️

   • Поле селектора станет желтым
   • Появятся кнопки навигации (↑ ↓)
   • Курсор изменится на режим выбора

2. Кликните по элементу на странице

   • Элемент будет подсвечен красным оверлеем
   • Селектор автоматически появится в поле
   • Режим выбора завершится

3. Если нужно, скорректируйте выбор стелочками вверх/вниз

Горячие клавиши в режиме выбора:

• Enter - Подтвердить выбор
• Escape - Отменить выбор

Поиск по готовому селектору

Если у вас уже есть CSS-селектор, виджет поможет проверить его уникальность и подсветить все найденные элементы на странице.

1. Введите селектор в поле "Поиск по селектору"

   .product-card .price;

2. Нажмите "Поиск" или Enter

   • Элементы будут подсвечены на странице
   • Появится уведомление о количестве найденных элементов

3. Или используйте "Вставить из буфера"

   • Скопируйте селектор из devtools
   • Нажмите кнопку "Вставить из буфера"
   • Селектор автоматически вставится и выполнится поиск

Типы уведомлений:

• ✅ "Элемент найден и выделен" - Найден 1 элемент
• ℹ️ "Найдено N элементов" - Найдено несколько элементов
• ⚠️ "Элементы не найдены" - Селектор не вернул результатов
• ❌ "Неверный CSS-селектор" - Синтаксическая ошибка в селекторе

---

Экспорт конфигурации

{
  "configName": "productPageKeyWordsConfig",
  "parameters": [
    {
      "name": "id",
      "selector": ".product-sku:nth-child(1)"
    },
    {
      "name": "name",
      "selector": ".product-title"
    },
    {
      "name": "price",
      "selector": ".price-current"
    }
  ],
  "url": "https://example.com/product/12345",
  "timestamp": "2025-10-03T09:15:30.123Z"
}

---

👨‍💻 Автор - @a.edigarev

👨‍💼 Team Lead - @alekse.kozlov