https://github.com/theoephraim/vue-chrome-extension-template

Example setup of a chrome extension built with vue - with a nice dev env (linting, reloading, etc)
https://github.com/theoephraim/vue-chrome-extension-template

chrome-extension reloading template vue webpack

Last synced: 29 days ago
JSON representation

Example setup of a chrome extension built with vue - with a nice dev env (linting, reloading, etc)

• Host: GitHub
• URL: https://github.com/theoephraim/vue-chrome-extension-template
• Owner: theoephraim
• Created: 2020-02-24T00:48:45.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T09:18:07.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T00:16:54.522Z (7 months ago)
• Topics: chrome-extension, reloading, template, vue, webpack
• Language: JavaScript
• Size: 2.48 MB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue Chrome Extension Template

A nice starter kit for building Chrome extensions using vue with

- wepack, vue, pug, less

- automatic lint+fix on save

- live reloading enabled via [webpack-extension-reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader)

- helpers for dealing with intra-extension messaging

- helpers for some other chrome APIs

This does not have an example of every chrome extension feature, but it does cover most common features.

## Developing locally

(after forking/copying the repo and running `npm install`)

run `npm run dev`

- go to `chrome://extensions`

- enable "developer mode"

- click "Load unpacked" and select the `dist` folder of this project

Live reloading will mostly handle things for you, but if you change the manifest, env vars, or webpack config, you will need to stop and restart `npm run dev`.

Also some specific errors may require going back to `chrome://extensions` and re-loading the plugin.

**Happy hacking!**

## Building for production

run `npm run build`

## Configuration

Configuration is stored in config/env.js and exposed in `process.env` via `webpack.DefinePlugin`. Defaults are loaded first and then overrides depending on the env being built for.

Optionally, you can create a `config/local.js` file (not checked into git) with overrides to be loaded only during local development.