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/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;