Skip to content

cucygh/vue-chrome-extension-example

Repository files navigation

vue chrome extension example

develop chrome extension with vue

Installation

$ npm install

Usage

Run $ gulp --watch and load the dist-directory into chrome.

Entryfiles (bundles)

There are two kinds of entryfiles that create bundles.

  1. All js-files in the root of the ./app/scripts directory
  2. All css-,scss- and less-files in the root of the ./app/styles directory

Tasks

Build

$ gulp
Option Description
--watch Starts a livereload server and watches all assets.
To reload the extension on change include livereload.js in your bundle.
--production Minifies all assets
--verbose Log additional data to the console.
--vendor Compile the extension for different vendors (chrome, firefox, opera) Default: chrome
--sourcemaps Force the creation of sourcemaps. Default: !production

pack

Zips your dist directory and saves it in the packages directory.

$ gulp pack --vendor=firefox

Version

Increments version number of manifest.json and package.json, commits the change to git and adds a git tag.

$ gulp patch      // => 0.0.X

or

$ gulp feature    // => 0.X.0

or

$ gulp release    // => X.0.0

Globals

The build tool also defines a variable named ENV in your scripts. It will be set to development unless you use the --production option.

Example: ./app/background.js

if(ENV === 'development'){
	console.log('We are in development mode!');
}

About

vue-chrome-extension-example

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published