using my boilerplate yuh

src/background/util/hotReloadTab.ts

@@ -0,0 +1,39 @@
+import { devStore } from 'src/shared/storage/devStore';
+
+/**
+ * A list of websites that we don't want to reload when the extension reloads (becuase it'd be hella annoying lmao)
+ */
+const HOT_RELOADING_WHITELIST = [
+    'youtube.com',
+    'twitch.tv',
+    'github.dev',
+    'figma.com',
+    'netflix.com',
+    'disneyplus.com',
+    'hbomax.com',
+    'spotify.com',
+    'localhost:6006',
+    'docs.google.com',
+    'reddit.com',
+    'gmail.com',
+    'photopea.com',
+];
+
+/**
+ * Reloads the tab that was open when the extension was reloaded
+ * @returns a promise that resolves when the tab is reloaded
+ */
+export async function hotReloadTab(): Promise<void> {
+    const { getIsTabReloading, getReloadTabId } = devStore;
+
+    const [isTabReloading, reloadTabId] = await Promise.all([getIsTabReloading(), getReloadTabId()]);
+
+    if (!isTabReloading || !reloadTabId) return;
+
+    chrome.tabs.get(reloadTabId, tab => {
+        if (!tab?.id) return;
+        if (!HOT_RELOADING_WHITELIST.find(url => tab.url?.includes(url))) {
+            chrome.tabs.reload(tab.id);
+        }
+    });
+}

src/background/util/openDebugTab.ts

@@ -0,0 +1,24 @@
+import { devStore } from 'src/shared/storage/devStore';
+
+/**
+ * Open the debug tab as the first tab
+ */
+export async function openDebugTab() {
+    if (process.env.NODE_ENV === 'development') {
+        const debugTabId = await devStore.getDebugTabId();
+
+        const isAlreadyOpen = await (await chrome.tabs.query({})).some(tab => tab.id === debugTabId);
+        if (isAlreadyOpen) return;
+
+        const wasVisible = await devStore.getWasDebugTabVisible();
+
+        const tab = await chrome.tabs.create({
+            url: chrome.runtime.getURL('debug.html'),
+            active: wasVisible,
+            pinned: true,
+            index: 0,
+        });
+
+        await devStore.setDebugTabId(tab.id);
+    }
+}