diff --git a/README.md b/README.md
index 882f96a..b43bb59 100644
--- a/README.md
+++ b/README.md
@@ -171,6 +171,10 @@ chrome-extension-cli my-extension --override-page=history      // Override Histo
 
 Creates a Panel inside developer tools.
 
+#### `chrome-extension-cli my-extension  --no-cross-browser`
+
+The generated project will not be cross-browser compatible by default.
+
 ## Contributing
 
 See the [contribution guide](CONTRIBUTING.md) and join the contributors!
diff --git a/config/webpack.common.js b/config/webpack.common.js
index 52b29a5..b4680f1 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -6,60 +6,86 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const PATHS = require('./paths');
 
-// To re-use webpack configuration across templates,
-// CLI maintains a common webpack configuration file - `webpack.common.js`.
-// Whenever user creates an extension, CLI adds `webpack.common.js` file
-// in template's `config` folder
-const common = {
-  output: {
-    // the build folder to output bundles and assets in.
-    path: PATHS.build,
-    // the filename template for entry chunks
-    filename: '[name].js',
-  },
-  devtool: 'source-map',
-  stats: {
-    all: false,
-    errors: true,
-    builtAt: true,
-  },
-  module: {
-    rules: [
-      // Help webpack in understanding CSS files imported in .js files
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
-      },
-      // Check for images imported in .js files and
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              outputPath: 'images',
-              name: '[name].[ext]',
+module.exports = env => {
+  // To re-use webpack configuration across templates,
+  // CLI maintains a common webpack configuration file - `webpack.common.js`.
+  // Whenever user creates an extension, CLI adds `webpack.common.js` file
+  // in template's `config` folder
+  const crossBrowser = (env.CROSS_BROWSER === 'true');
+  const common = {
+    output: {
+      // the build folder to output bundles and assets in.
+      path: PATHS.build,
+      // the filename template for entry chunks
+      filename: '[name].js',
+    },
+    devtool: 'source-map',
+    stats: {
+      all: false,
+      errors: true,
+      builtAt: true,
+    },
+    module: {
+      rules: [
+        // Help webpack in understanding CSS files imported in .js files
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        },
+        // Check for images imported in .js files and
+        {
+          test: /\.(png|jpe?g|gif)$/i,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                outputPath: 'images',
+                name: '[name].[ext]',
+              },
             },
-          },
-        ],
-      },
+          ],
+        },
+      ],
+    },
+    plugins: [
+      // Print file sizes
+      new SizePlugin(),
+      // Copy static assets from `public` folder to `build` folder, except .html files
+      new CopyWebpackPlugin([
+        {
+          from: '**/*',
+          context: 'public',
+          ignore: ['*.html']
+        },
+      ]),
+      // copy static .html files from `public` folder to `build` folder, and replace the `<%= browser-polyfill %>` variable depending on config
+      new CopyWebpackPlugin([
+        {
+          from: '**/*.html',
+          context: 'public',
+          transform: (content) => {
+            const polyfill = '<script src="browser-polyfill.min.js"></script>';
+            if(crossBrowser) {
+              return content.toString().replace('<%= browser-polyfill %>', polyfill);
+            }
+            return content.toString().replace('<%= browser-polyfill %>', '');
+          }
+        },
+      ]),
+      // Extract CSS into separate files
+      new MiniCssExtractPlugin({
+        filename: '[name].css',
+      }),
     ],
-  },
-  plugins: [
-    // Print file sizes
-    new SizePlugin(),
-    // Copy static assets from `public` folder to `build` folder
-    new CopyWebpackPlugin([
-      {
-        from: '**/*',
-        context: 'public',
-      },
-    ]),
-    // Extract CSS into separate files
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-    }),
-  ],
-};
+  };
 
-module.exports = common;
+  if(crossBrowser) {
+    // Copy browser-polyfill.js for cross browser compability
+    common.plugins.unshift(new CopyWebpackPlugin([
+      {
+        from: 'node_modules/webextension-polyfill/dist/browser-polyfill.min.js'
+      }
+    ]));
+  }
+  return common;
+}
diff --git a/index.js b/index.js
index d349726..22799fb 100755
--- a/index.js
+++ b/index.js
@@ -12,6 +12,7 @@ const packageFile = require('./package.json');
 const { checkAppName, prettifyAppName } = require('./utils/name');
 const generateReadme = require('./scripts/readme');
 const tryGitInit = require('./scripts/git-init');
