Closes #2413 - Building a chrome extension for twenty to store person/company data into a workspace. (#3430)

* build: create a new vite project for chrome extension

* feat: configure theme per the frontend codebase for chrome extension

* feat: inject the add to twenty button into linkedin profile page

* feat: create the api key form ui and render it on the options page

* feat: inject the add to twenty button into linkedin company page

* feat: scrape required data from both the user profile and the company profile

* refactor: move modules into options because it is the only page using react for now

* fix: show add to twenty button without having to reload the single page application

* fix: extract domain of the business website instead of scrapping the industry type

* feat: store api key to local storage and open options page when trying to store data without setting a key

* feat: send data to the backend upon click and store it to the database

* fix: open options page upon clicking the extension icon

* fix: update terminology from user to person to match the codebase convention

* fix: adopt chrome extension to monorepo approach using nx and get the development server working

* fix: update vite config for build command to work per the requirement

* feat: add instructions in the readme file to install the extension for local testing

* fix: move server base url to a dotenv file and replace the hard-coded url

* feat: permit user to configure a custom route for the server from the options page

* fix: fetch api key and route from local storage and display on options page to inform users of their choices

* fix: move front base url to dotenv and replace the hard-coded url

* fix: remove the trailing slash from person and company linkedin username

* fix: improve code commenting to explain implementation somewhat better

* ci: introduce a workflow to build chrome extension to ensure it can be published

* fix: format files to display code in a consistent manner per the prettier configuration in codebase

* fix: improve the commenting significantly to explain important and hard-to-understand parts of the code

* fix: remove unused permissions from the manifest file for publishing to the chrome web store

* Add nx

* Fix vale

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-chrome-extension/.env.example

@@ -0,0 +1,2 @@
+VITE_SERVER_BASE_URL=http://localhost:3000
+VITE_FRONT_BASE_URL=http://localhost:3001

packages/twenty-chrome-extension/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

packages/twenty-chrome-extension/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/twenty-chrome-extension/README.md

@@ -0,0 +1,51 @@
+# Twenty Chrome Extension.
+
+This extension allows you to save `company` and `people` information to your twenty workspace directly from LinkedIn.
+
+To install the extension in development mode with hmr (hot module reload), follow these steps.
+
+- STEP 1: Clone the repository and run `yarn install` in the root directory.
+- STEP 2: Once the dependencies installation succeeds, create a file with env variables by executing the following command in the root directory.
+
+```
+cp ./packages/twenty-chrome-extension/.env.example ./packages/twenty-chrome-extension/.env
+```
+
+- STEP 3: Now, execute the following command in the root directory to start up the development server on Port 3002. This will create a `dist` folder in `twenty-chrome-extension`.
+
+```
+yarn nx start twenty-chrome-extension
+```
+
+- STEP 4: Open Google Chrome and head to the extensions page by typing `chrome://extensions` in the address bar.
+
+<p align="center">
+   <img src="../twenty-chrome-extension/public/readme-images/01-img-one.png" width="600" />
+</p>
+
+- STEP 5: Turn on the `Developer mode` from the top-right corner and click `Load unpacked`.
+
+<p align="center">
+   <img src="../twenty-chrome-extension/public/readme-images/02-img-two.png" width="600" />
+</p>
+
+- STEP 6: Select the `dist` folder from `twenty-chrome-extension`.
+
+<p align="center">
+   <img src="../twenty-chrome-extension/public/readme-images/03-img-three.png" width="600" />
+</p>
+
+- STEP 7: This opens up the `options` page, where you must enter your API key.
+
+<p align="center">
+   <img src="../twenty-chrome-extension/public/readme-images/04-img-four.png" width="600" />
+</p>
+
+- STEP 8: Reload any LinkedIn page that you opened before installing the extension for seamless experience.
+- STEP 9: Visit any individual or company profile on LinkedIn and click the `Add to Twenty` button to test.
+
+<p align="center">
+   <img src="../twenty-chrome-extension/public/readme-images/05-img-five.png" width="600" />
+</p>
+
+To install the extension in production mode without hmr (hot module reload), replace the command in STEP THREE with `yarn nx build twenty-chrome-extension`.

packages/twenty-chrome-extension/options.html

@@ -0,0 +1,12 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twenty</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.tsx"></script>
+  </body>
+</html>

packages/twenty-chrome-extension/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "twenty-chrome-extension",
+  "description": "",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "nx": "NX_DEFAULT_PROJECT=twenty-chrome-extension node ../../node_modules/nx/bin/nx.js",
+    "start": "vite",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "@types/chrome": "^0.0.256"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "^1.0.14"
+  }
+}

packages/twenty-chrome-extension/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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

@@ -0,0 +1,62 @@
+import { openOptionsPage } from './utils/openOptionsPage';
+
+console.log('Background Script Works');
+
+// Open options page programmatically in a new tab.
+chrome.runtime.onInstalled.addListener(function (details) {
+  if (details.reason === 'install') {
+    openOptionsPage();
+  }
+});
+
+// Open options page when extension icon is clicked.
+chrome.action.onClicked.addListener(function () {
+  openOptionsPage();
+});
+
+// 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 'getActiveTabUrl': // e.g. "https://linkedin.com/company/twenty/"
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs && tabs[0]) {
+          const activeTabUrl: string | undefined = tabs[0].url;
+          sendResponse({ url: activeTabUrl });
+        }
+      });
+      break;
+    case 'openOptionsPage':
+      openOptionsPage();
+      break;
+    default:
+      break;
+  }
+
+  return true;
+});
+
+// Keep track of the tabs in which the "Add to Twenty" button has already been injected.
+// Could be that the content script is executed at "https://linkedin.com/feed/", but is needed at "https://linkedin.com/in/mabdullahabaid/".
+// However, since Linkedin is a SPA, the script would not be re-executed when you navigate to "https://linkedin.com/in/mabdullahabaid/" from a user action.
+// Therefore, this tracks if the user is on desired route and then re-executes the content script to create the "Add to Twenty" button.
+// We use a "Set" to keep track of tab ids because it could be that the "Add to Twenty" button was created at "https://linkedin/com/company/twenty".
+// However, when we change to about on the company page, the url becomes "https://www.linkedin.com/company/twenty/about/" and the button is created again.
+// This creates a duplicate button, which we want to avoid. So, we instruct the extension to only create the button once for any of the following urls.
+// "https://www.linkedin.com/company/twenty/" "https://www.linkedin.com/company/twenty/about/" "https://www.linkedin.com/company/twenty/people/".
+const injectedTabs: Set<number> = new Set();
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, 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 (isDesiredRoute && !injectedTabs.has(tabId)) {
+      chrome.tabs.sendMessage(tabId, { action: 'executeContentScript' });
+      injectedTabs.add(tabId);
+    } else if (!isDesiredRoute) {
+      injectedTabs.delete(tabId); // Clear entry if navigated away from LinkedIn company page.
+    }
+  }
+});

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

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

