Closes #2413 - Building a chrome extension for twenty to store person/company data into a workspace. #3430
Conversation
…g to store data without setting a key
… development server working
…s page to inform users of their choices
…tier configuration in codebase
…rd-to-understand parts of the code
CLA
Hello there and welcome to our project! |
|
@mabdullahabaid We have not forgotten your PR, this will be reviewed early this week! It's a big one! |
|
@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. |
|
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 |
…to the chrome web store
|
No worries about the delay. I rechecked .gitignore and found that 'dist' is already part of the file on Line 11 😅 |
There was a problem hiding this comment.
@mabdullahabaid This is great work. I am sorry it took us so long to review, we were prioritizing the 0.3.0 release. This can be included in 0.3.1 later this week
As next steps here is what I see:
- extract twenty-ui so it can be leverage here
- add linter
- add tests
We are going to merge it as it is and iterate from there
| @@ -0,0 +1,45 @@ | |||
| import { color, grayScale } from './colors'; | |||
There was a problem hiding this comment.
this will need to be refactored once we extract twenty-ui into it's own package
There was a problem hiding this comment.
I had a conversation with Felix about “twenty-ui” back in December, but it was not among the top priorities at that time. Therefore, I replicated this code. However, when you start extracting things out, I’d be happy to contribute to the UI library and refactor the code to utilize it - not a problem.
|
@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. |
|
@mabdullahabaid Feel free to add issues, we can collaborate on these |
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.
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.tsandpackages/twenty-chrome-extension/src/contentScript/index.tsfor 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.