Skip to content

Building Chrome Extensions with Vuejs and Vuecli

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.

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?

Answer

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).

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

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