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>
2024-02-12 16:30:23 +05:00
parent a15128df36
commit 1265dc74d0
59 changed files with 2103 additions and 10 deletions
--- a/packages/twenty-chrome-extension/src/contentScript/extractPersonProfile.ts
+++ b/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;