packages/twenty-chrome-extension/src/contentScript/createButton.ts

@@ -0,0 +1,57 @@
+function createNewButton(
+  text: string,
+  onClickHandler: () => void,
+): HTMLButtonElement {
+  const newButton: HTMLButtonElement = document.createElement('button');
+  newButton.textContent = text;
+
+  // Write universal styles for the button
+  const buttonStyles = {
+    border: '1px solid black',
+    borderRadius: '20px',
+    backgroundColor: 'black',
+    color: 'white',
+    fontSize: '1.5rem',
+    fontWeight: '600',
+    padding: '0.45em 1em',
+    width: '15rem',
+    height: '32px',
+  };
+
+  // Apply common styles to the button.
+  Object.assign(newButton.style, buttonStyles);
+
+  // Apply common styles to specifc states of a button.
+  newButton.addEventListener('mouseenter', () => {
+    const hoverStyles = {
+      backgroundColor: '#5e5e5e',
+      borderColor: '#5e5e5e',
+    };
+    Object.assign(newButton.style, hoverStyles);
+  });
+
+  newButton.addEventListener('mouseleave', () => {
+    Object.assign(newButton.style, buttonStyles);
+  });
+
+  // Handle the click event.
+  newButton.addEventListener('click', async () => {
+    const { apiKey } = await chrome.storage.local.get('apiKey');
+
+    // If an api key is not set, the options page opens up to allow the user to configure an api key.
+    if (!apiKey) {
+      chrome.runtime.sendMessage({ action: 'openOptionsPage' });
+      return;
+    }
+
+    // Update content during the resolution of the request.
+    newButton.textContent = 'Saving...';
+
+    // Call the provided onClickHandler function to handle button click logic
+    onClickHandler();
+  });
+
+  return newButton;
+}
+
+export default createNewButton;

packages/twenty-chrome-extension/src/contentScript/extractCompanyProfile.ts

@@ -0,0 +1,106 @@
+import handleQueryParams from '../utils/handleQueryParams';
+import requestDb from '../utils/requestDb';
+import createNewButton from './createButton';
+import extractCompanyLinkedinLink from './utils/extractCompanyLinkedinLink';
+import extractDomain from './utils/extractDomain';
+
+function insertButtonForCompany(): void {
+  // Select the element in which to create the button.
+  const parentDiv: HTMLDivElement | null = document.querySelector(
+    '.org-top-card-primary-actions__inner',
+  );
+
+  // Create the button with desired callback funciton to execute upon click.
+  if (parentDiv) {
+    const newButtonCompany: HTMLButtonElement = createNewButton(
+      'Add to Twenty',
+      async () => {
+        // Extract company-specific data from the DOM
+        const companyNameElement = document.querySelector(
+          '.org-top-card-summary__title',
+        );
+        const domainNameElement = document.querySelector(
+          '.org-top-card-primary-actions__inner a',
+        );
+        const addressElement = document.querySelectorAll(
+          '.org-top-card-summary-info-list__info-item',
+        )[1];
+        const employeesNumberElement = document.querySelectorAll(
+          '.org-top-card-summary-info-list__info-item',
+        )[3];
+
+        // Get the text content or other necessary data from the DOM elements
+        const companyName = companyNameElement
+          ? companyNameElement.getAttribute('title')
+          : '';
+        const domainName = extractDomain(
+          domainNameElement && domainNameElement.getAttribute('href'),
+        );
+        const address = addressElement
+          ? addressElement.textContent?.trim().replace(/\s+/g, ' ')
+          : '';
+        const employees = employeesNumberElement
+          ? Number(
+              employeesNumberElement.textContent
+                ?.trim()
+                .replace(/\s+/g, ' ')
+                .split('-')[0],
+            )
+          : 0;
+
+        // Prepare company data to send to the backend
+        const companyData = {
+          name: companyName,
+          domainName: domainName,
+          address: address,
+          employees: employees,
+          linkedinLink: { url: '', label: '' },
+        };
+
+        // Extract active tab url using chrome API - an event is triggered here and is caught by background script.
+        const { url: activeTabUrl } = await chrome.runtime.sendMessage({
+          action: 'getActiveTabUrl',
+        });
+
+        // Convert URLs like https://www.linkedin.com/company/twenty/about/ to https://www.linkedin.com/company/twenty
+        const companyURL = extractCompanyLinkedinLink(activeTabUrl);
+        companyData.linkedinLink = { url: companyURL, label: companyURL };
+
+        const query = `mutation CreateOneCompany { createCompany(data:{${handleQueryParams(
+          companyData,
+        )}}) {id} }`;
+
+        const response = await requestDb(query);
+
+        if (response.data) {
+          newButtonCompany.textContent = 'Saved';
+          newButtonCompany.setAttribute('disabled', 'true');
+
+          // Button specific styles once the button is unclickable after successfully sending data to server.
+          newButtonCompany.addEventListener('mouseenter', () => {
+            const hoverStyles = {
+              backgroundColor: 'black',
+              borderColor: 'black',
+              cursor: 'default',
+            };
+            Object.assign(newButtonCompany.style, hoverStyles);
+          });
+        } else {
+          newButtonCompany.textContent = 'Try Again';
+        }
+      },
+    );
+
+    // Include the button in the DOM.
+    parentDiv.prepend(newButtonCompany);
+
+    // Write button specific styles here - common ones can be found in createButton.ts.
+    const buttonSpecificStyles = {
+      alignSelf: 'end',
+    };
+
+    Object.assign(newButtonCompany.style, buttonSpecificStyles);
+  }
+}
+
+export default insertButtonForCompany;

packages/twenty-chrome-extension/src/contentScript/extractPersonProfile.ts

