Описание
Пример расширения браузера Google Chrome с доступом скриптов расширения к объектам веб-приложения.
Технологии
- JavaScript
- Chrome API
- Chrome DevTools
Установка
- Загрузить zip-архив репозитория или клонировать репозиторий
- Распаковать архив
- Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:
chrome://extensions/- В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
- В верхней левой части экрана нажать кнопку 'Загружить распакованное расширение' и указать путь к папке '/extension' из п.2
- Открыть HTML-страницу по пути '\content-and-inject-script\other\webapp.html'
Описание работы
Для демонстрации работы расширения необходимо:
- установить расширение;
- в браузере открыть веб-страницу по пути './other/webapp/webapp.html'
На тестовой странице webapp.html с помощью кнопок создаются объекты на странице. В таблице кнопок зелеными отмечены те, которые имеют доступ к созданию объектов. Красным - нет. Область видимости content_script.js явно ограничена и нет возможности использовать объекты и переменные созданные веб приложением. inject_script.js и webapp_script.js имеют общую зону видимости и могут использовать объекты и переменные друг друга.
Схемы взаимодействия компонентов расширения
Схема доступа компонентов скриптов к объектам веб-страницы
