Suggest Chrome Extension Installation Popup

desktop-app/src/renderer/AppContent.tsx

@@ -12,6 +12,7 @@ import DeviceManager from './components/DeviceManager';
 import KeyboardShortcutsManager from './components/KeyboardShortcutsManager';
 import { ReleaseNotes } from './components/ReleaseNotes';
 import { Sponsorship } from './components/Sponsorship';
+import { ChromePopup } from './components/ChromePopup';
 import { AboutDialog } from './components/AboutDialog';
 
 if ((navigator as any).userAgentData.platform === 'Windows') {
@@ -52,6 +53,7 @@ const AppContent = () => {
         <ViewComponent />
         <ReleaseNotes />
         <Sponsorship />
+        <ChromePopup />
         <AboutDialog />
       </ThemeProvider>
     </Provider>

desktop-app/src/renderer/components/ChromePopup/index.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { IPC_MAIN_CHANNELS } from 'common/constants';
+
+import Modal from '../Modal';
+import Icon from '../../assets/img/logo.png';
+import Button from '../Button';
+
+export const ChromePopup = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const usesChromeMs = window.electron.store.get('chromePopup.usesChrome');
+    if (usesChromeMs === undefined || usesChromeMs === true) {
+      setIsOpen(true);
+    }
+  }, []);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Modal
+      title={
+        <div className="flex flex-col items-center gap-2 border-b border-slate-500 pb-2">
+          <div className="flex w-full justify-center">
+            <img src={Icon} alt="Logo" width={64} />
+          </div>
+          <div>Do you have our Chrome Extension?</div>
+        </div>
+      }
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <div className="max-w-lg">
+        <p className="pb-4 text-center">
+          Responsively Helper on the Chrome Web Store
+          <br />
+          <br />
+          Open your current Chrome browser page in the Responsively App
+          seamlessly!
+        </p>
+        <div className="mt-4 flex justify-center">
+          <div className="flex gap-1">
+            <Button
+              onClick={() => {
+                window.electron.ipcRenderer.sendMessage(
+                  IPC_MAIN_CHANNELS.OPEN_EXTERNAL,
+                  {
+                    url: `https://chromewebstore.google.com/detail/responsively-helper/jhphiidjkooiaollfiknkokgodbaddcj`,
+                  }
+                );
+                window.electron.store.set('chromePopup.usesChrome', true);
+                onClose();
+              }}
+              isTextButton
+              isPrimary
+            >
+              Download Extension
+            </Button>
+            <Button
+              onClick={() => {
+                window.electron.store.set('chromePopup.usesChrome', false);
+                onClose();
+              }}
+              isTextButton
+              isPrimary
+            >
+              I do not use Chrome
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};

desktop-app/src/renderer/components/InfoPopups/index.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 import { isReleaseNotesUnseen, ReleaseNotes } from '../ReleaseNotes';
 import { Sponsorship } from '../Sponsorship';
+import { ChromePopup } from '../ChromePopup';
 
 export const InfoPopups = () => {
   const [showReleaseNotes, setShowReleaseNotes] = useState<boolean>(false);
   const [showSponsorship, setShowSponsorship] = useState<boolean>(false);
+  const [showChromePopup, setShowChromePopup] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
@@ -13,6 +15,7 @@ export const InfoPopups = () => {
         return;
       }
       setShowSponsorship(true);
+      setShowChromePopup(true);
     })();
   }, []);
 
@@ -23,6 +26,9 @@ export const InfoPopups = () => {
   if (showSponsorship) {
     return <Sponsorship />;
   }
+  if (showChromePopup) {
+    return <ChromePopup />;
+  }
 
   return null;
 };