Русский
Русский
English
Статистика
Реклама

Из песочницы Пишем свой плагин для VueJS. Как проект на VueJS трансформировать в расширение для браузера?


Вступление


В этой статье мы с вами напишем свой собственный плагин для проектов на 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 и подключения плагина локально.


Ссылки на плагин


Источник: habr.com
К списку статей
Опубликовано: 23.07.2020 14:23:59
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Javascript

Vuejs

Программирование

Расширения для браузеров

Vue

Расширения браузеров

Vue-cli

Категории

Последние комментарии

© 2006-2021, personeltest.ru