feat: replace iframe with chrome sidepanel (#5197)

fixes - #5201


https://github.com/twentyhq/twenty/assets/13139771/871019c6-6456-46b4-95dd-07ffb33eb4fd

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-chrome-extension/src/background/index.ts

@@ -1,40 +1,55 @@
 import Crypto from 'crypto-js';
 
-import { openOptionsPage } from '~/background/utils/openOptionsPage';
 import { exchangeAuthorizationCode } from '~/db/auth.db';
 import { isDefined } from '~/utils/isDefined';
 
 // Open options page programmatically in a new tab.
-chrome.runtime.onInstalled.addListener((details) => {
-  if (details.reason === 'install') {
-    openOptionsPage();
-  }
-});
+// chrome.runtime.onInstalled.addListener((details) => {
+//   if (details.reason === 'install') {
+//     openOptionsPage();
+//   }
+// });
 
-// Open options page when extension icon is clicked.
-chrome.action.onClicked.addListener((tab) => {
-  chrome.tabs.sendMessage(tab.id ?? 0, { action: 'TOGGLE' });
-});
+chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
 
 // This listens for an event from other parts of the extension, such as the content script, and performs the required tasks.
 // The cases themselves are labelled such that their operations are reflected by their names.
 chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
   switch (message.action) {
-    case 'getActiveTab': // e.g. "https://linkedin.com/company/twenty/"
-      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-        if (isDefined(tabs) && isDefined(tabs[0])) {
-          sendResponse({ tab: tabs[0] });
+    case 'getActiveTab': {
+      // e.g. "https://linkedin.com/company/twenty/"
+      chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+        if (isDefined(tab) && isDefined(tab.id)) {
+          sendResponse({ tab });
         }
       });
       break;
-    case 'openOptionsPage':
-      openOptionsPage();
-      break;
-    case 'CONNECT':
+    }
+    case 'launchOAuth': {
       launchOAuth(({ status, message }) => {
         sendResponse({ status, message });
       });
       break;
+    }
+    case 'openSidepanel': {
+      chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+        if (isDefined(tab) && isDefined(tab.id)) {
+          chrome.sidePanel.open({ tabId: tab.id });
+        }
+      });
+      break;
+    }
+    case 'changeSidepanelUrl': {
+      chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+        if (isDefined(tab) && isDefined(tab.id)) {
+          chrome.tabs.sendMessage(tab.id, {
+            action: 'changeSidepanelUrl',
+            message,
+          });
+        }
+      });
+      break;
+    }
     default:
       break;
   }
@@ -101,13 +116,16 @@ const launchOAuth = (
 
             callback({ status: true, message: '' });
 
-            chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-              if (isDefined(tabs) && isDefined(tabs[0])) {
-                chrome.tabs.sendMessage(tabs[0].id ?? 0, {
-                  action: 'AUTHENTICATED',
-                });
-              }
-            });
+            chrome.tabs.query(
+              { active: true, currentWindow: true },
+              ([tab]) => {
+                if (isDefined(tab) && isDefined(tab.id)) {
+                  chrome.tabs.sendMessage(tab.id, {
+                    action: 'executeContentScript',
+                  });
+                }
+              },
+            );
           }
         });
       }
@@ -117,14 +135,22 @@ const launchOAuth = (
     });
 };
 
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+chrome.tabs.onUpdated.addListener(async (tabId, _, tab) => {
   const isDesiredRoute =
     tab.url?.match(/^https?:\/\/(?:www\.)?linkedin\.com\/company(?:\/\S+)?/) ||
     tab.url?.match(/^https?:\/\/(?:www\.)?linkedin\.com\/in(?:\/\S+)?/);
 
-  if (changeInfo.status === 'complete' && tab.active) {
+  if (tab.active === true) {
     if (isDefined(isDesiredRoute)) {
       chrome.tabs.sendMessage(tabId, { action: 'executeContentScript' });
     }
   }
+
+  await chrome.sidePanel.setOptions({
+    tabId,
+    path: tab.url?.match(/^https?:\/\/(?:www\.)?linkedin\.com/)
+      ? 'sidepanel.html'
+      : 'page-inaccessible.html',
+    enabled: true,
+  });
 });

packages/twenty-chrome-extension/src/background/utils/openOptionsPage.ts

@@ -1,5 +0,0 @@
-const openOptionsPage = () => {
-  chrome.runtime.openOptionsPage();
-};
-
-export { openOptionsPage };