Merge pull request #13 from nextgensparx/improve-browser-support

Add support for browsers that use the WebExtension API

Author: adambullmer

README.md

@@ -75,6 +75,59 @@ yarn serve
 yarn build
 ```
 
+## Plugin options
+
+Plugin options can be set inside your `vue.config.js`:
+
+```js
+// vue.config.js
+module.exports = {
+  pluginOptions: {
+    browserExtension: {
+      options: {
+        // options...
+      }
+    }
+  }
+}
+```
+
+- **components**
+  - Type: `Object.<string, boolean>`
+
+  The browser extension components that will be managed by this plugin.
+
+  Valid components are:
+  - popup
+  - options
+  - contentScript
+  - standalone
+
+  ```js
+  components: {
+    popup: true,
+    contentScript: true
+  }
+  ```
+
+- **api** 
+  - Type: `'chrome'|'browser'`
+  - Default: `'browser'`
+  
+  Browser extension API to use.
+
+- **usePolyfill**
+  - Type: `boolean`
+  - Default: `true`
+  
+  Whether to add [webextension-polyfill](https://github.com/mozilla/webextension-polyfill) to polyfill WebExtension APIs in chrome.
+
+- **autoImportPolyfill**
+  - Type: `boolean`
+  - Default: `true`
+
+  Whether to auto import `webextension-polyfill` using Webpack's [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/).
+
 
 ## Testing
 This library is following the standard styling of vue projects, and those are really the only tests to perform.

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,12 +1,15 @@
 import store from './store'
+<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
+import browser from 'webextension-polyfill'
+<%_ } -%>
 
 <%_ if (options.popupPage) { -%>
-chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {<%_ } else { -%>
-chrome.browserAction.onClicked.addListener(function (tab) {<%_ } -%>
+<%- options.api %>.runtime.onMessage.addListener(function (request, sender, sendResponse) {<%_ } else { -%>
+<%- options.api %>.browserAction.onClicked.addListener(function (tab) {<%_ } -%>
   console.log(`Hello ${store.getters.foo}!`)
 
   <%_ if (options.contentScript) { -%>
-  chrome.tabs.executeScript({
+  <%- options.api %>.tabs.executeScript({
     file: 'content-script.js',
   });
   <%_ } -%>

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

@@ -32,7 +32,7 @@
   },
   "options_ui": {
     "page": "options/options.html",
-    "chrome_style": true
+    "<%- options.api %>_style": true
   <%_ } -%>
   }
 }

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

@@ -3,12 +3,16 @@
 </template>
 
 <script>
+<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
+import browser from 'webextension-polyfill'
+<%_ } -%>
+
 export default {
   data () {
     return {}
   },
   mounted () {
-    chrome.runtime.sendMessage({});
+    <%- options.api %>.runtime.sendMessage({})
   }
 }
 </script>

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

@@ -3,12 +3,16 @@
 </template>
 
 <script>
+<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
+import browser from 'webextension-polyfill'
+<%_ } -%>
+
 export default {
   data () {
     return {}
   },
   mounted () {
-    chrome.runtime.sendMessage({});
+    <%- options.api %>.runtime.sendMessage({});
   }
 }
 </script>

index.js

@@ -2,8 +2,8 @@ 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')
 const defaultOptions = { components: {} }
 
@@ -32,6 +32,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' }]))
@@ -84,13 +96,14 @@ module.exports = (api, options) => {
       }))
     }
 
-    if (isDevelopment) {
+    if (options.api === 'chrome' && isDevelopment) {
       const entries = { background: 'background' }
 
       if (pluginOptions.components.contentScript) {
         entries.contentScript = 'content-script'
       }
 
+      const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
       webpackConfig.plugins.push(new ChromeExtensionReloader({ entries }))
     }
   })

prompts.js

@@ -41,5 +41,35 @@ module.exports = [
 
       return componentMap
     }
+  },
+  {
+    name: 'api',
+    type: 'list',
+    default: 'browser',
+    message: 'Which extension API do you wish to use?',
+    choices: [
+      {
+        name: 'browser (WebExtension)',
+        value: 'browser'
+      },
+      {
+        name: 'chrome',
+        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
   }
 ]