smartninja/vue-chrome-extension-boilerplate

A boilerplate to create a chrome extension using VueJs

SmartNinja Chrome Extension Template

Adapted from https://github.com/BrunoCasotto/vue-chrome-extension-boilerplate

Quickstart

Install and run:

npm install
npm run dev
npm run build

Build:

npm run build

Configure the manifest

To configure extension manifest edit the file extension.config.js. See more here.

Example:

manifest: {
  name: 'Extension Name',
  description: 'Extension description here',
  version: '1.0',
  manifest_version: 3,
  
  background: {
    service_worker: 'background.js'
  },
  
  content_scripts: [],
  
  permissions: [],
  
  action: {
    default_popup: 'index.html'
  },
}

To configure your source files edit the entry parameter in extension.config.js

Example:

entry: {
  main: './src/main.js',
  background: './src/background.js',
  content: './src/content.js'
}

Test demo

1. Clone the repository and run:

npm run dev

2. Access extension chrome page:

chrome://inspect/#devices

3. Load the extension with "load unpacked" button

4. Select dist folder