Merge branch 'master' into add-manifest-transformer

adambullmer · web-flow · commit ac550db2f711 · 2019-07-26T02:53:46.000-05:00
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+generator/template/background/src/background.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,12 +3,9 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/standard'
-  ],
+  extends: ['plugin:vue/essential', '@vue/standard'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
+  }
 }
diff --git a/README.md b/README.md
@@ -37,6 +37,15 @@ I hope to be able to scaffold an app so that identifying the below in unnecessar
       |- App.vue
       |- popup.html
       |- popup.js
+   |- override/
+      |- router/
+         |- pages/
+            |- Index.vue
+         |- index.js
+         |- routes.js
+      |- App.vue
+      |- override.html
+      |- override.js
    |- standalone/
       |- router/
          |- pages/
@@ -102,6 +111,7 @@ module.exports = {
   - popup
   - options
   - contentScripts
+  - override
   - standalone
 
   ```js
diff --git a/generator/index.js b/generator/index.js
@@ -30,11 +30,11 @@ module.exports = (api, _options) => {
   const pkg = {
     private: true,
     scripts: {
-      'serve': 'vue-cli-service build --mode development --watch'
+      serve: 'vue-cli-service build --mode development --watch'
     },
     dependencies: {
       'vue-router': '^3.0.1',
-      'vuex': '^3.0.1'
+      vuex: '^3.0.1'
     },
     vue: {
       pages: {},
@@ -68,6 +68,7 @@ module.exports = (api, _options) => {
 
     pkg.vue.pages['popup/popup'] = {
       entry: 'src/popup/popup.js',
+      template: 'src/popup/popup.html',
       title: 'Popup'
     }
   }
@@ -77,16 +78,28 @@ module.exports = (api, _options) => {
 
     pkg.vue.pages['options/options'] = {
       entry: 'src/options/options.js',
+      template: 'src/options/options.html',
       title: 'Options'
     }
   }
 
+  if (options.components.override) {
+    api.render('./template/override', { name, ...options })
+
+    pkg.vue.pages['override/override'] = {
+      entry: 'src/override/override.js',
+      template: 'src/override/override.html',
+      title: 'Override'
+    }
+  }
+
   if (options.components.standalone) {
     console.log('Generating standalone app')
     api.render('./template/standalone', { name, ...options })
 
     pkg.vue.pages['standalone/standalone'] = {
       entry: 'src/standalone/standalone.js',
+      template: 'src/standalone/standalone.html',
       filename: 'app.html',
       title: name
     }
diff --git a/generator/template/base-app/src/manifest.json b/generator/template/base-app/src/manifest.json
@@ -12,30 +12,42 @@
   "permissions": [
     <%_ if (options.components.contentScripts) { -%>
     "activeTab",
-    <%_ } -%>
+    <%_
+    } -%>
     "<all_urls>",
     "*://*/*"
   ],
   <%_ if (options.components.background) { -%>
   "background": {
-    "scripts": ["background.js"],
-    "persistent": false
-  },
-  <%_ } -%>
+      "scripts": [
+        "background.js"
+      ],
+      "persistent": false
+    },
+  <%_
+  } -%>
   "browser_action": {
     <%_ if (options.components.popup) { -%>
     "default_popup": "popup/popup.html",
-    <%_ } -%>
+    <%_
+    } -%>
     "default_title": "__MSG_extName__",
     "default_icon": {
       "19": "icons/19.png",
       "38": "icons/38.png"
     }
   <%_ if (options.components.options) { -%>
-  },
-  "options_ui": {
-    "page": "options/options.html",
-    "<%- options.api %>_style": true
-  <%_ } -%>
+    },
+    "options_ui": {
+      "page": "options/options.html",
+      "<%- options.api %>_style": true
+  <%_
+    } -%>
   }
+   <%_ if (options.components.override) { -%>
+  "chrome_url_overrides": {
+      "<%- options.components.overrideOption || 'newtab' %>": "override/override.html"
+    }
+  <%_
+  } -%>
 }
diff --git a/generator/template/base-app/src/store/actions.js b/generator/template/base-app/src/store/actions.js
@@ -1,5 +1,5 @@
 import * as types from './mutation-types'
 
-export const setFoo = ({commit}, payload) => {
+export const setFoo = ({ commit }, payload) => {
   commit(types.UPDATE_FOO, payload)
 }
diff --git a/generator/template/override/src/override/App.vue b/generator/template/override/src/override/App.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <p>{{ defaultText }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  computed: {
+    defaultText() {
+      return <%- options.api %>.i18n.getMessage('extName');
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 20px;
+}
+</style>
diff --git a/generator/template/override/src/override/override.html b/generator/template/override/src/override/override.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><%- '\<\%= htmlWebpackPlugin.options.title \%\>' %></title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/generator/template/override/src/override/override.js b/generator/template/override/src/override/override.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App'
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
diff --git a/index.js b/index.js
@@ -13,9 +13,9 @@ const defaultOptions = {
   manifestTransformer: null
 }
 const performanceAssetFilterList = [
-  (file) => !(/\.map$/.test(file)),
+  (file) => !/\.map$/.test(file),
   (file) => !file.endsWith('.zip'),
-  (file) => !(/^icons\//.test(file))
+  (file) => !/^icons\//.test(file)
 ]
 
 function getManifestJsonString(pluginOptions, jsonContent) {
@@ -28,10 +28,11 @@ function getManifestJsonString(pluginOptions, jsonContent) {
 
 module.exports = (api, options) => {
   const appRootPath = api.getCwd()
-  const pluginOptions = options.pluginOptions.browserExtension ? Object.assign(defaultOptions, options.pluginOptions.browserExtension) : defaultOptions
+  const pluginOptions = options.pluginOptions.browserExtension
+    ? Object.assign(defaultOptions, options.pluginOptions.browserExtension)
+    : defaultOptions
   const componentOptions = pluginOptions.componentOptions
   const packageJson = 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)
@@ -49,10 +50,10 @@ module.exports = (api, options) => {
         if (!Array.isArray(paths)) {
           paths = [paths]
         }
-        entry[name] = paths.map(path => api.resolve(path))
+        entry[name] = paths.map((path) => api.resolve(path))
       }
     }
-    webpackConfig.merge({entry})
+    webpackConfig.merge({ entry })
     webpackConfig.optimization.delete('splitChunks')
   })
 
@@ -64,16 +65,19 @@ module.exports = (api, options) => {
     if (webpackConfig.performance === undefined) {
       webpackConfig.performance = {}
     }
-    webpackConfig.performance.assetFilter = (assetFilename) => performanceAssetFilterList.every((filter) => filter(assetFilename))
+    webpackConfig.performance.assetFilter = (assetFilename) =>
+      performanceAssetFilterList.every((filter) => filter(assetFilename))
 
     if (pluginOptions.autoImportPolyfill) {
-      webpackConfig.plugins.push(new webpack.ProvidePlugin({
-        'browser': 'webextension-polyfill'
-      }))
+      webpackConfig.plugins.push(
+        new webpack.ProvidePlugin({
+          browser: 'webextension-polyfill'
+        })
+      )
 
       // Workaround for https://github.com/mozilla/webextension-polyfill/issues/68
       webpackConfig.module.rules.push({
-        test: require.resolve('webextension-polyfill', {paths: [appRootPath]}),
+        test: require.resolve('webextension-polyfill', { paths: [appRootPath] }),
         use: 'imports-loader?browser=>undefined'
       })
     }
@@ -86,64 +90,73 @@ module.exports = (api, options) => {
       }
     }
 
-    webpackConfig.plugins.push(new CopyWebpackPlugin([{
-      from: './src/manifest.json',
-      to: 'manifest.json',
-      transform: (content) => {
-        return new Promise((resolve, reject) => {
-          const jsonContent = JSON.parse(content)
-          if (pluginOptions.manifestSync.includes('version')) {
-            jsonContent.version = packageJson.version
-          }
-          if (pluginOptions.manifestSync.includes('description')) {
-            jsonContent.description = packageJson.description
-          }
-
-          if (isProduction) {
-            return resolve(getManifestJsonString(pluginOptions, jsonContent))
-          }
-
-          jsonContent.content_security_policy = jsonContent.content_security_policy || "script-src 'self' 'unsafe-eval'; object-src 'self'"
-
-          try {
-            fs.statSync(keyFile)
+    webpackConfig.plugins.push(
+      new CopyWebpackPlugin([
+        {
+          from: './src/manifest.json',
+          to: 'manifest.json',
+          transform: (content) => {
+            return new Promise((resolve, reject) => {
+              const jsonContent = JSON.parse(content)
+              if (pluginOptions.manifestSync.includes('version')) {
+                jsonContent.version = packageJson.version
+              }
+              if (pluginOptions.manifestSync.includes('description')) {
+                jsonContent.description = packageJson.description
+              }
 
-            return exec(`openssl rsa -in ${keyFile} -pubout -outform DER | openssl base64 -A`, (error, stdout) => {
-              if (error) {
-                // node couldn't execute the command
-                reject(error)
+              if (isProduction) {
+                return resolve(getManifestJsonString(pluginOptions, jsonContent))
               }
 
-              jsonContent.key = stdout
-              resolve(getManifestJsonString(pluginOptions, jsonContent))
+              jsonContent.content_security_policy =
+                jsonContent.content_security_policy || "script-src 'self' 'unsafe-eval'; object-src 'self'"
+
+              try {
+                fs.statSync(keyFile)
+
+                return exec(`openssl rsa -in ${keyFile} -pubout -outform DER | openssl base64 -A`, (error, stdout) => {
+                  if (error) {
+                    // node couldn't execute the command
+                    reject(error)
+                  }
+
+                  jsonContent.key = stdout
+                  resolve(getManifestJsonString(pluginOptions, jsonContent))
+                })
+              } catch (error) {
+                logger.warn(
+                  'No key.pem file found. This is fine for dev, however you may have problems publishing without one'
+                )
+                resolve(getManifestJsonString(pluginOptions, jsonContent))
+              }
             })
-          } catch (error) {
-            logger.warn('No key.pem file found. This is fine for dev, however you may have problems publishing without one')
-            resolve(getManifestJsonString(pluginOptions, jsonContent))
           }
-        })
-      }
-    }]))
+        }
+      ])
+    )
 
     if (pluginOptions.modesToZip.includes(api.service.mode)) {
-      webpackConfig.plugins.push(new ZipPlugin({
-        path: api.resolve(`${options.outputDir || 'dist'}-zip`),
-        filename: `${packageJson.name}-v${packageJson.version}-${api.service.mode}.zip`
-      }))
+      webpackConfig.plugins.push(
+        new ZipPlugin({
+          path: api.resolve(`${options.outputDir || 'dist'}-zip`),
+          filename: `${packageJson.name}-v${packageJson.version}-${api.service.mode}.zip`
+        })
+      )
     }
 
-    if (options.api === 'chrome' && isDevelopment) {
-      const entries = {}
+    // configure webpack-extension-reloader for automatic reloading of extension when content and background scripts change (not HMR)
+    // enabled only when webpack mode === 'development'
+    const entries = {}
 
-      if (pluginOptions.components.background) {
-        entries.background = 'background'
-      }
+    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 }))
+    if (pluginOptions.components.contentScripts) {
+      entries.contentScript = Object.keys(componentOptions.contentScripts.entries)
     }
+    const ExtensionReloader = require('webpack-extension-reloader')
+    webpackConfig.plugins.push(new ExtensionReloader({ entries }))
   })
 }
diff --git a/locales/en.json b/locales/en.json
diff --git a/package.json b/package.json
diff --git a/prompts.js b/prompts.js
diff --git a/ui.js b/ui.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+generator/template/background/src/background.js`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import * as types from './mutation-types'`
`2`	`2`
`3`		`-export const setFoo = ({commit}, payload) => {`
	`3`	`+export const setFoo = ({ commit }, payload) => {`
`4`	`4`	`commit(types.UPDATE_FOO, payload)`
`5`	`5`	`}`