+const browserPolyfillFilename = 'browser-polyfill.min.js';
 
 let projectName;
 const OVERRIDE_PAGES = ['newtab', 'bookmarks', 'history'];
@@ -28,6 +29,7 @@ const program = new commander.Command(packageFile.name)
     'override default page like New Tab, Bookmarks, or History page'
   )
   .option('--devtools', 'add features to Chrome Developer Tools')
+  .option('--no-cross-browser', `the generated project will not be cross-browser compatible`)
   .on('--help', () => {
     console.log(`    Only ${chalk.green('<project-directory>')} is required.`);
   })
@@ -90,7 +92,7 @@ function logOptionsConflictError() {
   process.exit(1);
 }
 
-function createExtension(name, { overridePage, devtools }) {
+function createExtension(name, { overridePage, devtools, crossBrowser }) {
   const root = path.resolve(name);
   let overridePageName;
 
@@ -126,8 +128,8 @@ function createExtension(name, { overridePage, devtools }) {
 
   appPackage.scripts = {
     watch:
-      'webpack --mode=development --watch --config config/webpack.config.js',
-    build: 'webpack --mode=production --config config/webpack.config.js',
+      `webpack --mode=development --env.CROSS_BROWSER=${crossBrowser} --watch --config config/webpack.config.js`,
+    build: `webpack --mode=production --env.CROSS_BROWSER=${crossBrowser} --config config/webpack.config.js`,
   };
 
   // Create package file in project directory
@@ -148,7 +150,8 @@ function createExtension(name, { overridePage, devtools }) {
     'size-plugin',
     'mini-css-extract-plugin',
     'css-loader',
-    'file-loader'
+    'file-loader',
+    'webextension-polyfill'
   );
 
   console.log('Installing packages. This might take a couple of minutes.');
@@ -176,7 +179,36 @@ function createExtension(name, { overridePage, devtools }) {
     templateName = 'popup';
   }
 
-  fs.copySync(path.resolve(__dirname, 'templates', templateName), root);
+  const files = [];
+  fs.copySync(path.resolve(__dirname, 'templates', templateName), root, {
+    filter: filename => {
+      const endsWithNoCrossbrowser = /\.nocrossbrowser\.js$/.test(filename); // determine if filename ends with '.nocrossbrowser.js'
+      if(!/\.js$/.test(filename)) return true; // copy all files that aren't .js files
+      if(/webpack\.config\.js$/.test(filename)) return true; // explcitly copy webpack.config.js all the time
+      if(!crossBrowser && endsWithNoCrossbrowser) {
+        files.push(filename);
+        return true;
+      } else if(crossBrowser && !endsWithNoCrossbrowser) {
+        return true;
+      } else if(!crossBrowser && !endsWithNoCrossbrowser) {
+        const parsedPath = path.parse(filename);
+        const pathWithCrossbrowser = path.resolve(parsedPath.dir, parsedPath.name, '.nocrossbrowser', parsedPath.ext);
+        return !fs.pathExists(pathWithCrossbrowser);
+      }
+      return false;
+    }
+  });
+
+  // if the webextenstion support is not enabled, we need to copy the template files with .nocrosbbrowser.js ending
+  // but after that, these files are renamed and the .nocrosbbrowser extension is removed
+  if(!crossBrowser) {
+    files.forEach(file => {
+      const { base } = path.parse(file);
+      let srcPath = path.resolve(root, 'src', base);
+      let destPath = path.resolve(root, 'src', base.replace('.nocrossbrowser', ''));
+      fs.moveSync(srcPath, destPath);
+    });
+  }
 
   // Copy common webpack configuration file
   fs.copySync(path.resolve(__dirname, 'config'), path.join(root, 'config'));
@@ -241,6 +273,13 @@ function createExtension(name, { overridePage, devtools }) {
     };
   }
 
+  if(crossBrowser) {
+    appManifest.background.scripts = [browserPolyfillFilename, ...appManifest.background.scripts];
+    if(appManifest.content_scripts) {
+      appManifest.content_scripts.forEach(i => i.js.unshift(browserPolyfillFilename));
+    }
+  }
+
   // Create manifest file in project directory
   fs.writeFileSync(
     path.join(root, 'public', 'manifest.json'),
@@ -284,4 +323,5 @@ function createExtension(name, { overridePage, devtools }) {
 createExtension(projectName, {
   overridePage: program.overridePage,
   devtools: program.devtools,
+  crossBrowser: program.crossBrowser
 });
diff --git a/package-lock.json b/package-lock.json
index 10a84a8..32b9e70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -138,6 +138,12 @@
         "builtins": "^1.0.3"
       }
     },
+    "webextension-polyfill": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.5.0.tgz",
+      "integrity": "sha512-aFrl38x43t1bTboX/paCT8I97+idzX/TY0+fuM52hrIkCpYfROEF9kSn0BXuEIi3J9LTYt2ZZKkhx9NB1qF3nA==",
+      "dev": true
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index cea496e..89b7618 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "validate-npm-package-name": "^3.0.0"
   },
   "devDependencies": {
-    "prettier": "^1.18.2"
+    "prettier": "^1.18.2",
+    "webextension-polyfill": "^0.5.0"
   }
 }
