https://www.justbeepit.com/ started as a web annotation tool that I hacked together with a friend. Now, it’s a full-fledged visual task management platform with over 2,000 users.
In 2022, I wondered what it would be like if my manager could leave comments directly on the live website for all the edits, rather than sending a bunch of screenshots and videos. That’s how I came up with the idea for a "simple" browser extension that lets you leave comments on any site, anywhere on the screen.
There were several challenges along the way:
Attaching Comments to the Correct HTML Element: I initially struggled with ensuring comments were attached to the right element, as relying on X/Y coordinates would not be responsive. Now, I use a combination of element IDs, classes, outer HTML, and attributes. This approach works correctly 95% of the time. Do you know of any other methods to find the correct element in the DOM?
No Third-Party Libraries: Extension development only allows pure HTML, CSS, and JS, with no external scripts from CDNs. Building a text editor from scratch was one of the most challenging parts.
Real-Time Functionality: Keeping the extension's background page active was tough because it deactivates when not in use, making it almost impossible to maintain a socket connection. I wrote code to wake up the background page and reconnect the socket whenever it goes to sleep.
I stopped all my freelance projects, and now three other people and I work on this tool full-time. We recently became #1 on Product Hunt: JustBeepIt.com
There are still many issues we're working on, such as using it with iFrames or inside scrollable objects, but we're tackling these challenges one by one.
In 2022, I wondered what it would be like if my manager could leave comments directly on the live website for all the edits, rather than sending a bunch of screenshots and videos. That’s how I came up with the idea for a "simple" browser extension that lets you leave comments on any site, anywhere on the screen.
There were several challenges along the way:
Attaching Comments to the Correct HTML Element: I initially struggled with ensuring comments were attached to the right element, as relying on X/Y coordinates would not be responsive. Now, I use a combination of element IDs, classes, outer HTML, and attributes. This approach works correctly 95% of the time. Do you know of any other methods to find the correct element in the DOM?
No Third-Party Libraries: Extension development only allows pure HTML, CSS, and JS, with no external scripts from CDNs. Building a text editor from scratch was one of the most challenging parts.
Real-Time Functionality: Keeping the extension's background page active was tough because it deactivates when not in use, making it almost impossible to maintain a socket connection. I wrote code to wake up the background page and reconnect the socket whenever it goes to sleep.
I stopped all my freelance projects, and now three other people and I work on this tool full-time. We recently became #1 on Product Hunt: JustBeepIt.com
There are still many issues we're working on, such as using it with iFrames or inside scrollable objects, but we're tackling these challenges one by one.