Вступление
В этой статье мы с вами напишем свой собственный плагин для проектов на VueJS, который трансформирует проект в расширение для браузера. Узнаем как изменять правила сборки webpack и генерировать дополнительную структуру файлов и папок.
Расширения для браузеров часто имеют всплывающие окна, которые появляются при клике на иконку расширения. Во всплывающем окне может быть авторизация, регистрация или управление настройками расширения, а возможно и любая другая логика. Мне показалось очень удобным реализовать всплывающее окно и само расширение на VueJS. Было решено написать плагин для vue-cli который трансформирует существующий проект на VueJS в расширение для браузера. А содержимое проекта будет отображаться во всплывающем окне расширения. Этот плагин уже опробован в реальном проекте по проверке объявлений перекупщиков validauto.ru и расширениях для Google Chrome, Mozilla Firefox и Microsoft Edge "Узнай кто перекуп | (validauto.ru)"
Пишем плагин для vue-cli
Сначала мы создадим папку с именем
vue-cli-plugin-simple-extension. Префикс
vue-cli-plugin необходим для автоматического
поиска плагина в npm пакетах при вызове команды vue
add simple-extension.
В папке инициализируем package следующей командой
npm init
Структура плагина будет выглядеть так
README.md generator/ template/ # шаблоны для генерации index.js # генератор index.js # плагин для сервиса package.json
Генератор создает новые файлы и директории или изменяет существующие по шаблону. Добавим следующую структуру в папку template внутри generator. При установке плагина генератор будет копировать эти файлы в папку проекта src.
template/ extension/ background/ | background.html | background.js content/ | content.js manifest.json
content.js
Скрипт отвечает за взаимодействие с веб-страницами. Он может взаимодействовать с веб-страницами, которые посещает браузер. Может при необходимости изменять их или дополнять логикой расширения.
background.js
Скрипт отвечает за фоновый процесс. С его помощью можно взаимодействовать с сервером для передачи данных и с content.js.
manifest.json
{ "author": "", "name": "", "description": "", "version": "1.0", "minimum_chrome_version": "26.0", "manifest_version": 2, "browser_action": { "default_popup": "index.html" }, "background": { "page": "background.html", "persistent": true }, "icons" : {}, "content_scripts": [ { "matches": ["*://*/*"], "js": ["content.js"], "run_at": "document_end" } ], "content_security_policy": "script-src 'self'; object-src 'self'", "web_accessible_resources": [ ], "optional_permissions": [], "permissions": []}
Файл manifest.json сообщает браузеру важную информацию о расширении, его имени и необходимых разрешениях. "default_popup": "index.html" будет ссылаться на index.html проекта. Точка входа для Vue проектов, которая по-умолчанию находится в папке public.
Далее добавим следующий код в файл generator/index.js. Вызов api.render('./template') копирует наши файлы в проект. Код приведен ниже
module.exports = api => { api.render('./template');};
Следующим шагом будет изменение конфигурации webpack. Это делается в основном файле плагина index.js с помощью следующего кода
const CopyPlugin = require('copy-webpack-plugin');module.exports = (api, options) => { api.chainWebpack((config) => { config .entry('content') .add('./src/extension/content/content.js'); config .entry('background') .add('./src/extension/background/background.js'); config.output.filename('[name].js'); }); api.configureWebpack((config) => { // No need for splitting config.optimization = { splitChunks: false, }; config.plugins = config.plugins.concat( new CopyPlugin([ { from: 'src/extension/background/background.html', to: 'background.html' }, { from: 'src/extension/manifest.json', to: 'manifest.json', force: true }, ]), ); });};
Этот код добавляет два дополнительных entry для content.js и background.js. Копирует manifest.json и background.html в корень папки dist при сборке. Здесь используется copy-webpack-plugin. Его необходимо добавить в зависимости плагина следующей командой
npm install copy-webpack-plugin --save-dev
И добавляем зависимость в основной проект при установке плагина. Это делается вызовом api.extendPackage в generator/index.js.
module.exports = api => { api.extendPackage({ devDependencies: { 'copy-webpack-plugin': '^5.1.1', }, }); ...};
Проверка работы плагина локально
Удобно тестировать плагин локально без загрузки в npm или git
репозитории. Для этого необходимо подключить package в основной
проект перед вызовом vue add simple-extension. Примечание:
данный шаг не будет требоваться когда ваш плагин будет
общедоступным в репозитории npm.
В основном проекте выполняем
npm install [путь до папки плагина] --save-dev
Теперь можем выполнить команду, которая добавляет плагин. В основном проекте выполним
vue add simple-extension
Если все прошло успешно, то сборка расширения запускается стандартной командой
npm run build
После публикации плагина в npm он будет доступен для любого пользователя через команду
vue add simple-extension
Осталось папку dist загрузить в Google Chrome или Firefox. Поздравляю, расширение готово!
Заключение
Оказалось, что написать плагин для VueJS довольно просто. Плагин позволяет для разной конфигурации VueJS быстро трансформировать проект в расширение для браузера. Был продемонстрирован пример генерации дополнительной структуры проекта, изменения правил сборки webpack и подключения плагина локально.
Ссылки на плагин
