BrunoCasotto/vue-chrome-extension-boilerplate

A boilerplate to create a chrome extension using VueJs

Vue Chrome Extension Boilerplate

A vueJs boilerplate to create a chrome extension

Main scripts

 $ npm run dev
 $ npm run build

Configure your manifest

To configure extension manifest edit the file extension.config.js. see more.

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 on extension.config.js

Example

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

Test demo

1) Clone the repository and run

  npm run dev

2) Access extension chrome page

  chrome://inspect/#devices

3) Load the extension on "load unpacked" button

4) Select dist folder

5) Access Google search page

For more informations