@@ -0,0 +1,119 @@
+import handleQueryParams from '../utils/handleQueryParams';
+import requestDb from '../utils/requestDb';
+import createNewButton from './createButton';
+import extractFirstAndLastName from './utils/extractFirstAndLastName';
+
+function insertButtonForPerson(): void {
+  // Select the element in which to create the button.
+  const parentDiv: HTMLDivElement | null = document.querySelector(
+    '.pv-top-card-v2-ctas',
+  );
+
+  // Create the button with desired callback funciton to execute upon click.
+  if (parentDiv) {
+    const newButtonPerson: HTMLButtonElement = createNewButton(
+      'Add to Twenty',
+      async () => {
+        // Extract person-specific data from the DOM.
+        const personNameElement = document.querySelector(
+          '.text-heading-xlarge',
+        );
+
+        const separatorElement = document.querySelector(
+          '.pv-text-details__separator',
+        );
+        const personCityElement = separatorElement?.previousElementSibling;
+
+        const profilePictureElement = document.querySelector(
+          '.pv-top-card-profile-picture__image',
+        );
+
+        const firstListItem = document.querySelector(
+          'div[data-view-name="profile-component-entity"]',
+        );
+        const secondDivElement =
+          firstListItem?.querySelector('div:nth-child(2)');
+        const ariaHiddenSpan = secondDivElement?.querySelector(
+          'span[aria-hidden="true"]',
+        );
+
+        // Get the text content or other necessary data from the DOM elements.
+        const personName = personNameElement
+          ? personNameElement.textContent
+          : '';
+        const personCity = personCityElement
+          ? personCityElement.textContent
+              ?.trim()
+              .replace(/\s+/g, ' ')
+              .split(',')[0]
+          : '';
+        const profilePicture = profilePictureElement
+          ? profilePictureElement?.getAttribute('src')
+          : '';
+        const jobTitle = ariaHiddenSpan
+          ? ariaHiddenSpan.textContent?.trim()
+          : '';
+
+        const { firstName, lastName } = extractFirstAndLastName(
+          String(personName),
+        );
+
+        // Prepare person data to send to the backend.
+        const personData = {
+          name: { firstName, lastName },
+          city: personCity,
+          avatarUrl: profilePicture,
+          jobTitle,
+          linkedinLink: { url: '', label: '' },
+        };
+
+        // Extract active tab url using chrome API - an event is triggered here and is caught by background script.
+        let { url: activeTabUrl } = await chrome.runtime.sendMessage({
+          action: 'getActiveTabUrl',
+        });
+
+        // Remove last slash from the URL for consistency when saving usernames.
+        if (activeTabUrl.endsWith('/')) {
+          activeTabUrl = activeTabUrl.slice(0, -1);
+        }
+
+        personData.linkedinLink = { url: activeTabUrl, label: activeTabUrl };
+
+        const query = `mutation CreateOnePerson { createPerson(data:{${handleQueryParams(
+          personData,
+        )}}) {id} }`;
+
+        const response = await requestDb(query);
+
+        if (response.data) {
+          newButtonPerson.textContent = 'Saved';
+          newButtonPerson.setAttribute('disabled', 'true');
+
+          // Button specific styles once the button is unclickable after successfully sending data to server.
+          newButtonPerson.addEventListener('mouseenter', () => {
+            const hoverStyles = {
+              backgroundColor: 'black',
+              borderColor: 'black',
+              cursor: 'default',
+            };
+            Object.assign(newButtonPerson.style, hoverStyles);
+          });
+        } else {
+          newButtonPerson.textContent = 'Try Again';
+        }
+      },
+    );
+
+    // Include the button in the DOM.
+    parentDiv.prepend(newButtonPerson);
+
+    // Write button specific styles here - common ones can be found in createButton.ts.
+    const buttonSpecificStyles = {
+      marginRight: '0.5em',
+    };
+
+    Object.assign(newButtonPerson.style, buttonSpecificStyles);
+  }
+}
+
+export default insertButtonForPerson;

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

@@ -0,0 +1,20 @@
+import insertButtonForPerson from './extractPersonProfile';
+import insertButtonForCompany from './extractCompanyProfile';
+
+// Inject buttons into the DOM when SPA is reloaded on the resource url.
+// e.g. reload the page when on https://www.linkedin.com/in/mabdullahabaid/
+insertButtonForCompany();
+insertButtonForPerson();
+
+// The content script gets executed upon load, so the the content script is executed when a user visits https://www.linkedin.com/feed/.
+// However, there would never be another reload in a single page application unless triggered manually.
+// Therefore, if the user navigates to a person or a company page, we must manually re-execute the content script to create the "Add to Twenty" button.
+// e.g. create "Add to Twenty" button when a user navigates to https://www.linkedin.com/in/mabdullahabaid/ from https://www.linkedin.com/feed/
+chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
+  if (message.action === 'executeContentScript') {
+    insertButtonForCompany();
+    insertButtonForPerson();
+  }
+
+  sendResponse('Executing!');
+});

packages/twenty-chrome-extension/src/contentScript/utils/extractCompanyLinkedinLink.ts

@@ -0,0 +1,19 @@
+// Extract "https://www.linkedin.com/company/twenty/" from any of the following urls, which the user can visit while on the company page.
+// "https://www.linkedin.com/company/twenty/" "https://www.linkedin.com/company/twenty/about/" "https://www.linkedin.com/company/twenty/people/".
+const extractCompanyLinkedinLink = (activeTabUrl: string) => {
+  // Regular expression to match the company ID
+  const regex = /\/company\/([^/]*)/;
+
+  // Extract the company ID using the regex
+  const match = activeTabUrl.match(regex);
+
+  if (match && match[1]) {
+    const companyID = match[1];
+    const cleanCompanyURL = `https://www.linkedin.com/company/${companyID}`;
+    return cleanCompanyURL;
+  }
+
+  return '';
+};
+
+export default extractCompanyLinkedinLink;

packages/twenty-chrome-extension/src/contentScript/utils/extractDomain.ts

@@ -0,0 +1,15 @@
+function extractDomain(url: string | null) {
+  if (!url) return '';
+
+  const hostname = new URL(url).hostname;
+  let domain = hostname.replace('www.', '');
+
+  const parts = domain.split('.');
+  if (parts.length > 2) {
+    domain = parts.slice(1).join('.');
+  }
+
+  return domain;
+}
+
+export default extractDomain;

packages/twenty-chrome-extension/src/contentScript/utils/extractFirstAndLastName.ts

