Browser polyfill now auto included by default

Removed configuration, but documented an escape route
Resolves #50

Author: adambullmer

.eslintrc.js

@@ -1,11 +1,12 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    webextensions: true,
   },
   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'
-  }
-}
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+};

README.md

@@ -179,27 +179,6 @@ module.exports = {
 
   Array containing names of mode in which zipping up will trigger after build.
 
-- **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/).
-
 - **artifactsDir**
 
   - Type: `string`
@@ -270,6 +249,26 @@ There is some basic usage of it in the manifest, as well as in some of the boile
 Since this is largely an out of the box solution provided by the browsers, it is heavily encouraged to utilize it.
 If you do not want to translate your app, simply delete the `public/_locales` directory, and no longer use the `browser.i18n` methods.
 
+## Browser Polyfills
+
+This plugin by default adds in the official [mozilla webextension polyfill](https://github.com/mozilla/webextension-polyfill) to the build.
+The opinion of this plugin is that developers should be building cross platform, and should have reasonable tooling to do so.
+By emphasizing cross platform first, your application will be adhering to the community standards, be ready for distribution to other extension stores, and avoid developing against browser APIs that may have no equivalent.
+The polyfill is a no-op on firefox, and only takes up 20.5kb unminified.
+
+If you still feel strongly to not include the polyfill, then this is what you need to add to your webpack chain to do so.
+
+`vue.config.js`
+
+```js
+module.exports = {
+  chainWebpack(config) {
+    config.plugins.delete('provide-webextension-polyfill');
+    config.module.rules.delete('provide-webextension-polyfill');
+  },
+};
+```
+
 ## Testing
 
 This library is following the standard styling of vue projects, and those are really the only tests to perform.

generator/template/HelloWorld.js.vue

@@ -5,17 +5,14 @@
 </template>
 
 <script>
-<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
-import browser from 'webextension-polyfill'
-<%_ } -%>
 export default {
   name: 'HelloWorld',
   mounted () {
-    <%- options.api %>.runtime.sendMessage({})
+    browser.runtime.sendMessage({})
   },
   computed: {
     defaultText () {
-      return <%- options.api %>.i18n.getMessage('extName')
+      return browser.i18n.getMessage('extName')
     }
   }
 }

generator/template/HelloWorld.ts.vue

@@ -6,17 +6,15 @@
 
 <script lang="ts">
 import Vue from 'vue'
-<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
-import browser from 'webextension-polyfill'
-<%_ } -%>
+
 export default Vue.extend({
   name: 'HelloWorld',
   mounted () {
-    <%- options.api %>.runtime.sendMessage({})
+    browser.runtime.sendMessage({})
   },
   computed: {
     defaultText () {
-      return <%- options.api %>.i18n.getMessage('extName')
+      return browser.i18n.getMessage('extName')
     }
   }
 })

generator/template/background/src/background.js

@@ -1,16 +1,12 @@
-<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
-import browser from 'webextension-polyfill'
-<%_ } -%>
-
 <%_ if (options.popupPage) { -%>
-<%- options.api %>.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+browser.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 <%_ } else { -%>
-<%- options.api %>.browserAction.onClicked.addListener(function (tab) {
+browser.browserAction.onClicked.addListener(function (tab) {
 <%_ } -%>
   console.log('Hello from the background')
   <%_ if (options.components.contentScripts) { -%>
 
-  <%- options.api %>.tabs.executeScript({
+  browser.tabs.executeScript({
     file: 'content-script.js',
   });
   <%_ } -%>

generator/template/background/src/background.ts

@@ -1,16 +1,12 @@
-<%_ if (options.usePolyfill && !options.autoImportPolyfill) { -%>
-import browser from 'webextension-polyfill'
-<%_ } -%>
-
 <%_ if (options.popupPage) { -%>
-<%- options.api %>.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+browser.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 <%_ } else { -%>
-<%- options.api %>.browserAction.onClicked.addListener(function (tab) {
+browser.browserAction.onClicked.addListener(function (tab) {
 <%_ } -%>
   console.log('Hello from the background')
   <%_ if (options.components.contentScripts) { -%>
 
-  <%- options.api %>.tabs.executeScript({
+  browser.tabs.executeScript({
     file: 'content-script.js',
   });
   <%_ } -%>

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

@@ -40,7 +40,7 @@
   },
   "options_ui": {
     "page": "options.html",
-    "<%- options.api %>_style": true
+    "browser_style": true
   <%_ } -%>
   <%_ if (options.components.override) { -%>
   },

generator/template/devtools/src/devtools/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-<%- options.api %>.devtools.panels.create(<%- options.api %>.i18n.getMessage('extName'), '/assets/logo.png', 'devtools.html')
+browser.devtools.panels.create(browser.i18n.getMessage('extName'), '/assets/logo.png', 'devtools.html')
 
 /* eslint-disable no-new */
 new Vue({

generator/template/devtools/src/devtools/main.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-<%- options.api %>.devtools.panels.create(<%- options.api %>.i18n.getMessage('extName'), '/assets/logo.png', 'devtools.html')
+browser.devtools.panels.create(browser.i18n.getMessage('extName'), '/assets/logo.png', 'devtools.html')
 
 /* eslint-disable no-new */
 new Vue({

index.js

@@ -106,21 +106,19 @@ module.exports = (api, options) => {
       ]
     ])
 
-    if (pluginOptions.autoImportPolyfill) {
-      webpackConfig.plugin('provide-webextension-polyfill').use(webpack.ProvidePlugin, [
-        {
-          browser: 'webextension-polyfill'
-        }
-      ])
+    webpackConfig.plugin('provide-webextension-polyfill').use(webpack.ProvidePlugin, [
+      {
+        browser: 'webextension-polyfill'
+      }
+    ])
 
-      // Workaround for https://github.com/mozilla/webextension-polyfill/issues/68
-      webpackConfig.module
-        .rule('provide-webextension-polyfill')
-        .test(require.resolve('webextension-polyfill', { paths: [appRootPath] }))
-        .use('imports')
-        .loader('imports-loader')
-        .options({ browser: '>undefined' })
-    }
+    // Workaround for https://github.com/mozilla/webextension-polyfill/issues/68
+    webpackConfig.module
+      .rule('provide-webextension-polyfill')
+      .test(require.resolve('webextension-polyfill', { paths: [appRootPath] }))
+      .use('imports')
+      .loader('imports-loader')
+      .options({ browser: '>undefined' })
 
     if (isProduction) {
       // Silence warnings of known large files, like images, sourcemaps, and the zip artifact