Building Chrome Расширения с Vuejs и Vuecli - PullRequest
Новая
       35

Building Chrome Расширения с Vuejs и Vuecli

0 голосов
/ 12 апреля 2020

Я сейчас создаю расширение Chrome с vuejs внешним интерфейсом. Это работало довольно хорошо, используя vuecli Вплоть до того момента, когда приложение начало использовать Webextension -API. Обычные сайты не имеют доступа к этому API; Зарегистрированные Расширения делают.

Итак, какова хорошая настройка для разработки расширения vuejs с возможностью использования vuecli (который поддерживает инструменты webpack)? Какая настройка позволяет протестировать приложение?

Ответы [ 2 ]

2 голосов
/ 12 апреля 2020

Я рекомендую использовать vue-cli-plugin-browser-extension. Обратите внимание, что хотя README указывает на поддержку Vue CLI 3.x, он также работает с Vue CLI 4.x (протестировано с 4.3.1).

Он поддерживает несколько функций, которые сэкономят вам кучу времени, включая live-reload и связывание для Chrome и Firefox (и других браузеров).

Чтобы установить его в * CL CLI-проекте * 1014, просто запустите: vue add browser-extension.

0 голосов
/ 12 апреля 2020

После некоторого размышления я наткнулся на vue-cli-service -бинарный . Этот двоичный файл позволяет watch проект и перестроить приложение по мере необходимости. По умолчанию vuecli выводит файлы в dist, то есть в каталог, в который я поместил файлы manifest.json, contentScript.js и backgroundScript.js. Следующая команда затем перестроит приложение по мере необходимости, обеспечивая почти горячую перезагрузку (открытие и закрытие всплывающего окна). Время сборки достаточно небольшое для небольшого приложения (~ 200 мс). 

vue-cli-service build --watch --no-clean

Наконец, вам может потребоваться отключить eslint при сохранении (см. this ), так как оно выдает ошибки о chrome не найдено. Затем я загружаю распакованное расширение в чистую сессию Chrome и начинаю тестировать его с помощью инструментов разработчика. К сожалению, я еще не получил Vue Devtools, работающий с расширением.

Это работает для меня: я могу разрабатывать расширения vuejs -powered Chrome разумным способом. Мне все еще интересно, есть ли у кого-нибудь лучшие рабочие процессы или идеи для улучшения?

...