Я сделал расширение с sidePanel для поиска битых ссылок на сайте

Расширений для поиска битых ссылок — десятки. Но почти все они сделаны в popup, который либо перекрывает сайт, либо закрывается в самый неподходящий момент.

Расширение работает в sidePanel
Расширение работает в sidePanel

Я сделал расширение, которое работает в sidePanel — и не мешает работать с сайтом или вообще уйти на другую вкладку, пока идёт проверка.

Поэтому до сих пор удивляет, что большинство таких расширений продолжают делать в popup.

Представляю Advanced Broken Links Search.

Основные фишки:

  1. Проверка в 1 клик — открыли страницу, нажали на иконку расширения, получили результат. Никаких настроек. Хотя и их хватает.
  2. Расширение ищет не только 404, но и редиректы, а также ссылки в которых явно указан HTTP-протокол - чтобы избавиться от смешивания протоколов.
  3. Проверяет и ссылки <a>, и изображения <img>
  4. Ссылки в <head> тоже проверяется. Часто бывает, что делают ссылки на manifest.json, а сам файл не создают.
  5. Если ссылка делает редирект, расширение показывает, куда он уходит. Ведь там тоже может быть недоступная страница.
  6. Сканирование можно ставить на паузу. Хотя в sidePanel расширение работает, даже если ты покинул вкладку и занимаешься своими делами. Очень удобно когда сканируешь 4000 ссылок.
  7. Пересканирование одной ссылки — не нужно перезапускать всю проверку, если одна ссылка не прошла и получила 408-ответ из-за большого количества запросов.

  8. При полном сканировании показывает, на какой странице ссылка была найдена впервые.

Технические детали

Расширение сделано на Manifest V3 (современный стандарт Chrome). Использовал vanilla JavaScript — без фреймворков, чтобы расширение работало быстро и не нагружало браузер.

JS-скрипт собирает все ссылки и изображения со страницы, а HTML отвечает за интерфейс.

Особенности реализации

Пример где просканировано 3,4 тыс. страниц. Найдено 3 битых ссылки.
Пример где просканировано 3,4 тыс. страниц. Найдено 3 битых ссылки.

Батчинг запросов: проверяет по 12 ссылок одновременно. Количество запросов думаю вынести в настройки, чтобы регулировать для каждого сайта и не попадать в баню.

Отслеживание редиректов:
через fetch с redirect: 'manual', показывает полную цепочку

Валидация URL:
проверка безопасности перед запросом

Расширение не отправляет данные никуда.
Всё работает локально в браузере - без внешних серверов и сбора статистики.

Поддержка браузеров

SidePanel — сравнительно новый API (~3 года lol) и пока доступен не во всех браузерах.
В Google Chrome расширение работает в sidePanel — основной и рекомендуемый режим.
В Яндекс.Браузере sidePanel пока недоступен, поэтому расширение открывается в popup.
Логика сканирования и результаты проверки одинаковые, отличается только формат интерфейса. Я изначально делал расширение под sidePanel, потому что для задач долгого сканирования (тысячи ссылок) это самый удобный вариант.

Для кого?

Расширение уже используют:

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

Гибкие настройки

Расширенные настройки. Индивидуально для каждого сайта.
Расширенные настройки. Индивидуально для каждого сайта.

Расширение работает из коробки, но для продвинутых пользователей есть настройки:

  • GET или HEAD-запросы — GET точнее, HEAD быстрее
  • Проверка nofollow — можно пропускать ссылки с rel="nofollow"
  • Настройки для каждого сайта. Разные параметры для разных проектов
  • Игнорирование элементов — исключить админ-панели, меню, футеры (по-умолчанию уже настроено для Bitrix, WordPress, Tilda, Drupal)
  • Проверка изображений — можно отключить, если нужны только ссылки
  • Возможность изменить язык и тему оформления интерфейса, для любителей светлых или тёмных тем.

Все настройки сохраняются автоматически для каждого сайта отдельно.

Экспорт и отчёты

Можно экспортировать результаты в CSV-файл:

  • URL элемента
  • Тип (ссылка / изображение)
  • HTTP-статус
  • Итоговый адрес после редиректов

Выгрузить можно как все ссылки, так и определённую группу.

Файл легко передать разработчику, SEO-специалисту или клиенту.

Итог

Сделал инструмент, которым сам пользуюсь каждый день. Проблема битых ссылок актуальна для тысяч сайтов и их владельцев.
Если у вас есть идея решения проблемы, которая вас достала - делайте. Возможно, это нужно не только вам.

А вы используете инструменты для проверки битых ссылок? Какие? Расскажите в комментариях — интересно сравнить опыт и софт.

P.S. Для более глубокого анализа, конечно, есть Screaming Frog.

Начать дискуссию