In 2022 I asked myself, what if my manager could leave comments for me directly on the live website for all the website edits instead of sending bunch of screenshots and videos...
This is how I started with an idea of a "simple" browser extension that allows you to leave comments on any site, anywhere on the screen.
Spoiler, it was not SIMPLE
There were multiple steps where I though this is almost impossible:
1. I didn't know how to always attach the comment to the correct HTML element on the screen, I couldn't just use X/Y positions since then it wouldn't be responsive. Currently I have 4 ways I try to find the correct element. I use element's IDs, class , outerhtml and attributes. It works correctly in 95% of cases. P.s. Do you know any other ways to find the correct element in the DOM?
2. Not being able to use any 3rd party library for extension development since it is just pure HTML, CSS and JS... You can't even use scripts from CDN. I had to manually build a text editor which was one of the most painful things I had to.
3. Making it real time was another big pain. Extensions background page gets deactivated when not used, which means it is literally impossible to maintain a socket connection. But I was able to write a code that wakes up the background page every time it goes to sleep and connects the socket again.
I stopped all of my freelance projects and now me and 3 other people work on this tool full time, we recently became #1 on Product Hunt: "https://www.justbeepit.com/"
There are still many issues we are trying to solve such as using it on iFrames or inside scrollable objects, etc.. but we are tackling these issues one by one.
This is how I started with an idea of a "simple" browser extension that allows you to leave comments on any site, anywhere on the screen.
Spoiler, it was not SIMPLE
There were multiple steps where I though this is almost impossible: 1. I didn't know how to always attach the comment to the correct HTML element on the screen, I couldn't just use X/Y positions since then it wouldn't be responsive. Currently I have 4 ways I try to find the correct element. I use element's IDs, class , outerhtml and attributes. It works correctly in 95% of cases. P.s. Do you know any other ways to find the correct element in the DOM?
2. Not being able to use any 3rd party library for extension development since it is just pure HTML, CSS and JS... You can't even use scripts from CDN. I had to manually build a text editor which was one of the most painful things I had to.
3. Making it real time was another big pain. Extensions background page gets deactivated when not used, which means it is literally impossible to maintain a socket connection. But I was able to write a code that wakes up the background page every time it goes to sleep and connects the socket again.
I stopped all of my freelance projects and now me and 3 other people work on this tool full time, we recently became #1 on Product Hunt: "https://www.justbeepit.com/"
There are still many issues we are trying to solve such as using it on iFrames or inside scrollable objects, etc.. but we are tackling these issues one by one.