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

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

• https://github.com/markovroma/vue-cli-plugin-browser-extension
• https://www.npmjs.com/package/vue-cli-plugin-simple-extension