@@ -0,0 +1,9 @@
+// Separate first name and last name from a full name.
+const extractFirstAndLastName = (fullName: string) => {
+  const spaceIndex = fullName.lastIndexOf(' ');
+  const firstName = fullName.substring(0, spaceIndex);
+  const lastName = fullName.substring(spaceIndex + 1);
+  return { firstName, lastName };
+};
+
+export default extractFirstAndLastName;

packages/twenty-chrome-extension/src/global.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;

packages/twenty-chrome-extension/src/index.css

@@ -0,0 +1,11 @@
+* {
+  margin: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  font-size: 13px;
+}

packages/twenty-chrome-extension/src/manifest.ts

@@ -0,0 +1,36 @@
+import { defineManifest } from '@crxjs/vite-plugin';
+import packageData from '../package.json';
+
+export default defineManifest({
+  manifest_version: 3,
+  name: 'Twenty',
+  description: packageData.description,
+  version: packageData.version,
+
+  icons: {
+    16: 'logo/32-32.png',
+    32: 'logo/32-32.png',
+    48: 'logo/32-32.png',
+  },
+
+  action: {},
+
+  options_page: 'options.html',
+
+  background: {
+    service_worker: 'src/background/index.ts',
+    type: 'module',
+  },
+
+  content_scripts: [
+    {
+      matches: ['https://www.linkedin.com/*'],
+      js: ['src/contentScript/index.ts'],
+      run_at: 'document_end',
+    },
+  ],
+
+  permissions: ['activeTab', 'storage'],
+
+  host_permissions: ['https://www.linkedin.com/*'],
+});

packages/twenty-chrome-extension/src/options/Options.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+import { ApiKeyForm } from './modules/api-key/components/ApiKeyForm';
+
+const StyledContainer = styled.div`
+  background: ${({ theme }) => theme.background.noisy};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+const Options = () => {
+  return (
+    <StyledContainer>
+      <ApiKeyForm />
+    </StyledContainer>
+  );
+};
+
+export default Options;

packages/twenty-chrome-extension/src/options/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './Options';
+import '../index.css';
+import { AppThemeProvider } from './modules/ui/theme/components/AppThemeProvider';
+import { ThemeType } from './modules/ui/theme/constants/theme';
+
+ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
+  <AppThemeProvider>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </AppThemeProvider>,
+);
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends ThemeType {}
+}

packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx

@@ -0,0 +1,146 @@
+import styled from '@emotion/styled';
+import { H2Title } from '../../ui/display/typography/components/H2Title';
+import { useEffect, useState } from 'react';
+import { TextInput } from '../../ui/input/components/TextInput';
+import { Button } from '../../ui/input/button/Button';
+import { Toggle } from '../../ui/input/components/Toggle';
+
+const StyledContainer = styled.div<{ isToggleOn: boolean }>`
+  width: 400px;
+  margin: 0 auto;
+  background-color: ${({ theme }) => theme.background.primary};
+  padding: ${({ theme }) => theme.spacing(10)};
+  overflow: hidden;
+  transition: height 0.3s ease;
+
+  height: ${({ isToggleOn }) => (isToggleOn ? '450px' : '390px')};
+  max-height: ${({ isToggleOn }) => (isToggleOn ? '450px' : '390px')};
+`;
+
+const StyledHeader = styled.header`
+  text-align: center;
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledImg = styled.img``;
+
+const StyledMain = styled.main`
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledFooter = styled.footer`
+  display: flex;
+`;
+
+const StyledTitleContainer = styled.div`
+  flex: 0 0 80%;
+`;
+
+const StyledToggleContainer = styled.div`
+  flex: 0 0 20%;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const StyledSection = styled.div<{ showSection: boolean }>`
+  transition:
+    max-height 0.3s ease,
+    opacity 0.3s ease;
+  overflow: hidden;
+  max-height: ${({ showSection }) => (showSection ? '200px' : '0')};
+`;
+
+export const ApiKeyForm = () => {
+  const [apiKey, setApiKey] = useState('');
+  const [route, setRoute] = useState('');
+  const [showSection, setShowSection] = useState(false);
+
+  useEffect(() => {
+    const getState = async () => {
+      const localStorage = await chrome.storage.local.get();
+
+      if (localStorage.apiKey) {
+        setApiKey(localStorage.apiKey);
+      }
+
+      if (localStorage.serverBaseUrl) {
+        setRoute(localStorage.serverBaseUrl);
+      }
+    };
+
+    void getState();
+  }, []);
+
+  useEffect(() => {
+    chrome.storage.local.set({ apiKey });
+  }, [apiKey]);
+
+  useEffect(() => {
+    chrome.storage.local.set({ serverBaseUrl: route });
+  }, [route]);
+
+  const handleGenerateClick = () => {
+    window.open(
+      `${import.meta.env.VITE_FRONT_BASE_URL}/settings/developers/api-keys`,
+    );
+  };
+
+  const handleToggle = () => {
+    setShowSection(!showSection);
+  };
+
+  return (
+    <StyledContainer isToggleOn={showSection}>
+      <StyledHeader>
+        <StyledImg src="/logo/32-32.png" alt="Twenty Logo" />
+      </StyledHeader>
+
+      <StyledMain>
+        <H2Title
+          title="Connect your account"
+          description="Input your key to link the extension to your workspace."
+        />
+        <TextInput
+          label="Api key"
+          value={apiKey}
+          onChange={setApiKey}
+          placeholder="My API key"
+        />
+        <Button
+          title="Generate a key"
+          fullWidth={false}
+          variant="primary"
+          accent="default"
+          size="small"
+          position="standalone"
+          soon={false}
+          disabled={false}
+          onClick={handleGenerateClick}
+        />
+      </StyledMain>
+
+      <StyledFooter>
+        <StyledTitleContainer>
+          <H2Title
+            title="Custom route"
+            description="For developers interested in self-hosting or local testing of the extension."
+          />
+        </StyledTitleContainer>
+        <StyledToggleContainer>
+          <Toggle value={showSection} onChange={handleToggle} />
+        </StyledToggleContainer>
+      </StyledFooter>
+
+      <StyledSection showSection={showSection}>
+        {showSection && (
+          <TextInput
+            label="Route"
+            value={route}
+            onChange={setRoute}
+            placeholder="My Route"
+          />
+        )}
+      </StyledSection>
+    </StyledContainer>
+  );
+};

