diff --git a/src/content/container.ts b/src/content/container.ts
index de428212a..3d12ab337 100644
--- a/src/content/container.ts
+++ b/src/content/container.ts
@@ -4,7 +4,7 @@ import {
   createContainer,
   InjectionMode,
 } from 'awilix/browser';
-import browser, { type Browser } from 'webextension-polyfill';
+import browser, { type Browser } from '@/shared/browser';
 import { createLogger, type Logger } from '@/shared/logger';
 import { ContentScript } from './services/contentScript';
 import { MonetizationLinkManager } from './services/monetizationLinkManager';
diff --git a/src/content/keyAutoAdd/lib/keyAutoAdd.ts b/src/content/keyAutoAdd/lib/keyAutoAdd.ts
index e65d09974..7fb2e689c 100644
--- a/src/content/keyAutoAdd/lib/keyAutoAdd.ts
+++ b/src/content/keyAutoAdd/lib/keyAutoAdd.ts
@@ -1,5 +1,5 @@
 // cSpell:ignore allowtransparency
-import browser, { type Runtime } from 'webextension-polyfill';
+import browser, { type Runtime } from '@/shared/browser';
 import { CONNECTION_NAME } from '@/background/services/keyAutoAdd';
 import {
   errorWithKeyToJSON,
diff --git a/src/pages/app/App.tsx b/src/pages/app/App.tsx
index 8c7b2e254..08d6490da 100644
--- a/src/pages/app/App.tsx
+++ b/src/pages/app/App.tsx
@@ -3,8 +3,8 @@ import {
   BrowserContextProvider,
   TranslationContextProvider,
 } from '@/pages/shared/lib/context';
+import browser from '@/shared/browser';
 import { MessageContextProvider, WaitForStateLoad } from '@/app/lib/context';
-import browser from 'webextension-polyfill';
 import { Route, Router, Switch } from 'wouter';
 import { useHashLocation } from 'wouter/use-hash-location';
 import * as PAGES from './pages/index';
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index 767c25b11..b266f6db3 100644
--- a/src/pages/popup/Popup.tsx
+++ b/src/pages/popup/Popup.tsx
@@ -5,9 +5,9 @@ import {
   TranslationContextProvider,
 } from '@/pages/shared/lib/context';
 import { MessageContextProvider, WaitForStateLoad } from '@/popup/lib/context';
+import browser from '@/shared/browser';
 import { Route, Router, Switch } from 'wouter';
 import { useHashLocation } from 'wouter/use-hash-location';
-import browser from 'webextension-polyfill';
 import * as PAGES from './pages/index';
 
 export const ROUTES_PATH = {
diff --git a/src/pages/progress-connect/index.tsx b/src/pages/progress-connect/index.tsx
index cb91e3741..7d52ca70c 100755
--- a/src/pages/progress-connect/index.tsx
+++ b/src/pages/progress-connect/index.tsx
@@ -2,7 +2,7 @@ import '@/pages/shared/style.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import browser from 'webextension-polyfill';
+import browser from '@/shared/browser';
 
 import {
   BrowserContextProvider,
diff --git a/src/shared/browser.ts b/src/shared/browser.ts
new file mode 100644
index 000000000..53e133dd2
--- /dev/null
+++ b/src/shared/browser.ts
@@ -0,0 +1,25 @@
+import type { Browser } from 'webextension-polyfill';
+
+/**
+ * This is almost same as browser from webextension-polyfill, but without the
+ * wrapper functions to support async message handler (i.e. we need to use
+ * `sendResponse` callback). See https://stackoverflow.com/questions/44056271
+ *
+ * As the polyfill is helping us with that only, if we don't need async message
+ * handler, use this instead of `browser` from `webextension-polyfill`.
+ *
+ * It'll reduce content script size by around 10KB, more meaningful when there's
+ * multiple content scripts per page. So better for performance overall.
+ */
+// @ts-expect-error we know it may not exist, hence the test
+const globalBrowser = globalThis.browser?.runtime?.id
+  ? // @ts-expect-error we just verified above it exists
+    (globalThis.browser as Browser)
+  : // @ts-expect-error `chrome` API is same as Browser, just different type sources
+    (globalThis.chrome as Browser);
+
+export { globalBrowser as browser };
+
+export default globalBrowser;
+
+export type { Browser, Runtime } from 'webextension-polyfill';