Refactored Prompts into a single list

Storing results of generation as config values
Consuming new config values

Author: adambullmer

README.md

@@ -77,10 +77,9 @@ yarn test
 - 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
   - Dedicated extension pages
-  - Content scripts
-- More configurability in scaffolding, like [Kocal/vue-web-extension](https://github.com/Kocal/vue-web-extension) does
 - A preset
 - Key Generation
+- Cleanup the dist-zip directory
 
 ## Credits
 - [https://github.com/Kocal/vue-web-extension](https://github.com/Kocal/vue-web-extension) For inspiration on app and build structure

generator/index.js

@@ -20,11 +20,14 @@ module.exports = (api, options) => {
     dependencies: {
       'vue-router': '^3.0.1',
       'vuex': '^3.0.1'
+    },
+    vue: {
+      pages: {},
+      pluginOptions: {
+        browserExtension: { options }
+      }
     }
   }
-  const renderConfig = {
-    pages: {}
-  }
 
   if (api.hasPlugin('eslint')) {
     console.log('Adding eslint config stuffs')
@@ -37,7 +40,7 @@ module.exports = (api, options) => {
   if (options.popupPage) {
     api.render('./template/popup', { name, ...options })
 
-    renderConfig.pages['popup/popup'] = {
+    pkg.vue.pages['popup/popup'] = {
       entry: 'src/popup/popup.js',
       title: 'Popup'
     }
@@ -46,7 +49,7 @@ module.exports = (api, options) => {
   if (options.optionsPage) {
     api.render('./template/options', { name, ...options })
 
-    renderConfig.pages['options/options'] = {
+    pkg.vue.pages['options/options'] = {
       entry: 'src/options/options.js',
       title: 'Options'
     }
@@ -56,10 +59,6 @@ module.exports = (api, options) => {
     api.render('./template/content-script', { ...options })
   }
 
-  api.render((files) => {
-    files['vue.config.js'] = api.genJSConfig(renderConfig)
-  })
-
   api.onCreateComplete(() => {
     const gitignore = fs.readFileSync(api.resolve('./.gitignore'), 'utf8')
     fs.writeFileSync(api.resolve('./.gitignore'), gitignore + gitignoreSnippet)

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

@@ -9,26 +9,30 @@
     "128": "icons/128.png"
   },
   "permissions": [
+    <%_ if (options.components.contentScript) { -%>
+    "activeTab",
+    <%_ } -%>
     "<all_urls>",
-    "*://*/*"<% if (options.contentScript) { %>,
-    "activeTab"<% } %>
+    "*://*/*"
   ],
   "background": {
     "scripts": ["background.js"],
     "persistent": false
   },
   "browser_action": {
-    <%_ if (options.popupPage) { -%>
+    <%_ if (options.components.popup) { -%>
     "default_popup": "popup/popup.html",
     <%_ } -%>
     "default_title": "<%- name %>",
     "default_icon": {
       "19": "icons/19.png",
       "38": "icons/38.png"
     }
-  }<% if (options.optionsPage) { %>,
+  <%_ if (options.components.options) { -%>
+  },
   "options_ui": {
     "page": "options/options.html",
     "chrome_style": true
-  }<% } %>
+  <%_ } -%>
+  }
 }

index.js

@@ -6,32 +6,27 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
 const WebpackShellPlugin = require('webpack-shell-plugin-next')
 const ZipPlugin = require('zip-webpack-plugin')
+const defaultOptions = { components: {} }
 
-module.exports = (api) => {
+module.exports = (api, options) => {
   const appRootPath = api.getCwd()
+  const pluginOptions = options.pluginOptions.browserExtension ? options.pluginOptions.browserExtension : defaultOptions
   const { name, version } = require(path.join(appRootPath, 'package.json'))
   const isDevelopment = api.service.mode === 'development'
   const isProduction = api.service.mode === 'production'
-  const outputDir = api.resolve(api.service.projectOptions.outputDir || 'dist')
+  const outputDir = api.resolve(options.outputDir || 'dist')
   const packageScript = isProduction ? null : 'remove-evals.js'
   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')
-  const hasBackgroundFile = fs.existsSync(backgroundFile)
-  const hasContentScriptFile = fs.existsSync(contentScriptFile)
 
   api.chainWebpack((webpackConfig) => {
-    webpackConfig.entryPoints.delete('app').end()
-      .when(hasBackgroundFile, (config) => {
-        config.entry('background')
-          .add(backgroundFile)
-          .end()
-      })
-      .when(hasContentScriptFile, (config) => {
-        config.entry('content-script')
-          .add(contentScriptFile)
-          .end()
+    webpackConfig.entryPoints
+      .delete('app').end()
+      .entry('background').add(backgroundFile).end()
+      .when(pluginOptions.components.contentScript, (config) => {
+        config.entry('content-script').add(contentScriptFile).end()
       })
   })
 
@@ -86,7 +81,7 @@ module.exports = (api) => {
 
     if (packageScript === null) {
       webpackConfig.plugins.push(new ZipPlugin({
-        path: api.resolve(`${api.service.projectOptions.outputDir || 'dist'}-zip`),
+        path: api.resolve(`${options.outputDir || 'dist'}-zip`),
         filename: `${name}-v${version}.zip`
       }))
     } else {
@@ -100,11 +95,9 @@ module.exports = (api) => {
     }
 
     if (isDevelopment) {
-      const entries = {}
-      if (hasBackgroundFile) {
-        entries.background = 'background'
-      }
-      if (hasContentScriptFile) {
+      const entries = { background: 'background' }
+
+      if (pluginOptions.components.contentScript) {
         entries.contentScript = 'content-script'
       }
 

prompts.js

@@ -1,18 +1,45 @@
 module.exports = [
   {
-    name: 'popupPage',
-    type: 'confirm',
-    default: true,
-    message: 'Generate a browser action popup? (https://developer.chrome.com/extensions/user_interface#browser_action)'
-  }, {
-    name: 'optionsPage',
-    type: 'confirm',
-    default: false,
-    message: 'Generate an options page? (https://developer.chrome.com/extensions/options)'
-  }, {
-    name: 'contentScript',
-    type: 'confirm',
-    default: false,
-    message: 'Generate a content script? (https://developer.chrome.com/extensions/content_scripts)'
+    name: 'components',
+    type: 'checkbox',
+    default: ['popup'],
+    message: 'Which browser extension components do you wish to generate?',
+    choices: [
+      {
+        name: 'Browser Action Popup',
+        value: 'popup',
+        short: 'popup',
+        checked: true
+      },
+      {
+        name: 'Options Page',
+        value: 'options',
+        short: 'options'
+      },
+      {
+        name: 'Content Script',
+        value: 'contentScript',
+        short: 'content script'
+      // },
+      // {
+      //   name: 'Standalone Tab',
+      //   value: 'standalone',
+      //   short: 'standalone'
+      // },
+      // {
+      //   name: 'Dev Tools Tab',
+      //   value: 'devTools',
+      //   short: 'dev tools'
+      }
+    ],
+    filter: async (input) => {
+      const componentMap = {}
+
+      input.forEach((component) => {
+        componentMap[component] = true
+      })
+
+      return componentMap
+    }
   }
 ]