Add support for browsers that use the WebExtension API

Author: siphomateke

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

@@ -1,12 +1,12 @@
 import store from './store'
 
 <%_ 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

@@ -8,7 +8,7 @@ export default {
     return {}
   },
   mounted () {
-    chrome.runtime.sendMessage({});
+    <%- options.api %>.runtime.sendMessage({})
   }
 }
 </script>

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

@@ -8,7 +8,7 @@ export default {
     return {}
   },
   mounted () {
-    chrome.runtime.sendMessage({});
+    <%- options.api %>.runtime.sendMessage({});
   }
 }
 </script>

prompts.js

@@ -41,5 +41,21 @@ 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'
+      }
+    ]
   }
 ]