Added keyfiles to gitignore.

Added configurable output dir based on vue config file.

Author: adambullmer

README.md

@@ -46,11 +46,13 @@ This can be added to your vuejs project by one of the following methods:
 ## 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.
 
 ```sh
-yarn ext-serve
+yarn serve
+yarn build
 ```
 
 
@@ -62,15 +64,14 @@ yarn test
 ```
 
 ## Roadmap
-- Add generators for background.js, popup, vuex, and vue-router stuff. (Make startup a breeze)
 - 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
   - Options Pages
   - Content scripts
-- Add zipping to the bundle for production builds
 - More configurability in scaffolding, like Kocal/vue-web-extension does
 - A preset
+- Key Generation
 
 ## 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

@@ -1,9 +1,18 @@
+const fs = require('fs')
+const gitignoreSnippet = `
+# Vue Browser Extension Output
+*.pem
+*.pub
+*.zip
+/dist-zip
+`
+
 module.exports = (api, { config }) => {
   const eslintConfig = { env: { webextensions: true } }
   const pkg = {
     private: true,
     scripts: {
-      'ext-serve': 'vue-cli-service ext-serve --mode development'
+      'serve': 'vue-cli-service build --mode development --watch'
     },
     dependencies: {
       'vue-router': '^3.0.1',
@@ -18,4 +27,9 @@ module.exports = (api, { config }) => {
 
   api.extendPackage(pkg)
   api.render('./template')
+
+  api.onCreateComplete(() => {
+    const gitignore = fs.readFileSync(api.resolve('./.gitignore'), 'utf8')
+    fs.writeFileSync(api.resolve('./.gitignore'), gitignore + gitignoreSnippet)
+  })
 }

index.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const fs = require('fs')
 const { exec } = require('child_process')
-const { log } = require('@vue/cli-shared-utils')
+const logger = require('@vue/cli-shared-utils')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
 const WebpackShellPlugin = require('webpack-shell-plugin-next')
@@ -13,9 +13,10 @@ module.exports = (api) => {
   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 packageScript = isProduction ? 'build-zip.js' : 'remove-evals.js'
 
-  api.configureWebpack(webpackConfig => {
+  api.configureWebpack((webpackConfig) => {
     webpackConfig.output.filename = '[name].js'
     webpackConfig.output.chunkFilename = 'js/[id].[name].js?[hash:8]'
 
@@ -57,7 +58,11 @@ module.exports = (api) => {
                 resolve(JSON.stringify(jsonContent, null, 2))
               })
             } catch (error) {
-              console.log('No key.pem file found. This is fine for dev, you will have problems publishing without one')
+              if (isProduction) {
+                logger.error('no key.pem file found. You cannot publish to the chrome store without one. If this is your first publish, chrome will make a key for you, and you can ignore this message')
+              } else {
+                logger.warn('No key.pem file found. This is fine for dev, however you may have problems publishing without one')
+              }
             }
           })
         }
@@ -77,7 +82,7 @@ module.exports = (api) => {
 
     webpackConfig.plugins.push(new WebpackShellPlugin({
       onBuildExit: {
-        scripts: [`node ${path.join(__dirname, 'scripts', packageScript)}`],
+        scripts: [`node ${path.join(__dirname, 'scripts', packageScript)} ${outputDir}`],
         blocking: true,
         parallel: false
       }
@@ -93,16 +98,4 @@ module.exports = (api) => {
       ])
     }
   })
-
-  api.registerCommand('ext-serve', {
-    description: 'Builds and watches the project, writing the files to the output directory'
-  }, (...args) => {
-    log('Starting webpack in watch mode...')
-
-    api.configureWebpack((webpackConfig) => {
-      webpackConfig.watch = true
-    })
-
-    api.service.run('build', ...args)
-  })
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-browser-extension",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Browser extension development plugin for vue-cli 3.0",
   "main": "index.js",
   "scripts": {

scripts/build-zip.js

@@ -5,8 +5,8 @@ const path = require('path')
 const zipFolder = require('zip-folder')
 
 const appRootPath = process.cwd()
-const DEST_DIR = path.join(appRootPath, 'dist')
-const DEST_ZIP_DIR = path.join(appRootPath, 'dist-zip')
+const DEST_DIR = process.argv[2]
+const DEST_ZIP_DIR = path.join(appRootPath, `${DEST_DIR}-zip`)
 const { name, version } = require(path.join(appRootPath, 'package.json'))
 
 const makeDestZipDirIfNotExists = () => {

scripts/remove-evals.js

@@ -2,7 +2,7 @@
 
 const path = require('path')
 const fs = require('fs')
-const BUNDLE_DIR = path.join(process.cwd(), 'dist')
+const BUNDLE_DIR = process.argv[2]
 const bundles = [
   'background.js',
   'popup/popup.js'