From db5cbb6768b899e383cb36233bd70b45c2b0271a Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:54:33 +0530
Subject: [PATCH 1/2] perf: use global browser instead of webextension-polyfill

---
 src/content/container.ts                 |  2 +-
 src/content/keyAutoAdd/lib/keyAutoAdd.ts |  2 +-
 src/pages/app/App.tsx                    |  2 +-
 src/pages/popup/Popup.tsx                |  2 +-
 src/pages/progress-connect/index.tsx     |  2 +-
 src/shared/browser.ts                    | 25 ++++++++++++++++++++++++
 6 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/browser.ts

diff --git a/src/content/container.ts b/src/content/container.ts
index b0ddab0fa..253776d47 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 cfb8a457d..6a32a1e31 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 aa0df56a3..9a1b49d56 100644
--- a/src/pages/app/App.tsx
+++ b/src/pages/app/App.tsx
@@ -3,12 +3,12 @@ import {
   BrowserContextProvider,
   TranslationContextProvider,
 } from '@/pages/shared/lib/context';
-import browser from 'webextension-polyfill';
 import {
   createHashRouter,
   RouterProvider,
   type RouteObject,
 } from 'react-router-dom';
+import browser from '@/shared/browser';
 
 export const ROUTES = {
   DEFAULT: '/',
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index 93a72ab9c..b97bc4c2b 100644
--- a/src/pages/popup/Popup.tsx
+++ b/src/pages/popup/Popup.tsx
@@ -6,7 +6,7 @@ import {
 import { MessageContextProvider, WaitForStateLoad } from './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,
diff --git a/src/pages/progress-connect/index.tsx b/src/pages/progress-connect/index.tsx
index a7d6afb52..e86a90102 100755
--- a/src/pages/progress-connect/index.tsx
+++ b/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,
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';

From 9bf51da6eba2780526b0b9cfca6ac88d3043e290 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Thu, 10 Apr 2025 13:44:15 +0530
Subject: [PATCH 2/2] Update App.tsx

---
 src/pages/app/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/app/App.tsx b/src/pages/app/App.tsx
index 71c279685..08d6490da 100644
--- a/src/pages/app/App.tsx
+++ b/src/pages/app/App.tsx
@@ -5,7 +5,6 @@ import {
 } 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';