feat: extension v1.0.8 (#322)

Author: pivanov

BROWSER_EXTENSION_GUIDE.md

@@ -5,23 +5,23 @@
 
 ## Chrome
 
-1. Download the [`chrome-extension-v1.0.7.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`chrome-extension-v1.0.8.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
 2. Unzip the file.
 3. Open Chrome and navigate to `chrome://extensions/`.
 4. Enable "Developer mode" if it is not already enabled.
 5. Click "Load unpacked" and select the unzipped folder (or drag the folder into the page).
 
 ## Firefox
 
-1. Download the [`firefox-extension-v1.0.7.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`firefox-extension-v1.0.8.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
 2. Unzip the file.
 3. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`.
 4. Click "Load Temporary Add-on..."
 5. Select `manifest.json` from the unzipped folder
 
 ## Brave
 
-1. Download the [`brave-extension-v1.0.7.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`brave-extension-v1.0.8.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
 2. Unzip the file.
 3. Open Brave and navigate to `brave://extensions`.
 4. Click "Load unpacked" and select the unzipped folder (or drag the folder into the page).

packages/extension/README.md

@@ -64,8 +64,8 @@ pnpm pack:all
 ```
 
 This will create:
-- `chrome-extension-v1.0.7.zip`
-- `firefox-extension-v1.0.7.zip`
-- `brave-extension-v1.0.7.zip`
+- `chrome-extension-v1.0.8.zip`
+- `firefox-extension-v1.0.8.zip`
+- `brave-extension-v1.0.8.zip`
 
 in the `build` directory.

packages/extension/build/brave-extension-v1.0.7.zip

@@ -1,6 +1,6 @@
 {
   "name": "@react-scan/extension",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "type": "module",
   "scripts": {
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@pivanov/utils": "0.0.2",
-    "bippy": "0.2.7",
+    "bippy": "0.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scan": "workspace:*",
@@ -33,13 +33,15 @@
     "@types/chrome": "^0.0.281",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@types/webextension-polyfill": "^0.10.0",
+    "@types/semver": "^7.5.8",
+    "@types/webextension-polyfill": "^0.12.0",
     "@vitejs/plugin-react": "^4.2.1",
     "bestzip": "^2.2.1",
     "cross-env": "^7.0.3",
+    "semver": "^7.7.1",
     "vite": "^6.0.7",
     "vite-plugin-web-extension": "^4.4.3",
     "vite-tsconfig-paths": "^5.1.4",
-    "webextension-polyfill": "^0.10.0"
+    "webextension-polyfill": "^0.12.0"
   }
 }

packages/extension/build/brave-extension-v1.0.8.zip

@@ -32,6 +32,7 @@ html.freeze #react-scan-toast {
   top: 50%;
   left: 50%;
   display: flex;
+  flex-direction: column;
   padding: 12px 40px 12px 16px;
   min-width: 320px;
   max-width: 480px;
@@ -48,6 +49,19 @@ html.freeze #react-scan-toast {
   z-index: 2147483651;
 }
 
+#react-scan-toast-title {
+  margin: 0 0 8px 0;
+}
+
+#react-scan-toast-message {
+  display: flex;
+  align-items: flex-start;
+}
+
+#react-scan-toast-message span {
+  white-space: pre-line;
+}
+
 #react-scan-toast .icon {
   font-size: .75rem;
   margin-right: 8px;

packages/extension/build/chrome-extension-v1.0.7.zip

@@ -1,35 +1,30 @@
 import browser from 'webextension-polyfill';
 import { isInternalUrl } from '~utils/helpers';
 import { IconState, updateIconForTab } from './icon';
+import { BroadcastMessage } from '~types/messages';
 
 const browserAction = browser.action || browser.browserAction;
 
-browser.runtime.onInstalled.addListener(async () => {
-  const tabs = await browser.tabs.query({ url: ['http://*/*', 'https://*/*'] });
-
-  for (const tab of tabs) {
-    if (tab.id && !isInternalUrl(tab.url || '')) {
-      try {
-        await browser.scripting.executeScript({
-          target: { tabId: tab.id },
-          func: () => {
-            localStorage.setItem('react-scan-needs-refresh', 'true');
-          },
-        });
-
-        await browser.scripting.executeScript({
-          target: { tabId: tab.id },
-          files: ['src/inject/index.js', 'src/content/index.js'],
-        });
-      } catch {}
-    }
+const injectScripts = async (tabId: number) => {
+  try {
+    await browser.scripting.executeScript({
+      target: { tabId },
+      files: ['src/content/index.js', 'src/inject/index.js'],
+    });
+
+    await browser.tabs.sendMessage(tabId, {
+      type: 'react-scan:page-reload',
+    });
+  } catch (e) {
+    // biome-ignore lint/suspicious/noConsole: log error
+    console.error('Script injection error:', e);
   }
-});
+};
 
 const isScriptsLoaded = async (tabId: number): Promise<boolean> => {
   try {
-    const response = await browser.tabs.sendMessage(tabId, { type: 'react-scan:ping' });
-    return response?.pong === true;
+    await browser.tabs.sendMessage(tabId, { type: 'react-scan:ping' });
+    return true;
   } catch {
     return false;
   }
@@ -44,6 +39,11 @@ const init = async (tab: browser.Tabs.Tab) => {
   }
 
   const isLoaded = await isScriptsLoaded(tab.id);
+
+  if (!isLoaded) {
+    await injectScripts(tab.id);
+  }
+
   if (!isLoaded) {
     await updateIconForTab(tab, IconState.DISABLED);
   }
@@ -84,31 +84,27 @@ browserAction.onClicked.addListener(async (tab) => {
   }
 
   try {
-    const response = await browser.tabs.sendMessage(tab.id, {
+    await browser.tabs.sendMessage(tab.id, {
       type: 'react-scan:toggle-state',
     });
 
-    if (response && typeof response.hasReact === 'boolean') {
-      await updateIconForTab(
-        tab,
-        response.hasReact ? IconState.ENABLED : IconState.DISABLED,
-      );
-    } else {
-      await updateIconForTab(tab, IconState.DISABLED);
-    }
+    await updateIconForTab(tab, IconState.DISABLED);
   } catch {
     if (tab.id) {
       await updateIconForTab(tab, IconState.DISABLED);
     }
   }
 });
 
-browser.runtime.onMessage.addListener((message, sender) => {
-  if (!sender.tab?.id) return;
-  if (message.type === 'react-scan:is-enabled') {
-    void updateIconForTab(
-      sender.tab,
-      message.data.state ? IconState.ENABLED : IconState.DISABLED,
-    );
-  }
-});
+browser.runtime.onMessage.addListener(
+  (message: unknown, sender: browser.Runtime.MessageSender) => {
+    const msg = message as BroadcastMessage;
+    if (!sender.tab?.id) return;
+    if (msg.type === 'react-scan:is-enabled') {
+      void updateIconForTab(
+        sender.tab,
+        msg.data?.state ? IconState.ENABLED : IconState.DISABLED,
+      );
+    }
+  },
+);

packages/extension/build/chrome-extension-v1.0.8.zip

@@ -1,13 +1,10 @@
-import { busDispatch, busSubscribe, storageSetItem } from '@pivanov/utils';
+import { busDispatch, busSubscribe } from '@pivanov/utils';
 import browser from 'webextension-polyfill';
 import {
   type BroadcastMessage,
   BroadcastSchema,
   type IEvents,
 } from '~types/messages';
-import { saveLocalStorage } from '../utils/helpers';
-import { EXTENSION_STORAGE_KEY, STORAGE_KEY } from '../utils/constants';
-
 
 chrome.runtime.onMessage.addListener(
   async (message: unknown, _sender, sendResponse) => {
@@ -23,27 +20,12 @@ chrome.runtime.onMessage.addListener(
       return false;
     }
 
-    if (data.type === 'react-scan:toggle-state') {
-      // Adter extension installation
-      const needsRefresh = localStorage.getItem('react-scan-needs-refresh');
-      if (needsRefresh === 'true') {
-        localStorage.removeItem('react-scan-needs-refresh');
-        try {
-          await storageSetItem(EXTENSION_STORAGE_KEY, 'isEnabled', true);
-        } catch {}
-
-        const updatedOptions = {
-          enabled: true,
-          showToolbar: true,
-          dangerouslyForceRunInProduction: true,
-        };
-
-        saveLocalStorage(STORAGE_KEY, updatedOptions);
-
-        window.location.reload();
-        return;
-      }
+    if (data.type === 'react-scan:page-reload') {
+      window.location.reload();
+      return false;
+    }
 
+    if (data.type === 'react-scan:toggle-state') {
       busDispatch<IEvents['react-scan:toggle-state']>(
         'react-scan:toggle-state',
         undefined,

packages/extension/build/firefox-extension-v1.0.7.zip

@@ -6,6 +6,7 @@ import {
   storageSetItem,
 } from '@pivanov/utils';
 import * as reactScan from 'react-scan';
+import { gt } from 'semver';
 import type { IEvents } from '~types/messages';
 import { EXTENSION_STORAGE_KEY, STORAGE_KEY } from '~utils/constants';
 import {
@@ -16,19 +17,22 @@ import {
 } from '~utils/helpers';
 import { createNotificationUI, toggleNotification } from './notification';
 
-export const isTargetPageAlreadyUsedReactScan = () => {
-  const reactScanExtensionVersion = reactScan.ReactScanInternals.version;
-  const currentReactScanVersion =
-    window.__REACT_SCAN__?.ReactScanInternals.version;
+const reactScanExtensionVersion = reactScan.ReactScanInternals.version;
+const isTargetPageAlreadyUsedReactScan = () => {
+  const currentReactScanVersion = window.__REACT_SCAN_VERSION__;
 
-  if (window.__REACT_SCAN__?.ReactScanInternals.Store.monitor.value) {
+  if (
+    window.__REACT_SCAN__?.ReactScanInternals?.Store?.monitor?.value &&
+    !currentReactScanVersion
+  ) {
+    return true;
+  }
+
+  if (!reactScanExtensionVersion || !currentReactScanVersion) {
     return false;
   }
 
-  return (
-    !!window.__REACT_SCAN__ &&
-    reactScanExtensionVersion !== currentReactScanVersion
-  );
+  return gt(currentReactScanVersion, reactScanExtensionVersion);
 };
 
 const getInitialOptions = async (): Promise<reactScan.Options> => {
@@ -54,9 +58,12 @@ const getInitialOptions = async (): Promise<reactScan.Options> => {
 const initializeReactScan = async () => {
   const options = await getInitialOptions();
 
-  window.hideIntro = true;
-  reactScan.scan(options);
-  window.reactScan = undefined;
+  window.__REACT_SCAN_EXTENSION__ = true;
+  if (options.enabled) {
+    window.hideIntro = true;
+    reactScan.scan(options);
+    window.reactScan = undefined;
+  }
 };
 
 let timer: number | undefined;
@@ -94,7 +101,11 @@ window.addEventListener('DOMContentLoaded', async () => {
   isReactAvailable = await hasReactFiber();
 
   if (!isReactAvailable) {
-    createNotificationUI();
+    createNotificationUI({
+      title: 'React Not Detected',
+      content:
+        "React is not detected on this page.\nPlease ensure you're visiting a React application.",
+    });
 
     busDispatch<IEvents['react-scan:send-to-background']>(
       'react-scan:send-to-background',
@@ -117,7 +128,18 @@ window.addEventListener('DOMContentLoaded', async () => {
   }
 
   if (isTargetPageAlreadyUsedReactScan()) {
-    createNotificationUI('React Scan is already initialized!');
+    if (window.__REACT_SCAN__?.ReactScanInternals?.Store?.monitor?.value) {
+      createNotificationUI({
+        title: 'Outdated React Scan Monitoring',
+        content:
+          'If you are a developer of this website, please upgrade to the latest version of React Scan.',
+      });
+    } else {
+      createNotificationUI({
+        title: 'Already Initialized',
+        content: 'React Scan is already initialized on this page.',
+      });
+    }
 
     busDispatch<IEvents['react-scan:send-to-background']>(
       'react-scan:send-to-background',
@@ -152,7 +174,9 @@ window.addEventListener('DOMContentLoaded', async () => {
     );
   }
 
-  window.reactScan = reactScan.setOptions;
+  if (!isTargetPageAlreadyUsedReactScan()) {
+    window.reactScan = reactScan.setOptions;
+  }
 
   busSubscribe<IEvents['react-scan:toggle-state']>(
     'react-scan:toggle-state',
@@ -167,7 +191,7 @@ window.addEventListener('DOMContentLoaded', async () => {
           EXTENSION_STORAGE_KEY,
           'isEnabled',
         );
-        await updateReactScanState(isEnabled);
+        await updateReactScanState(!!isEnabled);
       } catch {
         await updateReactScanState(null);
       }