diff --git a/extension/.flowconfig b/extension/.flowconfig
index 4995da2..ccd1f48 100644
--- a/extension/.flowconfig
+++ b/extension/.flowconfig
@@ -2,10 +2,10 @@
 .*/node_modules/.*
 
 [include]
+src/
 
 [libs]
 node_modules/flow-interfaces-chrome/interfaces/
-src/js/browser_types.js
 
 [lints]
 
diff --git a/extension/src/js/browser_types.js b/extension/flow-typed/webextension-polyfill.js
similarity index 90%
rename from extension/src/js/browser_types.js
rename to extension/flow-typed/webextension-polyfill.js
index f343edb..3bd7ad2 100644
--- a/extension/src/js/browser_types.js
+++ b/extension/flow-typed/webextension-polyfill.js
@@ -91,3 +91,11 @@ declare var browser: {
   tabs: browser$tabs,
   scripting: browser$scripting,
 }
+
+
+declare module "webextension-polyfill" {
+  declare var storage: browser$storage;
+  declare var permissions: browser$permissions;
+  declare var tabs: browser$tabs;
+  declare var scripting: browser$scripting;
+}
diff --git a/extension/src/js/background.js b/extension/src/js/background.js
index 16740e2..26f16bc 100644
--- a/extension/src/js/background.js
+++ b/extension/src/js/background.js
@@ -1,5 +1,4 @@
 /* @flow */
-// TODO do I really need to annotate all files with @flow??
 
 
 // hmm this works if you declare type: module in manifest
@@ -7,16 +6,19 @@
 // I assume this is only processed with webpack
 // import * as browser from "./browser-polyfill"
 
-const manifestVersion = chrome.runtime.getManifest().manifest_version
-if (manifestVersion == 3) {
-    // for v3 it's provided via manifest
-    try {
-        /* eslint-disable no-undef */
-        importScripts('./browser-polyfill.js')
-    } catch (e) {
-        console.error(e)
-    }
-}
+// this works with v3 if you need to
+// const manifestVersion = chrome.runtime.getManifest().manifest_version
+// if (manifestVersion == 3) {
+//     // for v3 it's provided via manifest
+//     try {
+//         /* eslint-disable no-undef */
+//         importScripts('./browser-polyfill.js')
+//     } catch (e) {
+//         console.error(e)
+//     }
+// }
+
+import * as browser from "webextension-polyfill"
 
 
 import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common'
diff --git a/extension/src/js/options.js b/extension/src/js/options.js
index caa8b02..ced9f0d 100644
--- a/extension/src/js/options.js
+++ b/extension/src/js/options.js
@@ -1,4 +1,6 @@
 /* @flow */
+import browser from "webextension-polyfill"
+
 
 export type Options = {
     endpoint: string;
diff --git a/extension/src/js/permissions.js b/extension/src/js/permissions.js
index cbdf0c6..12956b8 100644
--- a/extension/src/js/permissions.js
+++ b/extension/src/js/permissions.js
@@ -1,4 +1,6 @@
 /* @flow */
+import browser from "webextension-polyfill"
+
 
 function urlForPermissionsCheck(url: string): string {
     var u = new URL(url);
diff --git a/extension/src/options.html b/extension/src/options.html
index 3c28a6e..c4b0b52 100644
--- a/extension/src/options.html
+++ b/extension/src/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <script type="text/javascript" src="browser-polyfill.js"/></script>
+  <script type="text/javascript" src="webextension-polyfill.js"></script>
   <script type="text/javascript" src="options_page.js"/></script>
   <style>
    input:invalid {
diff --git a/extension/src/popup.html b/extension/src/popup.html
index 5f6b252..37a77ec 100644
--- a/extension/src/popup.html
+++ b/extension/src/popup.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <script type="text/javascript" src="browser-polyfill.js"></script>
+  <script type="text/javascript" src="webextension-polyfill.js"></script>
   <script type="text/javascript" src="popup.js"></script>
 </head>
 <body>
diff --git a/extension/webpack.config.js b/extension/webpack.config.js
index 1168880..e2ac05a 100644
--- a/extension/webpack.config.js
+++ b/extension/webpack.config.js
@@ -118,9 +118,10 @@ const manifestExtra = {
     manifest_version: v3 ? 3 : 2,
     background: (v3 ? {
       service_worker: 'background.js',
+      type: 'module',
     } : {
       scripts: [
-        'browser-polyfill.js',
+        'webextension-polyfill.js',
         'background.js',
       ],
       persistent: false,
@@ -165,7 +166,28 @@ const options = {
   optimization: {
     // https://webpack.js.org/configuration/optimization
     // don't think minimize worth it for such a tiny extension
-    minimize: false
+    minimize: false,
+
+    // split chunks is so vendors split out into separate js files
+    // to prevent bloating individual source files
+    // seems that at the moment we need to manually load the chunks in the corresponding
+    // html files or manifest
+    // split chunks doc recommend using webpack html plugin??
+    splitChunks: {
+      // seems necessary, otherwise doesn't split out polyfill??
+      chunks: 'all',
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name(module) {
+            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+            return packageName
+          },
+          // create chunk regardless size etc
+          enforce: true,
+        },
+      },
+    },
   },
   module: {
     rules: [
@@ -194,7 +216,6 @@ const options = {
       patterns: [
         { context: 'src', from: '**/*.html' },
         { context: 'src', from: '**/*.png'  },
-        { from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js'},
       ]
     }),
     new WebpackExtensionManifestPlugin({