diff --git a/templates/devtools/config/webpack.config.js b/templates/devtools/config/webpack.config.js
index 158346f..ef2d025 100644
--- a/templates/devtools/config/webpack.config.js
+++ b/templates/devtools/config/webpack.config.js
@@ -2,16 +2,16 @@
 
 const merge = require('webpack-merge');
 
-const common = require('./webpack.common.js');
+const getCommonConfig = require('./webpack.common.js');
 const PATHS = require('./paths');
 
-// Merge webpack configuration files
-const config = merge(common, {
-  entry: {
-    devtools: PATHS.src + '/devtools.js',
-    panel: PATHS.src + '/panel.js',
-    background: PATHS.src + '/background.js',
-  },
-});
-
-module.exports = config;
+module.exports = env => {
+  // Merge webpack configuration files
+  return merge(getCommonConfig(env), {
+    entry: {
+      devtools: PATHS.src + '/devtools.js',
+      panel: PATHS.src + '/panel.js',
+      background: PATHS.src + '/background.js',
+    },
+  });
+}
diff --git a/templates/devtools/public/devtools.html b/templates/devtools/public/devtools.html
index 02c9464..aaaaad8 100644
--- a/templates/devtools/public/devtools.html
+++ b/templates/devtools/public/devtools.html
@@ -5,6 +5,7 @@
   <title>Chrome DevTools</title>
 </head>
 <body>
+  <%= browser-polyfill %>
   <script src="devtools.js"></script>
 
   <!--
diff --git a/templates/devtools/public/panel.html b/templates/devtools/public/panel.html
index 6eabc39..44038be 100644
--- a/templates/devtools/public/panel.html
+++ b/templates/devtools/public/panel.html
@@ -17,6 +17,7 @@
     </main>
   </div>
 
+  <%= browser-polyfill %>
   <script src="panel.js"></script>
 
   <!--
diff --git a/templates/devtools/src/background.js b/templates/devtools/src/background.js
index 7db5024..8728d5c 100644
--- a/templates/devtools/src/background.js
+++ b/templates/devtools/src/background.js
@@ -3,17 +3,17 @@
 // With background scripts you can communicate with popup
 // and contentScript files.
 // For more information on background script,
-// See https://developer.chrome.com/extensions/background_pages
+// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts
 
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.type === 'GREETINGS') {
     const message = `Hi Pan, my name is Bac. I am from Background. It's great to hear from you.`;
 
     // Log message coming from the `request` parameter
     console.log(request.payload.message);
     // Send a response message
-    sendResponse({
-      message,
-    });
+    // Send a response message using a Promise
+    // See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage
+    return Promise.resolve({ message });
   }
 });
