[JavaScript, VueJS, Программирование, Расширения для браузеров] Пишем свой плагин для VueJS. Как проект на VueJS трансформировать в расширение для браузера?
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Вступление
В этой статье мы с вами напишем свой собственный плагин для проектов на 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 и подключения плагина локально.
Ссылки на плагин
- https://github.com/markovroma/vue-cli-plugin-browser-extension
- https://www.npmjs.com/package/vue-cli-plugin-simple-extension
===========
Источник:
habr.com
===========
Похожие новости:
- [Машинное обучение, Программирование] Нейронки «с нуля», или Как мы делали помощника для наших диспетчеров техподдержки
- [Java, Программирование] Small things that pollute your code
- [ReactJS, Лайфхаки для гиков, Облачные сервисы, Программирование] 10 инструментов для повышения продуктивности React-девелоперов в 2020 году (перевод)
- [C++, Научно-популярное, Программирование] Дядя Миша. Основы организации оперативной памяти и работа с ней в С\С++
- [Python, Программирование] Создание нейросети по распознаванию лиц на фотографиях из Вконтакте
- [C++, Программирование, Разработка под Arduino, Робототехника] Обзор методики обучения робототехнике на базе НикиРобот
- [Python, Программирование, Промышленное программирование] Устройство CPython. Доклад Яндекса
- [Swift, Программирование, Разработка мобильных приложений, Разработка под iOS] Swift: Копируй-изменяй
- [API, C, Параллельное программирование, Программирование] Реализуем простые кооперативные потоки на C (перевод)
- [Микросервисы, Программирование] Перенос процесса BPMN из IBM BPM в Camunda — пошаговое руководство (перевод)
Теги для поиска: #_javascript, #_vuejs, #_programmirovanie (Программирование), #_rasshirenija_dlja_brauzerov (Расширения для браузеров), #_javascript, #_vue, #_rasshirenija_brauzerov (расширения браузеров), #_vuecli, #_programmirovanie (программирование), #_javascript, #_vuejs, #_programmirovanie (
Программирование
), #_rasshirenija_dlja_brauzerov (
Расширения для браузеров
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 17:53
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Вступление В этой статье мы с вами напишем свой собственный плагин для проектов на 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 =========== Похожие новости:
Программирование ), #_rasshirenija_dlja_brauzerov ( Расширения для браузеров ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 17:53
Часовой пояс: UTC + 5