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