diff --git a/templates/devtools/src/background.nocrossbrowser.js b/templates/devtools/src/background.nocrossbrowser.js
new file mode 100644
index 0000000..7db5024
--- /dev/null
+++ b/templates/devtools/src/background.nocrossbrowser.js
@@ -0,0 +1,19 @@
+'use strict';
+
+// With background scripts you can communicate with popup
+// and contentScript files.
+// For more information on background script,
+// See https://developer.chrome.com/extensions/background_pages
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.type === 'GREETINGS') {
+    const message = `Hi Pan, my name is Bac. I am from Background. It's great to hear from you.`;
+
+    // Log message coming from the `request` parameter
+    console.log(request.payload.message);
+    // Send a response message
+    sendResponse({
+      message,
+    });
+  }
+});
diff --git a/templates/devtools/src/devtools.js b/templates/devtools/src/devtools.js
index 0dc66f3..eeca04b 100644
--- a/templates/devtools/src/devtools.js
+++ b/templates/devtools/src/devtools.js
@@ -2,9 +2,9 @@
 
 // A DevTools extension adds functionality to the Chrome DevTools.
 // For more information on DevTools,
-// See https://developer.chrome.com/extensions/devtools
+// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels
 
 // Create a panel named `My Panel`
-chrome.devtools.panels.create('My Panel', '', 'panel.html', panel => {
+browser.devtools.panels.create('My Panel', '', 'panel.html').then( panel => {
   console.log('Panel was successfully created!');
 });
diff --git a/templates/devtools/src/devtools.nocrossbrowser.js b/templates/devtools/src/devtools.nocrossbrowser.js
new file mode 100644
index 0000000..0dc66f3
--- /dev/null
+++ b/templates/devtools/src/devtools.nocrossbrowser.js
@@ -0,0 +1,10 @@
+'use strict';
+
+// A DevTools extension adds functionality to the Chrome DevTools.
+// For more information on DevTools,
+// See https://developer.chrome.com/extensions/devtools
+
+// Create a panel named `My Panel`
+chrome.devtools.panels.create('My Panel', '', 'panel.html', panel => {
+  console.log('Panel was successfully created!');
+});
diff --git a/templates/devtools/src/panel.js b/templates/devtools/src/panel.js
index 50e5be2..10d4992 100644
--- a/templates/devtools/src/panel.js
+++ b/templates/devtools/src/panel.js
@@ -1,18 +1,17 @@
 'use strict';
 
 // For more information on Panels API,
-// See https://developer.chrome.com/extensions/devtools_panels
+// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels
 
 // We will create a panel to detect
 // whether current page is using React or not.
 
 import './panel.css';
 
-chrome.devtools.inspectedWindow.eval(
-  'window.React.version',
-  (result, isException) => {
+browser.devtools.inspectedWindow.eval(
+  'window.React.version').then(([result, error]) => {
     let message = '';
-    if (isException) {
+    if (error) {
       message = 'This page doesn’t appear to be using React.';
     } else {
       message = `The page is using React v${result} ✅`;
@@ -23,14 +22,13 @@ chrome.devtools.inspectedWindow.eval(
 );
 
 // Communicate with background file by sending a message
-chrome.runtime.sendMessage(
+browser.runtime.sendMessage(
   {
     type: 'GREETINGS',
     payload: {
       message: 'Hello, my name is Pan. I am from Panel.',
     },
-  },
-  response => {
+  }).then(response => {
     console.log(response.message);
   }
 );
diff --git a/templates/devtools/src/panel.nocrossbrowser.js b/templates/devtools/src/panel.nocrossbrowser.js
new file mode 100644
index 0000000..50e5be2
--- /dev/null
+++ b/templates/devtools/src/panel.nocrossbrowser.js
@@ -0,0 +1,36 @@
+'use strict';
+
+// For more information on Panels API,
+// See https://developer.chrome.com/extensions/devtools_panels
+
+// We will create a panel to detect
+// whether current page is using React or not.
+
+import './panel.css';
+
+chrome.devtools.inspectedWindow.eval(
+  'window.React.version',
+  (result, isException) => {
+    let message = '';
+    if (isException) {
+      message = 'This page doesn’t appear to be using React.';
+    } else {
+      message = `The page is using React v${result} ✅`;
+    }
+
+    document.getElementById('message').innerHTML = message;
+  }
+);
+
+// Communicate with background file by sending a message
+chrome.runtime.sendMessage(
+  {
+    type: 'GREETINGS',
+    payload: {
+      message: 'Hello, my name is Pan. I am from Panel.',
+    },
+  },
+  response => {
+    console.log(response.message);
+  }
+);
diff --git a/templates/override-page/config/webpack.config.js b/templates/override-page/config/webpack.config.js
index 1780d68..3389ac1 100644
--- a/templates/override-page/config/webpack.config.js
+++ b/templates/override-page/config/webpack.config.js
@@ -2,15 +2,15 @@
 
 const merge = require('webpack-merge');
 
-const common = require('./webpack.common.js');
+const getCommonConfig = require('./webpack.common.js');
 const PATHS = require('./paths');
 
-// Merge webpack configuration files
-const config = merge(common, {
-  entry: {
-    app: PATHS.src + '/app.js',
-    background: PATHS.src + '/background.js',
-  },
-});
-
-module.exports = config;
+module.exports = env => {
+  // Merge webpack configuration files
+  return merge(getCommonConfig(env), {
+    entry: {
+      app: PATHS.src + '/app.js',
+      background: PATHS.src + '/background.js',
+    },
+  });
+}
diff --git a/templates/override-page/public/index.html b/templates/override-page/public/index.html
index 39a1891..21628f6 100644
--- a/templates/override-page/public/index.html
+++ b/templates/override-page/public/index.html
@@ -15,6 +15,7 @@
     <p class="title">Chrome Extension is Ready!</p>
     <p class="subtitle">Start by updating <code>index.html</code></p>
   </div>
+  <%= browser-polyfill %>
   <script src="app.js"></script>
 
   <!--
diff --git a/templates/override-page/src/app.js b/templates/override-page/src/app.js
index e0540f3..9dcd20d 100644
--- a/templates/override-page/src/app.js
+++ b/templates/override-page/src/app.js
@@ -26,14 +26,13 @@ import './app.css';
   setupDashboard();
 
   // Communicate with background file by sending a message
-  chrome.runtime.sendMessage(
+  browser.runtime.sendMessage(
     {
       type: 'GREETINGS',
       payload: {
         message: 'Hello, my name is Ove. I am from Override app.',
       },
-    },
-    response => {
+    }).then(response => {
       console.log(response.message);
     }
   );
diff --git a/templates/override-page/src/app.nocrossbrowser.js b/templates/override-page/src/app.nocrossbrowser.js
new file mode 100644
index 0000000..e0540f3
--- /dev/null
+++ b/templates/override-page/src/app.nocrossbrowser.js
@@ -0,0 +1,40 @@
+'use strict';
+
+import getCurrentTime from './clock';
+import getDay from './day';
+import './app.css';
+
+(function() {
+  function setTime() {
+    const time = getCurrentTime();
+
+    document.getElementById('clock').innerHTML = time;
+  }
+
+  function setDay() {
+    const day = getDay();
+
+    document.getElementById('day').innerHTML = day;
+  }
+
+  function setupDashboard() {
+    setDay();
+    setTime();
+    setInterval(setTime, 1000);
+  }
+
+  setupDashboard();
+
+  // Communicate with background file by sending a message
+  chrome.runtime.sendMessage(
+    {
+      type: 'GREETINGS',
+      payload: {
+        message: 'Hello, my name is Ove. I am from Override app.',
+      },
+    },
+    response => {
+      console.log(response.message);
+    }
+  );
+})();
diff --git a/templates/override-page/src/background.js b/templates/override-page/src/background.js
index 7425de7..32c31f6 100644
--- a/templates/override-page/src/background.js
+++ b/templates/override-page/src/background.js
@@ -2,17 +2,16 @@
 
 // With background scripts you can communicate extension files.
 // For more information on background script,
-// See https://developer.chrome.com/extensions/background_pages
+// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts
 
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.type === 'GREETINGS') {
     const message = `Hi Ove, my name is Bac. I am from Background. It's great to hear from you.`;
 
     // Log message coming from the `request` parameter
     console.log(request.payload.message);
-    // Send a response message
-    sendResponse({
-      message,
-    });
+    // Send a response message using a Promise
+    // See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage
+    return Promise.resolve({ message });
   }
 });
diff --git a/templates/override-page/src/background.nocrossbrowser.js b/templates/override-page/src/background.nocrossbrowser.js
new file mode 100644
index 0000000..7425de7
--- /dev/null
+++ b/templates/override-page/src/background.nocrossbrowser.js
@@ -0,0 +1,18 @@
+'use strict';
+
+// With background scripts you can communicate extension files.
+// For more information on background script,
+// See https://developer.chrome.com/extensions/background_pages
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.type === 'GREETINGS') {
+    const message = `Hi Ove, my name is Bac. I am from Background. It's great to hear from you.`;
+
+    // Log message coming from the `request` parameter
+    console.log(request.payload.message);
+    // Send a response message
+    sendResponse({
+      message,
+    });
+  }
+});
diff --git a/templates/override-page/src/clock.nocrossbrowser.js b/templates/override-page/src/clock.nocrossbrowser.js
new file mode 100644
index 0000000..eaac080
--- /dev/null
+++ b/templates/override-page/src/clock.nocrossbrowser.js
@@ -0,0 +1,16 @@
+'use strict';
+
+function getCurrentTime() {
+  const date = new Date();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  let time = '';
+  time += hours;
+  time += ':';
+  time += minutes < 10 ? '0' + minutes : minutes;
+
+  return time;
+}
+
+export default getCurrentTime;
diff --git a/templates/override-page/src/day.nocrossbrowser.js b/templates/override-page/src/day.nocrossbrowser.js
new file mode 100644
index 0000000..20031cc
--- /dev/null
+++ b/templates/override-page/src/day.nocrossbrowser.js
@@ -0,0 +1,17 @@
+const DAYS = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
+
+function getDay() {
+  const day = new Date().getDay();
+
+  return DAYS[day];
+}
+
+export default getDay;
diff --git a/templates/popup/config/webpack.config.js b/templates/popup/config/webpack.config.js
index 1bee694..93c0793 100644
--- a/templates/popup/config/webpack.config.js
+++ b/templates/popup/config/webpack.config.js
@@ -2,16 +2,16 @@
 
 const merge = require('webpack-merge');
 
-const common = require('./webpack.common.js');
+const getCommonConfig = require('./webpack.common.js');
 const PATHS = require('./paths');
 
-// Merge webpack configuration files
-const config = merge(common, {
-  entry: {
-    popup: PATHS.src + '/popup.js',
-    contentScript: PATHS.src + '/contentScript.js',
-    background: PATHS.src + '/background.js',
-  },
-});
-
-module.exports = config;
+module.exports = env => {
+  // Merge webpack configuration files
+  return merge(getCommonConfig(env), {
+    entry: {
+      popup: PATHS.src + '/popup.js',
+      contentScript: PATHS.src + '/contentScript.js',
+      background: PATHS.src + '/background.js',
+    },
+  });
+}
diff --git a/templates/popup/public/popup.html b/templates/popup/public/popup.html
index 0aa0a89..e980601 100644
--- a/templates/popup/public/popup.html
+++ b/templates/popup/public/popup.html
@@ -20,6 +20,7 @@
     <p class="subtitle">Start by updating <code>popup.html</code></p>
   </div>
 
+  <%= browser-polyfill %>
   <script src="popup.js"></script>
 
   <!--
diff --git a/templates/popup/src/background.js b/templates/popup/src/background.js
index ac2e505..c196f0e 100644
--- a/templates/popup/src/background.js
+++ b/templates/popup/src/background.js
@@ -3,9 +3,9 @@
 // With background scripts you can communicate with popup
 // and contentScript files.
 // For more information on background script,
-// See https://developer.chrome.com/extensions/background_pages
+// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts
 
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((request, sender) => {
   if (request.type === 'GREETINGS') {
     const message = `Hi ${
       sender.tab ? 'Con' : 'Pop'
@@ -13,9 +13,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
     // Log message coming from the `request` parameter
     console.log(request.payload.message);
-    // Send a response message
-    sendResponse({
-      message,
-    });
+    // Send a response message using a Promise
+    // See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage
+    return Promise.resolve({ message });
   }
 });
diff --git a/templates/popup/src/background.nocrossbrowser.js b/templates/popup/src/background.nocrossbrowser.js
new file mode 100644
index 0000000..ac2e505
--- /dev/null
+++ b/templates/popup/src/background.nocrossbrowser.js
@@ -0,0 +1,21 @@
+'use strict';
+
+// With background scripts you can communicate with popup
+// and contentScript files.
+// For more information on background script,
+// See https://developer.chrome.com/extensions/background_pages
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.type === 'GREETINGS') {
+    const message = `Hi ${
+      sender.tab ? 'Con' : 'Pop'
+    }, my name is Bac. I am from Background. It's great to hear from you.`;
+
+    // Log message coming from the `request` parameter
+    console.log(request.payload.message);
+    // Send a response message
+    sendResponse({
+      message,
+    });
+  }
+});
diff --git a/templates/popup/src/contentScript.js b/templates/popup/src/contentScript.js
index 53087c5..6a3a664 100644
--- a/templates/popup/src/contentScript.js
+++ b/templates/popup/src/contentScript.js
@@ -9,7 +9,7 @@
 // under `content_scripts` property
 
 // For more information on Content Scripts,
-// See https://developer.chrome.com/extensions/content_scripts
+// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts
 
 // Log `title` of current active web page
 const pageTitle = document.head.getElementsByTagName('title')[0].innerHTML;
@@ -18,26 +18,25 @@ console.log(
 );
 
 // Communicate with background file by sending a message
-chrome.runtime.sendMessage(
+browser.runtime.sendMessage(
   {
     type: 'GREETINGS',
     payload: {
       message: 'Hello, my name is Con. I am from ContentScript.',
     },
-  },
-  response => {
+  }).then(response => {
     console.log(response.message);
   }
 );
 
 // Listen for message
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((request, sender) => {
   if (request.type === 'COUNT') {
     console.log(`Current count is ${request.payload.count}`);
   }
 
   // Send an empty response
   // See https://github.com/mozilla/webextension-polyfill/issues/130#issuecomment-531531890
-  sendResponse({});
-  return true;
+  // See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage
+  return Promise.resolve({});
 });
diff --git a/templates/popup/src/contentScript.nocrossbrowser.js b/templates/popup/src/contentScript.nocrossbrowser.js
new file mode 100644
index 0000000..53087c5
--- /dev/null
+++ b/templates/popup/src/contentScript.nocrossbrowser.js
@@ -0,0 +1,43 @@
+'use strict';
+
+// Content script file will run in the context of web page.
+// With content script you can manipulate the web pages using
+// Document Object Model (DOM).
+// You can also pass information to the parent extension.
+
+// We execute this script by making an entry in manifest.json file
+// under `content_scripts` property
+
+// For more information on Content Scripts,
+// See https://developer.chrome.com/extensions/content_scripts
+
+// Log `title` of current active web page
+const pageTitle = document.head.getElementsByTagName('title')[0].innerHTML;
+console.log(
+  `Page title is: '${pageTitle}' - evaluated by Chrome extension's 'contentScript.js' file`
+);
+
+// Communicate with background file by sending a message
+chrome.runtime.sendMessage(
+  {
+    type: 'GREETINGS',
+    payload: {
+      message: 'Hello, my name is Con. I am from ContentScript.',
+    },
+  },
+  response => {
+    console.log(response.message);
+  }
+);
+
+// Listen for message
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.type === 'COUNT') {
+    console.log(`Current count is ${request.payload.count}`);
+  }
+
+  // Send an empty response
+  // See https://github.com/mozilla/webextension-polyfill/issues/130#issuecomment-531531890
+  sendResponse({});
+  return true;
+});
diff --git a/templates/popup/src/popup.js b/templates/popup/src/popup.js
index 10a6325..ebf0b92 100644
--- a/templates/popup/src/popup.js
+++ b/templates/popup/src/popup.js
@@ -5,26 +5,22 @@ import './popup.css';
 (function() {
   // We will make use of Storage API to get and store `count` value
   // More information on Storage API can we found at
-  // https://developer.chrome.com/extensions/storage
+  // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage
 
   // To get storage access, we have to mention it in `permissions` property of manifest.json file
   // More information on Permissions can we found at
-  // https://developer.chrome.com/extensions/declare_permissions
+  // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions
   const counterStorage = {
     get: cb => {
-      chrome.storage.sync.get(['count'], result => {
+      browser.storage.sync.get(['count']).then(result => {
         cb(result.count);
       });
     },
     set: (value, cb) => {
-      chrome.storage.sync.set(
+      browser.storage.sync.set(
         {
           count: value,
-        },
-        () => {
-          cb();
-        }
-      );
+        }).then(cb);
     },
   };
 
@@ -61,21 +57,20 @@ import './popup.css';
 
         // Communicate with content script of
         // active tab by sending a message
-        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+        browser.tabs.query({ active: true, currentWindow: true }).then(tabs => {
           const tab = tabs[0];
 
-          chrome.tabs.sendMessage(
+          browser.tabs.sendMessage(
             tab.id,
             {
               type: 'COUNT',
               payload: {
                 count: newCount,
               },
-            },
-            response => {
+            }).then(response => {
               console.log('Current count value passed to contentScript file');
             }
-          );
+          ).catch(console.error);
         });
       });
     });
@@ -98,14 +93,13 @@ import './popup.css';
   document.addEventListener('DOMContentLoaded', restoreCounter);
 
   // Communicate with background file by sending a message
-  chrome.runtime.sendMessage(
+  browser.runtime.sendMessage(
     {
       type: 'GREETINGS',
       payload: {
         message: 'Hello, my name is Pop. I am from Popup.',
       },
-    },
-    response => {
+    }).then(response => {
       console.log(response.message);
     }
   );
diff --git a/templates/popup/src/popup.nocrossbrowser.js b/templates/popup/src/popup.nocrossbrowser.js
new file mode 100644
index 0000000..10a6325
--- /dev/null
+++ b/templates/popup/src/popup.nocrossbrowser.js
@@ -0,0 +1,112 @@
+'use strict';
+
+import './popup.css';
+
+(function() {
+  // We will make use of Storage API to get and store `count` value
+  // More information on Storage API can we found at
+  // https://developer.chrome.com/extensions/storage
+
+  // To get storage access, we have to mention it in `permissions` property of manifest.json file
+  // More information on Permissions can we found at
+  // https://developer.chrome.com/extensions/declare_permissions
+  const counterStorage = {
+    get: cb => {
+      chrome.storage.sync.get(['count'], result => {
+        cb(result.count);
+      });
+    },
+    set: (value, cb) => {
+      chrome.storage.sync.set(
+        {
+          count: value,
+        },
+        () => {
+          cb();
+        }
+      );
+    },
+  };
+
+  function setupCounter(initialValue = 0) {
+    document.getElementById('counter').innerHTML = initialValue;
+
+    document.getElementById('incrementBtn').addEventListener('click', () => {
+      updateCounter({
+        type: 'INCREMENT',
+      });
+    });
+
+    document.getElementById('decrementBtn').addEventListener('click', () => {
+      updateCounter({
+        type: 'DECREMENT',
+      });
+    });
+  }
+
+  function updateCounter({ type }) {
+    counterStorage.get(count => {
+      let newCount;
+
+      if (type === 'INCREMENT') {
+        newCount = count + 1;
+      } else if (type === 'DECREMENT') {
+        newCount = count - 1;
+      } else {
+        newCount = count;
+      }
+
+      counterStorage.set(newCount, () => {
+        document.getElementById('counter').innerHTML = newCount;
+
+        // Communicate with content script of
+        // active tab by sending a message
+        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+          const tab = tabs[0];
+
+          chrome.tabs.sendMessage(
+            tab.id,
+            {
+              type: 'COUNT',
+              payload: {
+                count: newCount,
+              },
+            },
+            response => {
+              console.log('Current count value passed to contentScript file');
+            }
+          );
+        });
+      });
+    });
+  }
+
+  function restoreCounter() {
+    // Restore count value
+    counterStorage.get(count => {
+      if (typeof count === 'undefined') {
+        // Set counter value as 0
+        counterStorage.set(0, () => {
+          setupCounter(0);
+        });
+      } else {
+        setupCounter(count);
+      }
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', restoreCounter);
+
+  // Communicate with background file by sending a message
+  chrome.runtime.sendMessage(
+    {
+      type: 'GREETINGS',
+      payload: {
+        message: 'Hello, my name is Pop. I am from Popup.',
+      },
+    },
+    response => {
+      console.log(response.message);
+    }
+  );
+})();