Перезагрузка расширения браузера Chrome
, при изменении файлов каталога.
Все доступные модули используются только в
background.js
и вызываютchrome.runtime.reload()
.
npm i -D we-live-reloader
// 2 в 1 (версия NPM не содержит примеров)
import { rollupPluginWeReloader, fsWeReloader } from 'we-live-reloader'
Использование с npm i -D rollup
// rollup.config.js
import { rollupPluginWeReloader } from 'we-live-reloader'
// При использовании нескольких скриптов,
// плагин необходимо вызвать до экспорта мульти-конфигурации
const WeReloader = rollupPluginWeReloader({ tabReload: true })
export default [
{
input: './background.js',
output: {
dir: 'webextension',
format: 'iife'
},
// Основной плагин установим только для background.js.
// Плагин встраивает перезагрузчик в код
plugins: [WeReloader]
},
{
input: './content.js',
// ...
// Для остальных скриптов вызываем специальный метод,
// установится мини-плагин с вызовом перезагрузки без встраивания кода
plugins: [WeReloader._parallelWatch()]
}
]
Подробнее см. файл конфигурации rollup.config.js.
Перезагрузка используя API файловой системы. Никаких bundler-ов и серверов, просто добавьте файл к расширению.
Используйте этот модуль, когда нет необходимости собирать файлы и для простых примеров. Этот вариант использует постоянный опрос каталога расширения.
-
Вариант подключения отдельного файла:
Готовые файлы находятся в директории демо-примера demo/fs-we-reloader. Скопируйте файл fs-we-reloader-tab.min.js или fs-we-reloader.min.js(без перезагрузки таба) в корневой каталог расширения и добавьте в манифест"background": {"scripts": ["fs-we-reloader-tab.min.js"]}
. См. примеры. -
Вариант самостоятельной сборки с установкой пользовательских параметров:
// Создайте новый файл фонового скрипта или импортируйте в любой имеющийся
import { fsWeReloader } from 'we-live-reloader'
// Можно оставить опции по дефолту, или установить собственные
fsWeReloader({ readInterval: 1500, tabReload: true })
// ... далее что угодно
// Подключаем этот скрипт в манифест
Конфигурация сборки действующих примеров - bundle.config.js.
Действующие примеры находятся в репозитории https://github.com/AlexLonberg/we-live-reloader.git.
Установка демонстрационного расширения:
-
В адресной строке перейти на chrome://extensions/
-
Активировать режим разработчика
-
Кликнуть на загрузку
-
Перейти к расположению каталога .../we-live-reloader/demo
-
Выбрать один из примеров. Повторить операцию для второго примера(одно лучше отключить). Отобразится значек расширения
-
Открыть фоновую страницу
-
В консоли фона появится оповещение, если это
fs-we-reloader
или при активном(npm run) плагинеrollup
-
Открыть консоль для любой владки - примеры встраивают скрипт контента. Появится такой вывод
В корне проекта выполнить команду:
// установка зависимостей
npm i
// запуск rollup
npm run demo.rollup.watch
В редакторе VSCode можно кликнуть на соответствующую команду:
Плагин rollup-plugin-we-reloader
(.../rollup-plugin-we-reloader/index.js) запустит сервер и установит свободный порт. В первый раз(и после каждого перезапуска rollup
) обновите клавишей F5
фоновую страницу, для возобновления подключения к серверу.
Зайдите в каталог примера с файлом demo-src/mod.js - этот файл импортируют оба скрипта: demo-src/background.js и demo-src/content.js. При изменении переменных и сохранении кода, расширение обновится. Если оставить активной любую вкладку, расширение так-же обновит ее самостоятельно.
При использовании расширением нескольких скриптов, основной плагин rollupPluginWeReloader
следует подключать только к одному background.js. Пример конфигурации в файле rollup.config.js.
Никаких действий не требуется, скрипт расширения регулярно сканирует собственный каталог и проверяет последние модификации файлов. Обновляйте данные в файлах реального каталога расширения demo/fs-we-reloader/data-background.js
и demo/fs-we-reloader/data-content.js
и наблюдайте за консолью.
Использование пользовательских опций изменяет поведение перезагрузчика.
Все опции передаются объектом плагину rollup-plugin-we-reloader
или при самостоятельной сборке fs-we-reloader
статического файла.
rollupPluginWeReloader({tabReload: true, ...})
-
readInterval=800:number Интервал чтения каталога расширения.
Только дляfs-we-reloader
. -
delayReload=200:number Задержка при обновлении.
Только дляrollup-plugin-we-reloader
.
Полезно, если сразу обновляются большое кол-во файлов и команда обновления может повториться. -
tabReload=false:boolean Перезагрузка активного таба.
По умолчаниюchrome.tabs.reload(tab.id)
, для текущего активного tab-а, не вызывается . Если расширение использует встраивание скриптов, установка этого параметра вtrue
, будет вызыватьchrome.tabs.reload(tab.id)
, после обновленияchrome.runtime.reload()
, и только для текущего активного таба. -
bypassCache=false:boolean Обойти локальный веб-кеш.
См. WebExtensions/API/tabs/reload -
disconnect=300000:number Только для
rollup-plugin-we-reloader
.
Когда сервер отключен, фоновый скрипт пытается переподключиться, что вызывает ошибкуGET http://127.0.0.1:62548/ net::ERR_CONNECTION_REFUSED
. После простоя соединения с интерваломdisconnect
, скрипт вызоветEventSource.close()
. Дальнейшее обновление возможно принудительной перезагрузкой (клавишаF5
). -
port=0:number Предпочтительный порт.
Только дляrollup-plugin-we-reloader
.
По дефолту система выберет свободный порт и установит соединениеhttp://127.0.0.1:1234
.
Опций по умолчанию см. в файле корневого каталога config.js.
Дополнительно используются функции:
-
filter(path):boolean Фильтр файлов.
Получает параметром строку пути к файлу. Фильтр должен вернуть булевый резальтат, приfalse
изменение файла не вызовет перезагрузку.
// Пример вызова обновления, только при изменении
// файлов с расширением `.js` и только в каталоге `app`
const filter = (path)=>(/\/?app\/[^/]+\.js$/i.test(path))
rollupPluginWeReloader({tabReload: true, filter, ...})
-
userReload():void Собственный перезагрузчик.
При использовании собственного перезагрузчика вызовchrome.runtime.reload()
игнорируется.
// Изменяем поведение по дефолту
const userReload = () => {
// Делаем что-нибудь
// ...
// в конце самостоятельно вызываем
chrome.runtime.reload()
}