Fix: Context invalidated for sites which do not send request after site is loaded

packages/design-system/src/components/errorFallback/extensionReloadNotification.tsx

@@ -22,15 +22,33 @@ import React from 'react';
  * Internal dependencies.
  */
 import Button from '../button';
+interface ExtensionReloadNotificationProps {
+  tabId?: number;
+}
 
-const ExtensionReloadNotification = () => {
+const ExtensionReloadNotification = ({
+  tabId,
+}: ExtensionReloadNotificationProps) => {
   return (
     <div className="w-full h-full px-2 flex flex-col items-center justify-center border-b border-american-silver dark:border-quartz bg-white dark:bg-charleston-green dark:text-white">
       <p className="text-xl text-center px-4">
         Looks like extension has been updated since devtool was open.
       </p>
       <div className="ml-2 mt-4">
-        <Button onClick={() => window.location.reload()} text="Refresh panel" />
+        <Button
+          onClick={() => {
+            window.location.reload();
+            if (localStorage.getItem('psatOpenedAfterPageLoad') && tabId) {
+              try {
+                chrome.tabs.reload(tabId);
+                localStorage.removeItem('psatOpenedAfterPageLoad');
+              } catch (error) {
+                //Fail silenlty
+              }
+            }
+          }}
+          text="Refresh panel"
+        />
       </div>
     </div>
   );

packages/extension/src/serviceWorker/index.ts

@@ -624,28 +624,30 @@ chrome.runtime.onMessage.addListener(async (request) => {
   const incomingMessageTabId = request.payload.tabId;
 
   if (DEVTOOLS_OPEN === incomingMessageType) {
-    const dataToSend: { [key: string]: string } = {};
+    const dataToSend: { [key: string]: string | boolean } = {};
     dataToSend['tabMode'] = tabMode;
 
     if (tabMode === 'single') {
       dataToSend['tabToRead'] = tabToRead;
     }
 
-    chrome.runtime.sendMessage({
-      type: INITIAL_SYNC,
-      payload: dataToSend,
-    });
-
     if (
       !syncCookieStore?.tabs[incomingMessageTabId] &&
       tabMode === 'unlimited'
     ) {
       const currentTab = await getTab(incomingMessageTabId);
-
+      dataToSend['psatOpenedAfterPageLoad'] = request.payload.doNotReReload
+        ? false
+        : true;
       syncCookieStore?.addTabData(incomingMessageTabId);
       syncCookieStore?.updateUrl(incomingMessageTabId, currentTab?.url || '');
     }
 
+    chrome.runtime.sendMessage({
+      type: INITIAL_SYNC,
+      payload: dataToSend,
+    });
+
     syncCookieStore?.updateDevToolsState(incomingMessageTabId, true);
 
     if (syncCookieStore?.tabsData[incomingMessageTabId]) {

packages/extension/src/view/devtools/app.tsx

@@ -35,6 +35,8 @@ const App: React.FC = () => {
   const [sidebarData, setSidebarData] = useState(TABS);
   const contextInvalidatedRef = useRef(null);
 
+  const tabIdRef = useRef(chrome.devtools.inspectedWindow.tabId);
+
   const contextInvalidated = useContextInvalidated(contextInvalidatedRef);
 
   const [defaultSelectedItemKey, setDefaultSelectedItemKey] = useState(
@@ -70,7 +72,7 @@ const App: React.FC = () => {
           <Layout setSidebarData={setSidebarData} />
         ) : (
           <div className="flex flex-col items-center justify-center w-full h-full">
-            <ExtensionReloadNotification />
+            <ExtensionReloadNotification tabId={tabIdRef.current} />
           </div>
         )}
       </div>

packages/extension/src/view/devtools/hooks/useContextInvalidated.ts

@@ -87,8 +87,8 @@ const useContextInvalidated = (
               //Fail silently
             }
           }
-          localStorage.removeItem('contextInvalidated');
         }
+        localStorage.removeItem('contextInvalidated');
       }
     })();
   }, [allowedNumberOfTabs, isUsingCDP]);

packages/extension/src/view/devtools/stateProviders/cookie/cookieProvider.tsx

@@ -224,6 +224,7 @@ const Provider = ({ children }: PropsWithChildren) => {
         cookieData?: TabCookies;
         tabToRead?: string;
         tabMode?: string;
+        psatOpenedAfterPageLoad?: boolean;
       };
     }) => {
       if (!message.type) {
@@ -246,6 +247,13 @@ const Provider = ({ children }: PropsWithChildren) => {
       if (INITIAL_SYNC === incomingMessageType && message?.payload?.tabMode) {
         if (message.payload.tabMode === 'unlimited') {
           isCurrentTabBeingListenedToRef.current = true;
+          if (
+            Object.keys(message.payload).includes('psatOpenedAfterPageLoad') &&
+            message.payload.psatOpenedAfterPageLoad
+          ) {
+            setContextInvalidated(true);
+            localStorage.setItem('psatOpenedAfterPageLoad', 'true');
+          }
           setTabToRead(null);
         } else {
           if (tabId.toString() !== message?.payload?.tabToRead) {
@@ -364,10 +372,14 @@ const Provider = ({ children }: PropsWithChildren) => {
   }, []);
 
   useEffect(() => {
+    const doNotReReload =
+      localStorage.getItem('contextInvalidated') &&
+      !localStorage.getItem('psatOpenedAfterPageLoad');
     chrome.runtime.sendMessage({
       type: DEVTOOLS_OPEN,
       payload: {
         tabId: chrome.devtools.inspectedWindow.tabId,
+        doNotReReload,
       },
     });