Improve configuration

- Make background script optional and allow setting path
- Allow multiple content scripts
- Move all options out of 'options' wrapper.

Author: siphomateke

generator/index.js

@@ -8,7 +8,22 @@ const gitignoreSnippet = `
 /dist-zip
 `
 
-module.exports = (api, options) => {
+module.exports = (api, _options) => {
+  const options = Object.assign({}, _options)
+  options.componentOptions = {}
+  if (options.components.background) {
+    options.componentOptions.background = {
+      entry: 'src/background.js'
+    }
+  }
+  if (options.components.contentScripts) {
+    options.componentOptions.contentScripts = {
+      entries: {
+        'content_scripts/content-script': ['src/content_scripts/content-script.js']
+      }
+    }
+  }
+
   const appRootPath = process.cwd()
   const { name } = require(path.join(appRootPath, 'package.json'))
   const eslintConfig = { env: { webextensions: true } }
@@ -24,7 +39,7 @@ module.exports = (api, options) => {
     vue: {
       pages: {},
       pluginOptions: {
-        browserExtension: { options }
+        browserExtension: options
       }
     }
   }
@@ -44,6 +59,10 @@ module.exports = (api, options) => {
   api.extendPackage(pkg)
   api.render('./template/base-app', { name, ...options })
 
+  if (options.components.background) {
+    api.render('./template/background', { name, ...options })
+  }
+
   if (options.components.popup) {
     api.render('./template/popup', { name, ...options })
 
@@ -73,7 +92,7 @@ module.exports = (api, options) => {
     }
   }
 
-  if (options.components.contentScript) {
+  if (options.components.contentScripts) {
     api.render('./template/content-script', { ...options })
   }
 

…ator/template/base-app/src/background.js …or/template/background/src/background.jsgenerator/template/base-app/src/background.js renamed to generator/template/background/src/background.js generator/template/base-app/src/background.js renamed to generator/template/background/src/background.js

@@ -9,16 +9,18 @@
     "128": "icons/128.png"
   },
   "permissions": [
-    <%_ if (options.components.contentScript) { -%>
+    <%_ if (options.components.contentScripts) { -%>
     "activeTab",
     <%_ } -%>
     "<all_urls>",
     "*://*/*"
   ],
+  <%_ if (options.components.background) { -%>
   "background": {
     "scripts": ["background.js"],
     "persistent": false
   },
+  <%_ } -%>
   "browser_action": {
     <%_ if (options.components.popup) { -%>
     "default_popup": "popup/popup.html",

generator/template/base-app/src/manifest.json

@@ -5,26 +5,35 @@ const logger = require('@vue/cli-shared-utils')
 const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ZipPlugin = require('zip-webpack-plugin')
-const defaultOptions = { components: {} }
+const defaultOptions = { components: {}, componentOptions: {} }
 
 module.exports = (api, options) => {
   const appRootPath = api.getCwd()
-  const pluginOptions = options.pluginOptions.browserExtension ? options.pluginOptions.browserExtension.options : defaultOptions
+  const pluginOptions = options.pluginOptions.browserExtension ? options.pluginOptions.browserExtension : defaultOptions
+  const componentOptions = pluginOptions.componentOptions
   const { name, version } = require(path.join(appRootPath, 'package.json'))
   const isDevelopment = api.service.mode === 'development'
   const isProduction = api.service.mode === 'production'
   const keyFile = api.resolve('key.pem')
   const hasKeyFile = fs.existsSync(keyFile)
-  const backgroundFile = api.resolve('src/background.js')
-  const contentScriptFile = api.resolve('src/content-script.js')
 
   api.chainWebpack((webpackConfig) => {
-    webpackConfig.entryPoints
-      .delete('app').end()
-      .entry('background').add(backgroundFile).end()
-      .when(pluginOptions.components.contentScript, (config) => {
-        config.entry('content-script').add(contentScriptFile).end()
-      })
+    const config = webpackConfig.entryPoints.delete('app').end()
+    const entry = {}
+    if (pluginOptions.components.background) {
+      entry['background'] = [api.resolve(componentOptions.background.entry)]
+    }
+    if (pluginOptions.components.contentScripts) {
+      const entries = componentOptions.contentScripts.entries
+      for (const name of Object.keys(entries)) {
+        let paths = entries[name]
+        if (!Array.isArray(paths)) {
+          paths = [paths]
+        }
+        entry[name] = paths.map(path => api.resolve(path))
+      }
+    }
+    config.merge({entry})
   })
 
   api.configureWebpack((webpackConfig) => {
@@ -97,12 +106,15 @@ module.exports = (api, options) => {
     }
 
     if (options.api === 'chrome' && isDevelopment) {
-      const entries = { background: 'background' }
+      const entries = {}
 
-      if (pluginOptions.components.contentScript) {
-        entries.contentScript = 'content-script'
+      if (pluginOptions.components.background) {
+        entries.background = 'background'
       }
 
+      if (pluginOptions.components.contentScripts) {
+        entries.contentScript = Object.keys(componentOptions.contentScripts.entries)
+      }
       const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
       webpackConfig.plugins.push(new ChromeExtensionReloader({ entries }))
     }

…ate/content-script/src/content-script.js …pt/src/content_scripts/content-script.jsgenerator/template/content-script/src/content-script.js renamed to generator/template/content-script/src/content_scripts/content-script.js generator/template/content-script/src/content-script.js renamed to generator/template/content-script/src/content_scripts/content-script.js

@@ -2,9 +2,15 @@ module.exports = [
   {
     name: 'components',
     type: 'checkbox',
-    default: ['popup'],
+    defaults: ['popup', 'background'],
     message: 'Which browser extension components do you wish to generate?',
     choices: [
+      {
+        name: 'Background script',
+        value: 'background',
+        short: 'background',
+        checked: true
+      },
       {
         name: 'Browser Action Popup',
         value: 'popup',
@@ -17,9 +23,9 @@ module.exports = [
         short: 'options'
       },
       {
-        name: 'Content Script',
-        value: 'contentScript',
-        short: 'content script'
+        name: 'Content Scripts',
+        value: 'contentScripts',
+        short: 'content scripts'
       },
       {
         name: 'Standalone Tab',