Add WebExtension polyfill option

Author: siphomateke

generator/index.js

@@ -29,6 +29,13 @@ module.exports = (api, options) => {
     }
   }
 
+  if (options.usePolyfill) {
+    pkg.dependencies['webextension-polyfill'] = '^0.3.0'
+    pkg.devDependencies = {
+      'imports-loader': '^0.8.0'
+    }
+  }
+
   if (api.hasPlugin('eslint')) {
     console.log('Adding eslint config stuffs')
     pkg.eslintConfig = eslintConfig

generator/template/base-app/src/background.js

@@ -1,4 +1,7 @@
 import store from './store'
+<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
+import browser from 'webextension-polyfill'
+<%_ } -%>
 
 <%_ if (options.popupPage) { -%>
 <%- options.api %>.runtime.onMessage.addListener(function (request, sender, sendResponse) {<%_ } else { -%>

generator/template/popup/src/popup/router/pages/Index.vue

@@ -3,6 +3,10 @@
 </template>
 
 <script>
+<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
+import browser from 'webextension-polyfill'
+<%_ } -%>
+
 export default {
   data () {
     return {}

generator/template/standalone/src/standalone/router/pages/Index.vue

@@ -3,6 +3,10 @@
 </template>
 
 <script>
+<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
+import browser from 'webextension-polyfill'
+<%_ } -%>
+
 export default {
   data () {
     return {}

index.js

@@ -2,6 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const { exec } = require('child_process')
 const logger = require('@vue/cli-shared-utils')
+const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
 const ZipPlugin = require('zip-webpack-plugin')
@@ -32,6 +33,18 @@ module.exports = (api, options) => {
     webpackConfig.output.chunkFilename = 'js/[id].[name].js?[hash:8]'
     webpackConfig.node.global = false
 
+    if (pluginOptions.autoImportPolyfill) {
+      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]}),
+        use: 'imports-loader?browser=>undefined'
+      })
+    }
+
     if (isProduction) {
       if (hasKeyFile) {
         webpackConfig.plugins.push(new CopyWebpackPlugin([{ from: keyFile, to: 'key.pem' }]))

prompts.js

@@ -57,5 +57,19 @@ module.exports = [
         value: 'chrome'
       }
     ]
+  },
+  {
+    name: 'usePolyfill',
+    type: 'confirm',
+    message: 'Add WebExtension polyfill?',
+    default: true,
+    when: answers => answers.api === 'browser'
+  },
+  {
+    name: 'autoImportPolyfill',
+    type: 'confirm',
+    message: 'Make polyfill available without import?',
+    default: true,
+    when: answers => answers.usePolyfill
   }
 ]