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

[mabdullahabaid]

The first version of the chrome extension. This project uses DOM scraping to extract data from the page.

There are three parts to this application.

• Background.
• Content Script.
• Options.

The communication between the three is ensured by emitting an event from one part and listening for it in the other, when and where needed. Extension specific local storage also plays a significant role by storing the API key and the custom server route. The user can enter both of these on the options page, where they get stored to the local storage. Then, these values are accessed by the content script before making a request to the server.

The Options page has two responsibilities, which are to receive user input for API key and custom server route as mentioned earlier. This page is built with the help of React and is the only part of the application dependent on React.

The Background script continues to run in the background of a chrome extension. This script primarily controls the functioning of the chrome extension, such as opening the options page upon install or upon click of the extension icon. The script is also responsible for maintaining a data structure to inform the content script if a button must be created in the currently active tab - see comments in packages/twenty-chrome-extension/src/background/index.ts and packages/twenty-chrome-extension/src/contentScript/index.ts for a better understanding.

The content script itself is responsible for creating the button on the required page, scraping data from the DOM, creating an object from that data, and then sending a request to the server with the scraped data. It accesses the API key stored in the local storage and sends a request to the relevant workspace when the button is clicked.

[github-actions[bot]]

CLA

Hello there and welcome to our project! By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement. Although we don't have a dedicated legal counsel, having this kind of agreement can protect us from potential legal issues or patent trolls. Thank you for your understanding.

Generated by :no_entry_sign: dangerJS against 8ab63e133eec9bba3efeebce17b93fb397a31959

[charlesBochet]

@mabdullahabaid We have not forgotten your PR, this will be reviewed early this week! It's a big one!

[mabdullahabaid]

@charlesBochet Take all the time you need, no worries.

There must be a ton of work on your end to stabilize the release, and prioritizing is perhaps the most important thing in product development. Happy to wait till you get through the critical issues.

[FelixMalfait]

Sorry for the very long delay. I've compiled the app and asked for publication on the Chrome store today. Not sure how long it will take but hopefully it should be there soon! One very minor comment is that the /dist folder could be in .gitignore

[mabdullahabaid]

No worries about the delay. I rechecked .gitignore and found that 'dist' is already part of the file on Line 11 😅

[mabdullahabaid]

@charlesBochet Thank you so much! Glad to see “twenty-chrome-extension” inside the main repository - it was worth the wait :D

I have a follow up question: should I start creating issues based on what you mentioned or do you guys want to create them yourself to follow some internal iteration roadmap (+ add instructions to each)?

Oh, and also, I will try to keep up with the issues on Github, but if there is something you think I can/should help with, please ping me without hesitation.

[charlesBochet]

@mabdullahabaid Feel free to add issues, we can collaborate on these I know @FelixMalfait and @AdityaPimpalkar are working on it