fix: popup communication with content script error message

src/common/model/bus.model.ts

@@ -52,7 +52,8 @@ export enum BusMessageType {
   CONTENT_DOWNLOAD_DATA = 'content.download',
   CONTENT_EXTENSION_LOGIN = 'content.extension.login',
   CONTENT_INVALIDATE = 'content.invalidate',
-  CONTENT_PING_URL = 'content.ping.url',
+  CONTENT_PING = 'content.ping',
+  CONTENT_PONG = 'content.pong',
   CONTENT_PIN_VISIBLE = 'content.pin.visible',
   CONTENT_PIN_NAVIGATE = 'content.pin.navigate',
   CONTENT_PIN_REMOVE = 'content.pin.remove',

src/content-script/content-message.handler.ts

@@ -109,6 +109,9 @@ export class ContentMessageHandler {
       case BusMessageType.CONTENT_PIN_VISIBLE:
         new PinVisibleCommand(msg.data).execute();
         break;
+      case BusMessageType.CONTENT_PING:
+        await BrowserApi.sendRuntimeMessage({ type: BusMessageType.CONTENT_PONG });
+        break;
       default:
         TinyDispatcher.getInstance().dispatch(msg.type, msg.data);
         break;

src/default-popup/components/main/connection-error.component.tsx

@@ -20,6 +20,7 @@ import Button from '@mui/material/Button';
 import { MainFooterButton } from './main-footer.button';
 import { PopupActiveTabStore } from '../../store/popup-active-tab.store';
 import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
 
 export const ConnectionErrorComponent: FunctionComponent = () => {
   const isExtension = PopupActiveTabStore.isExtension;
@@ -41,6 +42,8 @@ const ExtensionMessage: FunctionComponent = () => {
   );
 };
 
+const messageStyle = { fontSize: '12pt', paddingTop: 10, margin: 0 };
+
 const NoUrlMessage: FunctionComponent = () => {
   const handleRefreshPage = async (): Promise<void> => {
     await BrowserApi.tabs.reload();
@@ -49,17 +52,14 @@ const NoUrlMessage: FunctionComponent = () => {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
-      <Typography
-        variant="h5"
-        component="h5"
-        sx={{ backgroundColor: '#d32f2f', color: '#ffffff', padding: 5, textAlign: 'center', width: '100%' }}
-      >
-        <span>Mission failed</span>
-        <br />
-        <span style={{ fontSize: '14pt' }}>refresh page</span>
-        <br />
-        <span style={{ fontSize: '14pt' }}>to add and view pins</span>
-      </Typography>
+      <div style={{ backgroundColor: '#d32f2f', color: '#ffffff', padding: 5, textAlign: 'center', width: '100%' }}>
+        <p style={{ fontSize: '24pt', marginTop: 20, marginBottom: 20 }}>Load failed</p>
+        <p style={messageStyle}>refresh page to add and view pins</p>
+        <p style={{ ...messageStyle, marginBottom: 20 }}>
+          To allow access to search page results navigate to{' '}
+          {BrowserApi.isChrome ? 'chrome://extensions' : 'about:addons'}
+        </p>
+      </div>
       <Button sx={{ width: '100%', marginTop: 1 }} variant="outlined" onClick={handleRefreshPage}>
         Refresh page
       </Button>

src/default-popup/components/main/main-footer.button.tsx

@@ -29,7 +29,7 @@ export const MainFooterButton: FunctionComponent<Props> = (props) => {
     <div style={{ position: 'absolute', bottom: 0, width: 300, paddingTop: 5, backgroundColor: '#ffffff' }}>
       <div
         style={{
-          display: props.openBugReport ? 'flex' : 'none',
+          display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'center'

src/default-popup/components/obj/obj-list.component.tsx

@@ -39,7 +39,6 @@ interface Props {
 }
 
 export const ObjListComponent: FunctionComponent<Props> = (props) => {
-  LogManager.log(`RENDER !!! ${props.objList.length}`);
   const [objRemove, setObjRemove] = useState<ObjDto | undefined>();
 
   const handleRemove = (id: number) => {

src/default-popup/components/obj/obj-view.component.tsx

@@ -94,7 +94,7 @@ export const ObjViewComponent: FunctionComponent<Props> = (props) => {
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    setTimeout(async () => await initUrl(), 100);
+    setTimeout(async () => await initUrl(), 0);
     const urlKey = TinyDispatcher.getInstance().addListener(BusMessageType.POP_UPDATE_URL, () => {
       setTimeout(async () => {
         Store.resetStore();

src/default-popup/popup-message.handler.ts

@@ -22,6 +22,7 @@ import { PopupTokenStore } from './store/popup-token.store';
 import { TinyDispatcher } from '@pinmenote/tiny-dispatcher';
 
 export class PopupMessageHandler {
+  private static timeoutId = -1;
   static async init(): Promise<void> {
     BrowserApi.runtime.onMessage.addListener(this.handleMessage);
 

src/default-popup/store/popup-active-tab.store.ts

@@ -46,6 +46,7 @@ export class PopupActiveTabStore {
   }
 
   static initUrlValue = async () => {
+    await this.checkRuntimeScript();
     const tab = await BrowserApi.activeTab();
     if (tab.url) {
       const url = new URL(tab.url);
@@ -73,4 +74,21 @@ export class PopupActiveTabStore {
       TinyDispatcher.getInstance().dispatch<boolean>(BusMessageType.POP_IS_ADDING, this.isAddingValue);
     }
   };
+
+  private static runtimeScriptTimeoutId = -1;
+  private static checkRuntimeScript = async () => {
+    TinyDispatcher.getInstance().addListener(
+      BusMessageType.CONTENT_PONG,
+      () => {
+        LogManager.log('checkRuntimeScript->PONG');
+        clearTimeout(this.runtimeScriptTimeoutId);
+      },
+      true
+    );
+    await BrowserApi.sendTabMessage({ type: BusMessageType.CONTENT_PING });
+    this.runtimeScriptTimeoutId = window.setTimeout(() => {
+      this.isError = true;
+      TinyDispatcher.getInstance().dispatch<void>(BusMessageType.POP_UPDATE_URL);
+    }, 500);
+  };
 }