Skip to content
Browser extension development plugin for vue-cli 3.0
Branch: master
Clone or download
Latest commit 6816efc Mar 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
generator add override support Mar 22, 2019
locales Initial commit of a vue-cli plugin Jul 10, 2018
.editorconfig
.eslintrc.js Initial commit of a vue-cli plugin Jul 10, 2018
.gitignore
LICENSE Initial commit Jul 10, 2018
README.md update README Mar 23, 2019
index.js Added asset filtering on zip files and icons. Feb 22, 2019
logo.png Initial commit of a vue-cli plugin Jul 10, 2018
package.json v0.15.0 Mar 28, 2019
prompts.js update prompts Mar 23, 2019
ui.js Initial commit of a vue-cli plugin Jul 10, 2018
yarn.lock Hesitantly deleting remove-eval script as it wasn't making any change… Jul 26, 2018

README.md

vue-cli-plugin-browser-extension

Browser extension development plugin for vue-cli 3.x

What does it do?

This is intended to be a vue-cli@3.x replacement for https://github.com/Kocal/vue-web-extension.

This plugin changes the serve command for your vue applications. This new command is only for running a livereload server while testing out your browser extension.

This removes the entrypoint of main.js, and as such will not scaffold a general vue app. That behavior might change when support for a standalone tab application exists, but for now it is gone.

Packaging and deploying will still be done with yarn build and zipping in up for Chrome, Firefox, or whichever other browser you wish to develop for.

It makes some assumptions about your project setup. I hope to be able to scaffold an app so that identifying the below in unnecessary.

|- public/
  |- icons/
    |- Icons for your extension. Should include a 16, 19, 38, 48, 128 px square image
|- src/
   |- assets/
      |- Static assets in use in your app, like logo.png
   |- content_scripts
      |- content-script.js
   |- options/ (asked during project generation)
      |- App.vue
      |- options.html
      |- options.js
   |- popup/
      |- router/
         |- pages/
            |- Index.vue
         |- index.js
         |- routes.js
      |- App.vue
      |- popup.html
      |- popup.js
   |- override/
      |- router/
         |- pages/
            |- Index.vue
         |- index.js
         |- routes.js
      |- App.vue
      |- override.html
      |- override.js
   |- standalone/
      |- router/
         |- pages/
            |- Index.vue
         |- index.js
         |- routes.js
      |- App.vue
      |- standalone.html
      |- standalone.js
   |- store/
      |- actions.js
      |- getters.js
      |- index.js
      |- mutation-types.js
      |- mutations.js
   |- background.js
   |- manifest.json

Adding to your project

This can be added to your vuejs project by one of the following methods:

  • Using the vue ui and searching for this project
  • Using the vue cli vue add browser-extension command

Usage

Running the Livereload server. This will build and write to the local dist directory.

This plugin will respect the outputDir setting, however it cannot read into passed CLI args, so if you require a custom output dir, be sure to add it in your vue.config.js file. You can then add this as an unpacked plugin to your browser, and will continue to update as you make changes.

NOTE: you cannot get HMR support in the popup window, however, closing and reopening will refresh your content.

yarn serve
yarn build

Plugin options

Plugin options can be set inside your vue.config.js:

// vue.config.js
module.exports = {
  pluginOptions: {
    browserExtension: {
      // options...
    }
  }
}
  • components

    • Type: Object.<string, boolean>

    The browser extension components that will be managed by this plugin.

    Valid components are:

    • background
    • popup
    • options
    • contentScripts
    • override
    • standalone
    components: {
      background: true,
      contentScripts: true
    }
  • componentOptions

    • Type: Object.<string, Object>

    See Component options.

  • manifestSync

    • Type: Array<string>
    • Default: ['version']

    Array containing names of manifest.json keys that will be automatically synced with package.json on build.

    Currently, the only supported keys are version and description.

  • modesToZip

    • Type: Array<string>
    • Default: ['production']

    Array containing names of mode in which zipping up will trigger after build.

  • api

    • Type: 'chrome'|'browser'
    • Default: 'browser'

    Browser extension API to use.

  • usePolyfill

    • Type: boolean
    • Default: true

    Whether to add webextension-polyfill to polyfill WebExtension APIs in chrome.

  • autoImportPolyfill

    • Type: boolean
    • Default: true

    Whether to auto import webextension-polyfill using Webpack's ProvidePlugin.

Component options

Some browser extension components have additional options which can be set as follows:

// vue.config.js
module.exports = {
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        // <name of component>: <options>
        // e.g.
        contentScripts: {
          entries: {
            'content1': 'src/content-script1.js',
            'content2': 'src/content-script2.js'
          }
        }
      }
    }
  }
}

background

  • entry

    • Type: string|Array<string>

    Background script as webpack entry using the single entry shorthand syntax.

    background: {
      entry: 'src/my-background-script.js'
    }

contentScripts

  • entries

    • Type: {[entryChunkName: string]: string|Array<string>}

    Content scripts as webpack entries using using the object syntax.

    contentScripts: {
      entries: {
        'my-first-content-script': 'src/content-script.js',
        'my-second-content-script': 'src/my-second-script.js'
      }
    }

Internationalization

Some boilerplate for internationalization has been added. This follows the i18n (chrome|WebExtention) spec. Provided for you is the default_locale option in the manifest, and a _locales directory. There is some basic usage of it in the manifest, as well as in some of the boilerplate files. Since this is largely an out of the box solution provided by the browsers, it is heavily encouraged to utilize it. If you do not want to translate your app, simply delete the public/_locales directory, and no longer use the browser.i18n methods.

Testing

This library is following the standard styling of vue projects, and those are really the only tests to perform.

yarn test

Roadmap

  • Add some generator options for other pieces of browser extensions. This includes scaffolding the components/dirs, and registering the build options into the build time hooks.
    • Dev Tools
  • A preset
  • Key Generation
  • Cleanup the dist-zip directory

Credits

You can’t perform that action at this time.