perf: use global browser instead of webextension-polyfill

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';

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,

src/pages/app/App.tsx

@@ -3,13 +3,13 @@ import {
   BrowserContextProvider,
   TranslationContextProvider,
 } from '@/pages/shared/lib/context';
-import { MessageContextProvider, WaitForStateLoad } from '@/app/lib/context';
-import browser from 'webextension-polyfill';
 import {
   createHashRouter,
   RouterProvider,
   type RouteObject,
 } from 'react-router-dom';
+import { MessageContextProvider, WaitForStateLoad } from '@/app/lib/context';
+import browser from '@/shared/browser';
 
 export const ROUTES = {
   DEFAULT: '/',

src/pages/popup/Popup.tsx

@@ -6,7 +6,7 @@ import {
 import { MessageContextProvider, WaitForStateLoad } from '@/popup/lib/context';
 import { LazyMotion, domAnimation } from 'framer-motion';
 import React from 'react';
-import browser from 'webextension-polyfill';
+import browser from '@/shared/browser';
 import { ProtectedRoute } from '@/popup/components/ProtectedRoute';
 import {
   type RouteObject,

src/pages/progress-connect/index.tsx

@@ -2,7 +2,7 @@ import './index.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import browser from 'webextension-polyfill';
+import browser from '@/shared/browser';
 
 import {
   BrowserContextProvider,

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';