使用Vuejs和Vuecli构建Chrome扩展 [英] Building Chrome Extensions with Vuejs and Vuecli

问题描述

我目前正在使用带有 vuejs 的前端构建Chrome扩展程序.使用 vuecli 效果很好.直到应用开始使用Webextension -API为止.普通网站无法访问此API；已注册的扩展程序.

I'm currently building a Chrome Extension with a vuejs powered frontend. This worked pretty great using vuecli. Up until the point at which the app started using the Webextension-API. Normal websites do not have access to this API; registered Extensions do.

那么，使用vuecli(支持Webpack工具)的功能来开发vuejs -Extension的一个好的设置是什么?哪种设置可以测试应用程序?

So what's a good setup for developing a vuejs-Extension with the power of using vuecli (which supports webpack tooling)? What setup allows to test the application?

推荐答案

我建议使用 vue-cli-plugin-browser-extension .请注意，虽然README表示支持Vue CLI 3.x，但它也可以与Vue CLI 4.x(已通过4.3.1测试)一起使用.

I recommend using vue-cli-plugin-browser-extension. Note that while the README indicates Vue CLI 3.x support, it also works with Vue CLI 4.x (tested with 4.3.1).

它支持多种可节省大量时间的功能，包括实时重装以及针对Chrome和Firefox(以及其他浏览器)的捆绑.

It supports several features that will save you a bunch of time, including live-reload, and bundling for Chrome and Firefox (and other browsers).

要将其安装在Vue CLI项目中，只需运行:vue add browser-extension.

To install it in a Vue CLI project, just run: vue add browser-extension.

这篇关于使用Vuejs和Vuecli构建Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！