Расширение Chrome: «Заметки читателя»
В 12 уроках создаём «Заметки читателя» — локальное расширение, которое по действию пользователя получает страницу и выделенную фразу, сохраняет собственный текст, ищет записи и переносит их через JSON. Один объект заметки развивается по всей серии. Нет внешнего сервера, сбора истории, реальных аккаунтов и отправки чужих данных.
Нужны основы JavaScript, DOM, событий, объектов и JSON. Профиль: Chrome Manifest V3, локальные HTML/CSS/JavaScript без npm и сборщика. minimum_chrome_version: 102 относится к нижней границе API storage.setAccessLevel, а не к испытанной совместимости полного пакета в Chrome 102. Для самостоятельного исследования нужен поддерживаемый актуальный Chrome в собственном учебном профиле. Firefox требует отдельного manifest и анализа background/API; идентичная платформа не обещается.
Статус всех примеров — not_run. Расширение не устанавливалось, интерфейсы не запускались, сценарии и публикация магазина не выполнялись. Показанные результаты ожидаемые. Файлы исходников согласованы статическим редакционным чтением, но это не результат исполнения программы.
Путь заметки
| Урок | Что вы сможете объяснить и получить |
|---|---|
| 1. Manifest V3 и устройство расширения | Описать Chrome-расширение и различать его страницы, worker и код вкладки. |
| 2. Popup: ввод заметки и безопасный вывод | Связать поле и кнопку с DOM-событием, не превращая текст в HTML. |
| 3. Service worker и краткая жизнь фонового контекста | Передать событие worker и отделить его время жизни от постоянного состояния. |
| 4. Чтение выделения по действию пользователя | Получить название, адрес и цитату через activeTab и изолированный content script. |
| 5. Проверка сообщений между контекстами | Принимать только известную команду своего popup и нормализовать её данные. |
| 6. Локальное хранилище и состояние после остановки worker | Сохранять проверенные заметки отдельными ключами и читать их при новом открытии. |
| 7. Страница настроек и начальный текст заметки | Хранить пользовательскую настройку отдельно и применять её к новому popup. |
| 8. Экспорт собственных заметок в JSON | Получить записи из worker и создать локальный файл с версией формата. |
| 9. Импорт JSON с проверкой и сохранением прежних записей | Проверить выбранный документ и добавлять только отсутствующие UUID. |
| 10. Поиск в локальных заметках | Фильтровать отображение по тексту и удерживать актуальность асинхронного результата. |
| 11. Минимальный доступ и параметры адреса | Связать разрешения с действиями и убрать query из новых адресов по умолчанию. |
| 12. Версии и передача пакета расширения | Передать полный локальный пакет и разделить его версию, формат данных и браузерный профиль. |
Договор контекстов и данных
Popup имеет DOM и короткую жизнь. Service worker краткоживущий, не имеет DOM и не хранит библиотеку заметок в глобальном массиве. Content script выполняется в изолированном мире основного кадра только после action пользователя. activeTab, scripting и storage вводятся по конкретной обязанности; постоянных host_permissions и all_urls нет. Служебная страница может отказать даже при заявленных разрешениях.
Worker принимает allowlist команд только точных собственных popup/options и проверяет поля. Нет моста window.postMessage или внешнего API для произвольных privileged действий страницы. Чужие строки выводятся через textContent. storage.local используется без секретов и ограничен TRUSTED_CONTEXTS; оперативная очередь Promise не является сохранённой очередью задач.
Экспорт содержит собственные записи с format reader-notes и version 1. Импорт проверяет весь документ и добавляет отсутствующие UUID, сохраняя существующие. Повтор импорта пропускает известные id; повтор SAVE после потерянного ответа может создать дубль, поскольку ключ идемпотентности SAVE не введён. Настройка удаления query применяется только к новым SAVE и не обезличивает произвольный путь или текст.
Скачать двенадцать полных состояний. Выбирайте один lesson-NN целиком. README и DELIVERY.md описывают самостоятельную установку в собственном учебном профиле и ожидаемые сценарии. Версия пакета, версия протокола сообщений и версия формата данных различаются. Архив не содержит данных пользовательского профиля; его JSON-экспорт читатель создаёт сам.