packages/twenty-chrome-extension/src/options/modules/ui/display/typography/components/H2Title.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+type H2TitleProps = {
+  title: string;
+  description?: string;
+  addornment?: React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledTitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledTitle = styled.h2`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: 0;
+`;
+
+const StyledDescription = styled.h3`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin: 0;
+  margin-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+export const H2Title = ({ title, description, addornment }: H2TitleProps) => (
+  <StyledContainer>
+    <StyledTitleContainer>
+      <StyledTitle>{title}</StyledTitle>
+      {addornment}
+    </StyledTitleContainer>
+    {description && <StyledDescription>{description}</StyledDescription>}
+  </StyledContainer>
+);

packages/twenty-chrome-extension/src/options/modules/ui/input/button/Button.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+export type ButtonSize = 'medium' | 'small';
+export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonAccent = 'default' | 'blue' | 'danger';
+
+export type ButtonProps = {
+  className?: string;
+  Icon?: React.ReactNode;
+  title?: string;
+  fullWidth?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  position?: ButtonPosition;
+  accent?: ButtonAccent;
+  soon?: boolean;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+const StyledButton = styled.button<ButtonProps>`
+  border: 1px solid transparent;
+  border-radius: ${({ position, theme }) => {
+    switch (position) {
+      case 'left':
+        return `${theme.border.radius.sm} 0px 0px ${theme.border.radius.sm}`;
+      case 'right':
+        return `0px ${theme.border.radius.sm} ${theme.border.radius.sm} 0px`;
+      case 'middle':
+        return '0px';
+      case 'standalone':
+        return theme.border.radius.sm;
+      default:
+        return theme.border.radius.sm;
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: inline-flex;
+  align-items: center;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: 500;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  white-space: nowrap;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  &:hover {
+    border-color: transparent;
+    filter: brightness(0.9);
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const Button = ({
+  className,
+  Icon,
+  title,
+  fullWidth = false,
+  variant = 'primary',
+  size = 'medium',
+  position = 'standalone',
+  soon = false,
+  disabled = false,
+  onClick,
+}: ButtonProps) => (
+  <StyledButton
+    fullWidth={fullWidth}
+    variant={variant}
+    size={size}
+    position={position}
+    disabled={soon || disabled}
+    className={className}
+    onClick={onClick}
+  >
+    {Icon && Icon}
+    {title}
+    {soon && 'Soon'}
+  </StyledButton>
+);

packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+interface TextInputProps {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  fullWidth?: boolean;
+  error?: string;
+  placeholder?: string;
+  icon?: React.ReactNode;
+}
+
+const StyledContainer = styled.div<{ fullWidth?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
+`;
+
+const StyledInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px;
+`;
+
+const StyledIcon = styled.span`
+  margin-right: 8px;
+`;
+
+const StyledInput = styled.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+
+  &::placeholder {
+    color: #aaa;
+  }
+`;
+
+const StyledErrorHelper = styled.div`
+  color: #ff0000;
+  font-size: 12px;
+  padding: 5px 0;
+`;
+
+const TextInput: React.FC<TextInputProps> = ({
+  label,
+  value,
+  onChange,
+  fullWidth,
+  error,
+  placeholder,
+  icon,
+}) => {
+  return (
+    <StyledContainer fullWidth={fullWidth}>
+      {label && <StyledLabel>{label}</StyledLabel>}
+      <StyledInputContainer>
+        {icon && <StyledIcon>{icon}</StyledIcon>}
+        <StyledInput
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+        />
+      </StyledInputContainer>
+      {error && <StyledErrorHelper>{error}</StyledErrorHelper>}
+    </StyledContainer>
+  );
+};
+
+export { TextInput };

packages/twenty-chrome-extension/src/options/modules/ui/input/components/Toggle.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+export type ToggleSize = 'small' | 'medium';
+
+type ContainerProps = {
+  isOn: boolean;
+  color?: string;
+  toggleSize: ToggleSize;
+};
+
+const StyledContainer = styled.div<ContainerProps>`
+  align-items: center;
+  background-color: ${({ theme, isOn, color }) =>
+    isOn ? color ?? theme.color.blue : theme.background.quaternary};
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  height: ${({ toggleSize }) => (toggleSize === 'small' ? 16 : 20)}px;
+  transition: background-color 0.3s ease;
+  width: ${({ toggleSize }) => (toggleSize === 'small' ? 24 : 32)}px;
+`;
+
+const StyledCircle = styled(motion.div)<{
+  toggleSize: ToggleSize;
+}>`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: 50%;
+  height: ${({ toggleSize }) => (toggleSize === 'small' ? 12 : 16)}px;
+  width: ${({ toggleSize }) => (toggleSize === 'small' ? 12 : 16)}px;
+`;
+
+export type ToggleProps = {
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  color?: string;
+  toggleSize?: ToggleSize;
+};
+
+export const Toggle = ({
+  value,
+  onChange,
+  color,
+  toggleSize = 'medium',
+}: ToggleProps) => {
+  const [isOn, setIsOn] = useState(value ?? false);
+
+  const circleVariants = {
+    on: { x: toggleSize === 'small' ? 10 : 14 },
+    off: { x: 2 },
+  };
+
+  const handleChange = () => {
+    setIsOn(!isOn);
+
+    if (onChange) {
+      onChange(!isOn);
+    }
+  };
+
+  useEffect(() => {
+    if (value !== isOn) {
+      setIsOn(value ?? false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <StyledContainer
+      onClick={handleChange}
+      isOn={isOn}
+      color={color}
+      toggleSize={toggleSize}
+    >
+      <StyledCircle
+        animate={isOn ? 'on' : 'off'}
+        variants={circleVariants}
+        toggleSize={toggleSize}
+      />
+    </StyledContainer>
+  );
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/components/AppThemeProvider.tsx

@@ -0,0 +1,15 @@
+import { ThemeProvider } from '@emotion/react';
+
+import { lightTheme } from '../constants/theme';
+
+type AppThemeProviderProps = {
+  children: JSX.Element;
+};
+
+const AppThemeProvider: React.FC<AppThemeProviderProps> = ({ children }) => {
+  const theme = lightTheme;
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export { AppThemeProvider };

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/accent.ts

@@ -0,0 +1,19 @@
+import { color } from './colors';
+
+export const accentLight = {
+  primary: color.blueAccent25,
+  secondary: color.blueAccent20,
+  tertiary: color.blueAccent15,
+  quaternary: color.blueAccent10,
+  accent3570: color.blueAccent35,
+  accent4060: color.blueAccent40,
+};
+
+export const accentDark = {
+  primary: color.blueAccent75,
+  secondary: color.blueAccent80,
+  tertiary: color.blueAccent85,
+  quaternary: color.blueAccent90,
+  accent3570: color.blueAccent70,
+  accent4060: color.blueAccent60,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts

@@ -0,0 +1,9 @@
+export const animation = {
+  duration: {
+    instant: 0.075,
+    fast: 0.15,
+    normal: 0.3,
+  },
+};
+
+export type AnimationDuration = 'instant' | 'fast' | 'normal';

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/background.ts

@@ -0,0 +1,47 @@
+/* eslint-disable twenty/no-hardcoded-colors */
+import DarkNoise from '../assets/dark-noise.jpg';
+import LightNoise from '../assets/light-noise.png';
+
+import { color, grayScale, rgba } from './colors';
+
+export const backgroundLight = {
+  noisy: `url(${LightNoise.toString()});`,
+  primary: grayScale.gray0,
+  secondary: grayScale.gray10,
+  tertiary: grayScale.gray15,
+  quaternary: grayScale.gray20,
+  danger: color.red10,
+  transparent: {
+    primary: rgba(grayScale.gray0, 0.8),
+    secondary: rgba(grayScale.gray10, 0.8),
+    strong: rgba(grayScale.gray100, 0.16),
+    medium: rgba(grayScale.gray100, 0.08),
+    light: rgba(grayScale.gray100, 0.04),
+    lighter: rgba(grayScale.gray100, 0.02),
+    danger: rgba(color.red, 0.08),
+  },
+  overlay: rgba(grayScale.gray80, 0.8),
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
+};
+
+export const backgroundDark = {
+  noisy: `url(${DarkNoise.toString()});`,
+  primary: grayScale.gray85,
+  secondary: grayScale.gray80,
+  tertiary: grayScale.gray75,
+  quaternary: grayScale.gray70,
+  danger: color.red80,
+  transparent: {
+    primary: rgba(grayScale.gray85, 0.8),
+    secondary: rgba(grayScale.gray80, 0.8),
+    strong: rgba(grayScale.gray0, 0.14),
+    medium: rgba(grayScale.gray0, 0.1),
+    light: rgba(grayScale.gray0, 0.06),
+    lighter: rgba(grayScale.gray0, 0.03),
+    danger: rgba(color.red, 0.08),
+  },
+  overlay: rgba(grayScale.gray80, 0.8),
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts

@@ -0,0 +1,4 @@
+export const blur = {
+  light: 'blur(6px)',
+  strong: 'blur(20px)',
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/border.ts

@@ -0,0 +1,34 @@
+import { color, grayScale } from './colors';
+
+const common = {
+  radius: {
+    xs: '2px',
+    sm: '4px',
+    md: '8px',
+    rounded: '100%',
+  },
+};
+
+export const borderLight = {
+  color: {
+    strong: grayScale.gray25,
+    medium: grayScale.gray20,
+    light: grayScale.gray15,
+    secondaryInverted: grayScale.gray50,
+    inverted: grayScale.gray60,
+    danger: color.red20,
+  },
+  ...common,
+};
+
+export const borderDark = {
+  color: {
+    strong: grayScale.gray55,
+    medium: grayScale.gray65,
+    light: grayScale.gray70,
+    secondaryInverted: grayScale.gray35,
+    inverted: grayScale.gray20,
+    danger: color.red70,
+  },
+  ...common,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/boxShadow.ts

@@ -0,0 +1,27 @@
+import { grayScale, rgba } from './colors';
+
+export const boxShadowLight = {
+  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
+  light: `0px 2px 4px 0px ${rgba(
+    grayScale.gray100,
+    0.04,
+  )}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
+  strong: `2px 4px 16px 0px ${rgba(
+    grayScale.gray100,
+    0.12,
+  )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
+  underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
+};
+
+export const boxShadowDark = {
+  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
+  light: `0px 2px 4px 0px ${rgba(
+    grayScale.gray100,
+    0.04,
+  )}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
+  strong: `2px 4px 16px 0px ${rgba(
+    grayScale.gray100,
+    0.16,
+  )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
+  underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts

@@ -0,0 +1,153 @@
+/* eslint-disable twenty/no-hardcoded-colors */
+import hexRgb from 'hex-rgb';
+
+export const grayScale = {
+  gray100: '#000000',
+  gray90: '#141414',
+  gray85: '#171717',
+  gray80: '#1b1b1b',
+  gray75: '#1d1d1d',
+  gray70: '#222222',
+  gray65: '#292929',
+  gray60: '#333333',
+  gray55: '#4c4c4c',
+  gray50: '#666666',
+  gray45: '#818181',
+  gray40: '#999999',
+  gray35: '#b3b3b3',
+  gray30: '#cccccc',
+  gray25: '#d6d6d6',
+  gray20: '#ebebeb',
+  gray15: '#f1f1f1',
+  gray10: '#fcfcfc',
+  gray0: '#ffffff',
+};
+
+export const mainColors = {
+  yellow: '#ffd338',
+  green: '#55ef3c',
+  turquoise: '#15de8f',
+  sky: '#00e0ff',
+  blue: '#1961ed',
+  purple: '#915ffd',
+  pink: '#f54bd0',
+  red: '#f83e3e',
+  orange: '#ff7222',
+  gray: grayScale.gray30,
+};
+
+export type ThemeColor = keyof typeof mainColors;
+
+export const secondaryColors = {
+  yellow80: '#2e2a1a',
+  yellow70: '#453d1e',
+  yellow60: '#746224',
+  yellow50: '#b99b2e',
+  yellow40: '#ffe074',
+  yellow30: '#ffedaf',
+  yellow20: '#fff6d7',
+  yellow10: '#fffbeb',
+
+  green80: '#1d2d1b',
+  green70: '#23421e',
+  green60: '#2a5822',
+  green50: '#42ae31',
+  green40: '#88f477',
+  green30: '#ccfac5',
+  green20: '#ddfcd8',
+  green10: '#eefdec',
+
+  turquoise80: '#172b23',
+  turquoise70: '#173f2f',
+  turquoise60: '#166747',
+  turquoise50: '#16a26b',
+  turquoise40: '#5be8b1',
+  turquoise30: '#a1f2d2',
+  turquoise20: '#d0f8e9',
+  turquoise10: '#e8fcf4',
+
+  sky80: '#152b2e',
+  sky70: '#123f45',
+  sky60: '#0e6874',
+  sky50: '#07a4b9',
+  sky40: '#4de9ff',
+  sky30: '#99f3ff',
+  sky20: '#ccf9ff',
+  sky10: '#e5fcff',
+
+  blue80: '#171e2c',
+  blue70: '#172642',
+  blue60: '#18356d',
+  blue50: '#184bad',
+  blue40: '#5e90f2',
+  blue30: '#a3c0f8',
+  blue20: '#d1dffb',
+  blue10: '#e8effd',
+
+  purple80: '#231e2e',
+  purple70: '#2f2545',
+  purple60: '#483473',
+  purple50: '#6c49b8',
+  purple40: '#b28ffe',
+  purple30: '#d3bffe',
+  purple20: '#e9dfff',
+  purple10: '#f4efff',
+
+  pink80: '#2d1c29',
+  pink70: '#43213c',
+  pink60: '#702c61',
+  pink50: '#b23b98',
+  pink40: '#f881de',
+  pink30: '#fbb7ec',
+  pink20: '#fddbf6',
+  pink10: '#feedfa',
+
+  red80: '#2d1b1b',
+  red70: '#441f1f',
+  red60: '#712727',
+  red50: '#b43232',
+  red40: '#fa7878',
+  red30: '#fcb2b2',
+  red20: '#fed8d8',
+  red10: '#feecec',
+
+  orange80: '#2e2018',
+  orange70: '#452919',
+  orange60: '#743b1b',
+  orange50: '#b9571f',
+  orange40: '#ff9c64',
+  orange30: '#ffc7a7',
+  orange20: '#ffe3d3',
+  orange10: '#fff1e9',
+
+  gray80: grayScale.gray70,
+  gray70: grayScale.gray65,
+  gray60: grayScale.gray55,
+  gray50: grayScale.gray40,
+  gray40: grayScale.gray25,
+  gray30: grayScale.gray20,
+  gray20: grayScale.gray15,
+  gray10: grayScale.gray10,
+  blueAccent90: '#141a25',
+  blueAccent85: '#151d2e',
+  blueAccent80: '#152037',
+  blueAccent75: '#16233f',
+  blueAccent70: '#17294a',
+  blueAccent60: '#18356d',
+  blueAccent40: '#a3c0f8',
+  blueAccent35: '#c8d9fb',
+  blueAccent25: '#dae6fc',
+  blueAccent20: '#e2ecfd',
+  blueAccent15: '#edf2fe',
+  blueAccent10: '#f5f9fd',
+};
+
+export const color = {
+  ...mainColors,
+  ...secondaryColors,
+};
+
+export const rgba = (hex: string, alpha: number) => {
+  const rgb = hexRgb(hex, { format: 'array' }).slice(0, -1).join(',');
+  return `rgba(${rgb},${alpha})`;
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/effects.ts

@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+
+import { ThemeType } from './theme';
+
+export const overlayBackground = (props: { theme: ThemeType }) =>
+  css`
+    backdrop-filter: blur(8px);
+    background: ${props.theme.background.transparent.secondary};
+    box-shadow: ${props.theme.boxShadow.strong};
+  `;
+
+export const textInputStyle = (props: { theme: ThemeType }) =>
+  css`
+    background-color: transparent;
+    border: none;
+    color: ${props.theme.font.color.primary};
+    font-family: ${props.theme.font.family};
+    font-size: inherit;
+    font-weight: inherit;
+    outline: none;
+    padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${props.theme.font.color.light};
+      font-family: ${props.theme.font.family};
+      font-weight: ${props.theme.font.weight.medium};
+    }
+  `;
+
+export const hoverBackground = (props: any) =>
+  css`
+    transition: background 0.1s ease;
+    &:hover {
+      background: ${props.theme.background.transparent.light};
+    }
+  `;

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/font.ts

@@ -0,0 +1,45 @@
+import { color, grayScale } from './colors';
+
+const common = {
+  size: {
+    xxs: '0.625rem',
+    xs: '0.85rem',
+    sm: '0.92rem',
+    md: '1rem',
+    lg: '1.23rem',
+    xl: '1.54rem',
+    xxl: '1.85rem',
+  },
+  weight: {
+    regular: 400,
+    medium: 500,
+    semiBold: 600,
+  },
+  family: 'Inter, sans-serif',
+};
+
+export const fontLight = {
+  color: {
+    primary: grayScale.gray60,
+    secondary: grayScale.gray50,
+    tertiary: grayScale.gray40,
+    light: grayScale.gray35,
+    extraLight: grayScale.gray30,
+    inverted: grayScale.gray0,
+    danger: color.red,
+  },
+  ...common,
+};
+
+export const fontDark = {
+  color: {
+    primary: grayScale.gray20,
+    secondary: grayScale.gray35,
+    tertiary: grayScale.gray45,
+    light: grayScale.gray50,
+    extraLight: grayScale.gray55,
+    inverted: grayScale.gray100,
+    danger: color.red,
+  },
+  ...common,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts

@@ -0,0 +1,13 @@
+export const icon = {
+  size: {
+    sm: 14,
+    md: 16,
+    lg: 20,
+    xl: 40,
+  },
+  stroke: {
+    sm: 1.6,
+    md: 2,
+    lg: 2.5,
+  },
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts

@@ -0,0 +1,7 @@
+export const modal = {
+  size: {
+    sm: '300px',
+    md: '400px',
+    lg: '53%',
+  },
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/tag.ts

@@ -0,0 +1,55 @@
+import { color } from './colors';
+
+export const tagLight: { [key: string]: { [key: string]: string } } = {
+  text: {
+    green: color.green60,
+    turquoise: color.turquoise60,
+    sky: color.sky60,
+    blue: color.blue60,
+    purple: color.purple60,
+    pink: color.pink60,
+    red: color.red60,
+    orange: color.orange60,
+    yellow: color.yellow60,
+    gray: color.gray60,
+  },
+  background: {
+    green: color.green20,
+    turquoise: color.turquoise20,
+    sky: color.sky20,
+    blue: color.blue20,
+    purple: color.purple20,
+    pink: color.pink20,
+    red: color.red20,
+    orange: color.orange20,
+    yellow: color.yellow20,
+    gray: color.gray20,
+  },
+};
+
+export const tagDark = {
+  text: {
+    green: color.green10,
+    turquoise: color.turquoise10,
+    sky: color.sky10,
+    blue: color.blue10,
+    purple: color.purple10,
+    pink: color.pink10,
+    red: color.red10,
+    orange: color.orange10,
+    yellow: color.yellow10,
+    gray: color.gray10,
+  },
+  background: {
+    green: color.green60,
+    turquoise: color.turquoise60,
+    sky: color.sky60,
+    blue: color.blue60,
+    purple: color.purple60,
+    pink: color.pink60,
+    red: color.red60,
+    orange: color.orange60,
+    yellow: color.yellow60,
+    gray: color.gray60,
+  },
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts

@@ -0,0 +1,13 @@
+export const text = {
+  lineHeight: {
+    lg: 1.5,
+    md: 1.2,
+  },
+
+  iconSizeMedium: 16,
+  iconSizeSmall: 14,
+
+  iconStrikeLight: 1.6,
+  iconStrikeMedium: 2,
+  iconStrikeBold: 2.5,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/theme.ts

@@ -0,0 +1,76 @@
+/* eslint-disable twenty/no-hardcoded-colors */
+import { accentDark, accentLight } from './accent';
+import { animation } from './animation';
+import { backgroundDark, backgroundLight } from './background';
+import { blur } from './blur';
+import { borderDark, borderLight } from './border';
+import { boxShadowDark, boxShadowLight } from './boxShadow';
+import { color, grayScale } from './colors';
+import { fontDark, fontLight } from './font';
+import { icon } from './icon';
+import { modal } from './modal';
+import { tagDark, tagLight } from './tag';
+import { text } from './text';
+
+const common = {
+  color: color,
+  grayScale: grayScale,
+  icon: icon,
+  modal: modal,
+  text: text,
+  blur: blur,
+  animation: animation,
+  snackBar: {
+    success: {
+      background: '#16A26B',
+      color: '#D0F8E9',
+    },
+    error: {
+      background: '#B43232',
+      color: '#FED8D8',
+    },
+    info: {
+      background: color.gray80,
+      color: grayScale.gray0,
+    },
+  },
+  spacingMultiplicator: 4,
+  spacing: (multiplicator: number) => `${multiplicator * 4}px`,
+  betweenSiblingsGap: `2px`,
+  table: {
+    horizontalCellMargin: '8px',
+    checkboxColumnWidth: '32px',
+  },
+  rightDrawerWidth: '500px',
+  clickableElementBackgroundTransition: 'background 0.1s ease',
+  lastLayerZIndex: 2147483647,
+};
+
+export const lightTheme = {
+  ...common,
+  ...{
+    accent: accentLight,
+    background: backgroundLight,
+    border: borderLight,
+    tag: tagLight,
+    boxShadow: boxShadowLight,
+    font: fontLight,
+    name: 'light',
+  },
+};
+export type ThemeType = typeof lightTheme;
+
+export const darkTheme: ThemeType = {
+  ...common,
+  ...{
+    accent: accentDark,
+    background: backgroundDark,
+    border: borderDark,
+    tag: tagDark,
+    boxShadow: boxShadowDark,
+    font: fontDark,
+    name: 'dark',
+  },
+};
+
+export const MOBILE_VIEWPORT = 768;

packages/twenty-chrome-extension/src/utils/handleQueryParams.ts

@@ -0,0 +1,21 @@
+// Convert extracted data into a structure that can be sent to the server for storage.
+const handleQueryParams = (inputData: { [x: string]: unknown }): string => {
+  let result = '';
+  Object.keys(inputData).forEach((key) => {
+    let quote = '';
+    if (typeof inputData[key] === 'string') quote = '"';
+    if (typeof inputData[key] === 'object') {
+      result = result.concat(
+        `${key}: {${handleQueryParams(
+          inputData[key] as { [x: string]: unknown },
+        )}}, `,
+      );
+    } else {
+      result = result.concat(`${key}: ${quote}${inputData[key]}${quote}, `);
+    }
+  });
+  if (result.length) result = result.slice(0, -2); // Remove the last ', '
+  return result;
+};
+
+export default handleQueryParams;

packages/twenty-chrome-extension/src/utils/requestDb.ts

@@ -0,0 +1,29 @@
+const requestDb = async (query: string) => {
+  const { apiKey } = await chrome.storage.local.get('apiKey');
+  const { serverBaseUrl } = await chrome.storage.local.get('serverBaseUrl');
+
+  const options = {
+    method: 'POST',
+    body: JSON.stringify({ query }),
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      Authorization: `Bearer ${apiKey}`,
+    },
+  };
+
+  const response = await fetch(
+    `${
+      serverBaseUrl ? serverBaseUrl : import.meta.env.VITE_SERVER_BASE_URL
+    }/graphql`,
+    options,
+  );
+
+  if (!response.ok) {
+    console.error(response);
+  }
+
+  return await response.json();
+};
+
+export default requestDb;

packages/twenty-chrome-extension/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SERVER_BASE_URL: string;
+  readonly VITE_FRONT_BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

packages/twenty-chrome-extension/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/twenty-chrome-extension/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "package.json", "src/*"]
+}

packages/twenty-chrome-extension/vite.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, Plugin } from 'vite';
+import { crx } from '@crxjs/vite-plugin';
+import react from '@vitejs/plugin-react';
+
+import manifest from './src/manifest';
+
+const viteManifestHack: Plugin & {
+  renderCrxManifest: (manifest: unknown, bundle: unknown) => void;
+} = {
+  // Workaround from https://github.com/crxjs/chrome-extension-tools/issues/846#issuecomment-1861880919.
+  name: 'manifestHack',
+  renderCrxManifest(_manifest, bundle) {
+    bundle['manifest.json'] = bundle['.vite/manifest.json'];
+    bundle['manifest.json'].fileName = 'manifest.json';
+    delete bundle['.vite/manifest.json'];
+  },
+};
+
+export default defineConfig(() => {
+  return {
+    build: {
+      emptyOutDir: true,
+      outDir: 'dist',
+      rollupOptions: {
+        output: { chunkFileNames: 'assets/chunk-[hash].js' },
+      },
+    },
+
+    // Adding this to fix websocket connection error.
+    server: {
+      port: 3002,
+      strictPort: true,
+      hmr: { port: 3002 },
+    },
+
+    plugins: [viteManifestHack, crx({ manifest }), react()],
+  };
+});