feat: show error when page is not responding

src/content/contentScript.ts

@@ -56,6 +56,8 @@ messages.startRuntimeListening();
 messages.listenRuntime('DETECT_TOLGEE', async () => {
   if (configuration) {
     messages.sendToPlugin('TOLGEE_CONFIG_LOADED', configuration);
+  } else {
+    messages.sendToPlugin('TOLGEE_CONFIG_NOT_LOADED');
   }
 });
 

src/popup/TolgeeDetector.tsx

@@ -47,7 +47,9 @@ export const TolgeeDetector = () => {
   if (error) {
     return (
       <Box width={POPUP_WIDTH} p={1} color="red">
-        <Typography variant="body2">Error: {error}</Typography>
+        <Typography variant="body2" fontWeight="bold">
+          Error: {error}
+        </Typography>
       </Box>
     );
   } else if (tolgeePresent === 'loading') {

src/popup/sendMessage.ts

@@ -1,7 +1,16 @@
 export const sendMessage = (type: string, data?: any) => {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id as number, { type, data }, resolve);
+      chrome.tabs.sendMessage(
+        tabs[0].id as number,
+        { type, data },
+        (response) => {
+          if (chrome.runtime.lastError) {
+            reject(chrome.runtime.lastError);
+          }
+          resolve(response);
+        }
+      );
     });
   });
 };

src/popup/useDetectorForm.tsx

@@ -34,6 +34,7 @@ type Action =
       type: 'CHANGE_LIB_CONFIG';
       payload: { libData: LibConfig | null; frameId: number | null };
     }
+  | { type: 'SET_ERROR'; payload: string }
   | { type: 'SET_APPLIED_VALUES'; payload: Values | null }
   | { type: 'SET_CREDENTIALS_CHECK'; payload: CredentialsCheck }
   | { type: 'LOAD_STORED_VALUES'; payload: Values | null }
@@ -73,6 +74,12 @@ export const useDetectorForm = () => {
               : 'present',
         };
       }
+      case 'SET_ERROR':
+        return {
+          ...state,
+          tolgeePresent: 'not_present',
+          error: action.payload,
+        };
       case 'SET_APPLIED_VALUES':
         return {
           ...state,
@@ -152,25 +159,14 @@ export const useDetectorForm = () => {
   }, [appliedValues]);
 
   useEffect(() => {
-    sendMessage('DETECT_TOLGEE');
+    sendMessage('DETECT_TOLGEE').catch(() => {
+      dispatch({
+        type: 'SET_ERROR',
+        payload: 'No access to this page, try to refresh',
+      });
+    });
   }, []);
 
-  // timeout when Tolgee is not detected
-  useEffect(() => {
-    if (!state.libConfig) {
-      const timer = setTimeout(
-        () =>
-          dispatch({
-            type: 'CHANGE_LIB_CONFIG',
-            payload: { frameId: null, libData: null },
-          }),
-        300
-      );
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [state.libConfig]);
-
   // after tolgee config is loaded
   // get applied values and stored values
   const onLibConfigChange = async () => {
@@ -203,6 +199,11 @@ export const useDetectorForm = () => {
           type: 'CHANGE_LIB_CONFIG',
           payload: { libData: data, frameId: frameId || null },
         });
+      } else if (type === 'TOLGEE_CONFIG_NOT_LOADED') {
+        dispatch({
+          type: 'CHANGE_LIB_CONFIG',
+          payload: { libData: null, frameId: null },
+        });
       }
     };
     chrome.runtime.onMessage.addListener(listener);