AutoFill Helper: краткий разбор решения автозаполнения

Нужен был быстрый способ заполнять формы тестовыми данными по хоткею, без тяжёлого UI. Стандартное автозаполнение Google Chrome не работает по хоткею и не всегда определяется с кастомными id элементов форм. Итог — расширение, которое по правилам (привязка к домену/пути) подставляет значения в поля и корректно эмулирует ввод.

Архитектура

  • content.js: ищет поля, ставит значения, диспатчит события.

  • background.js: обрабатывает хоткей/иконку/контекстное меню, при необходимости инжектит content-скрипт.

  • rules.js: хранит правила в chrome.storage.sync, подбирает самый специфичный паттерн.

  • manifest.json: команды и разрешения.

Ключевые моменты

  • Сопоставление URL: поддержка протокола, порта, поддоменов (.), путей с /; выбор по специфичности.

  • Инжект по требованию: при «Receiving end does not exist» скрипт подгружается через chrome.scripting.executeScript и команда повторяется.

  • Эмуляция ввода: после value диспатчатся события, чтобы триггерить валидацию/реактивность.

el.dispatchEvent(new Event('input', { bubbles: true }));

el.dispatchEvent(new Event('change', { bubbles: true }));

  • UX без лишнего UI: хоткей Ctrl/Cmd+Shift+F, клик по иконке, контекстное меню «добавить поле в правила» (сохраняет #id → value для текущего хоста).

  • Debug: опциональные логи помогают видеть выбранный паттерн и незаполненные селекторы.

Что улучшать дальше

  • Селекторы шире #id (атрибуты, устойчивые data-*).

  • Шаблоны значений и генераторы (дата, e-mail), безопасное хранение.

Вместо вывода

Полный код проекта лежит тут (буду рад ваши звездам).