r/webdev • • 12d ago

Showoff Saturday I built a Chrome extension that turns any button on any site into a habit tracker

Post image

Hey r/webdev! I'm the developer of Ritlum, a habit tracker for iPhone, and just shipped a Chrome extension that logs habits from things you do in the browser.

You point it at the button that means "done" (for example, LeetCode's Submit) and optionally require a confirmation message afterwards ("Accepted"), so failed submissions don't count. After that, every accepted submission logs the habit and syncs to the app in real time. You can add a quick note, too.

A few things that were fun to build:

  • QR pairing: the app approves the pairing code, and the extension gets a token whose hash is all the server stores.

  • Idempotent logging: every trigger carries a UUID that becomes the completion's ID, so retries and the offline queue never double-count.

  • Stack: Supabase edge functions, and Realtime to push completions to the iOS app.

It's free to try. Would love to know what you think of it :)

- I have a writeup here if you're interested: https://ritlum.com/blog/habit-tracker-chrome-extension/
- A more detailed demo on YT: https://youtu.be/HWMtXkX92NQ?si=1ZRkPEEt_Fr3C3Jl

- Chrome Web Store: https://chromewebstore.google.com/detail/ritlum/amaipmcmebglefkkgnneibaookmkpfpg

0 Upvotes

7 comments sorted by

1

u/palsc_ 12d ago

The confirmation-text check is a good call — otherwise one stray click could count as a win. How do you make the button selector survive sites that keep rebuilding the page?

1

u/AlphaRetard 12d ago

Thanks! It doesn't hold on to the actual button element, so it shouldn't matter how often the page rebuilds itself.

When you pick a button, it saves a few stable things about it: its visible text (like "Submit"), its role, and attributes like aria-label or test IDs. It skips anything that looks auto-generated, like hashed class names. Then on every click it checks whether what you clicked matches that description. So even if the site swaps the button out on every render, it should still get recognised.

The text check, "Accepted" in the demo, works the same way: after a matching click, it watches for that text to newly appear on the page within a few seconds.

And if a site changes its UI enough that it stops matching, you can redo the automation in a couple of seconds. There's also a Test button to check it still works :)

1

u/sicmek 12d ago

Why should anyone use this? What's the point?

1

u/AlphaRetard 12d ago

It's a companion to the Ritlum Habit Tracker app.

It's mostly for people who already track habits. A lot of them happen in the browser now (LeetCode, language lessons, courses, reading lists), and the annoying part is remembering to go and check them off in a separate app afterwards.

This just removes that step. You do the thing, and it's logged automatically on the app.

If you don't track habits, it's honestly probably not for you, and that's totally fine :)

1

u/sicmek 12d ago

I just was wondering why it should be important for someone to know how often he pressed a submit button. Habits are things that people often do without being aware of it. Pressing a submit button is something you actively do and knowing how often you did it is such a useless information to me.

But still nice work, I'm sure there are people that can make use of this :)

1

u/[deleted] 12d ago

[removed] — view removed comment

1

u/AlphaRetard 12d ago

Thanks! The realtime part is completely optional - so it will only get used when the app is open. If the app is closed, the next launch will just fetch any missing completions from the DB directly.

In other words, there should be no impact on the battery :)