[EN/PT-BR] Developing a browser extension and mobile app: Medicine Time.

Unsplash

It's been three days since I last posted anything. Since I started interacting with Claude IA and discovered the wonders of Claude Code, I've been focusing on creating and building applications that aim to improve people's productivity or routines, trying in a way to offer high-performance applications at cost price.

The idea is to always try to make things cost R$10, whether it's a lifetime purchase or a premium subscription. Perhaps I can make something more complex for R$20, but for me, I want quantity instead of high value, at least for now in the beginning.

The browser extension is called "Medicine Time" and I'm still finishing building it, fixing some details and things like that. I still need to publish it on the Chrome Web Store and I think they'll accept it without problems. After that, it's time to move on to the mobile app, focusing on Android and then, if I can somehow manage it, iOS.

---

---

---

---

The summary below was created by CLAUDE, with some revisions and changes on my part!

• The Idea

It seems simple: taking medication at the right time. But anyone undergoing ongoing treatment—or caring for someone who does—knows it's harder than it looks. Mobile apps abound, but I wanted something that would stay where I spend most of my time: in the browser, working.

A Chrome extension that triggers alarms, shows operating system notifications, plays a sound, and displays an animated banner on the pages I'm browsing. All synchronized with my Google account, working on any computer.

• The Stack

The project is a monorepo with three packages:

packages/extension — the Chrome extension itself, made with React + TypeScript + Vite
packages/shared — shared library with types, business logic, and access to Firebase
packages/functions — Firebase Cloud Functions for payment processing
The backend is 100% Firebase: Firestore for data, Authentication with Google, Cloud Functions for Stripe, Hosting for payment return pages.

• What was built

Medication Registration

Complete form with name, dosage (tablet, drop, capsule, mL, sachet, ampoule), frequency (4h, 6h, 8h, 12h or once a day), treatment duration (3 days to continuous use) and start time with date and time selector. Each medication has a color for visual identification.

Alarm System

The most complex part. Chrome has an alarm API with a minimum delay of 60 seconds, but the big challenge was a race condition: if the service worker is killed by Chrome (which happens frequently with Manifest V3) and revived exactly when an alarm triggers, the notification data needs to be in storage before the alarm is created—not after. I fixed this by saving everything to chrome.storage.local first and only then registering the alarms.

Three-Layered Notifications

When it's time for your medication, three things happen simultaneously:

• Operating system notification — with "✅ Taken!" and "⏰ Remind me in 15 min" buttons

• Nine beep sounds — three groups of three notes (C-E-G) played via Web Audio API in an offscreen document, since service workers don't have access to audio

• Sliding visual toast — appears in the lower right corner of all open tabs, even tabs that were opened before the extension was installed (solved by injecting the toast directly into the DOM via executeScript)

• Dynamic badge: The extension icon displays a red number with the number of doses remaining. It persists even if the service worker is restarted by Chrome — restored by reading the storage at startup.

---

---

---

• 15-Minute Snooze

Clicking "Remind me in 15 min" creates a new Chrome alarm with a special prefix and saves the dose data. When it goes off, it displays the notification normally.

• Drag and Drop

The medication list supports drag-and-drop reordering, with the order saved in localStorage.

• Dose History

Every time the user clicks "Taken!" — whether on the popup banner, the tab toast, or the OS notification button — the dose is recorded in Firestore with the medication name, quantity, color, and exact time. The history is displayed grouped by date. Free plan: last 7 days. Premium plan: 90 days.

• Light and dark theme

Toggle in header, preference saved in localStorage.

• Terms of use

Full modal on the login screen with eight sections.

---

---

---

Monetization with Stripe

I implemented a freemium model:

• Free plan:

Up to 3 registered medications
Reminder notifications
Synchronization via Google on any device
History of the last 7 days

• Premium plan (R$9.90/month or R$79.90/year):

Unlimited medications
History of the last 90 days
Family sharing (holder + 1 guest)
Export report in PDF for the doctor (coming soon)

Payment uses hosted Stripe Checkout — the extension opens a tab with the Stripe payment page via chrome.tabs.create, the Cloud Function creates the session, the Stripe webhook confirms and updates Firestore in real time. The popup detects the change via onSnapshot and instantly unlocks premium features.

• Family Sharing

One of the features I most enjoyed designing. The premium account holder generates a 6-digit code and shares it with a family member or caregiver. The guest enters the code and can then see the account holder's medications on their own home screen—in read-only mode.

The technical challenge: I needed a separate inviteCodes collection in Firestore with public readability for authenticated users. Searching directly in users by field would be blocked by security rules (which only allow each user to read their own profile).

• Interesting bugs I solved

Race condition in alarms: data saved after creating the alarm caused notifications without content when the service worker revived. Solution: reverse the order, always save before.

Toast not appearing in old tabs: after reloading the extension, open tabs retained window.__hdrToastLoaded = true from a dead listener. Solution: in the fallback, inject the toast directly into the DOM via executeScript with a self-contained function, without depending on any previous state.

Today's date showing tomorrow: new Date().toISOString() returns UTC — in UTC-3, at 10 PM "today" in UTC is already "tomorrow". Solution: use getFullYear(), getMonth(), getDate() to construct the local date.

Double-log in history: when clicking "I took it!" on the popup banner, the log was saved twice — once directly by the popup and again via the service worker queue. Solution: Separate the two paths — popup saves directly, service worker queues only when acting independently (OS notification).

---

---

---

• The Process

All development was done in partnership with Claude Code, from Anthropic. It's an AI tool that runs in the terminal and has access to the file system, being able to read, edit and create files, run commands, search the code and reason about architecture.

• Next Steps

Export PDF report of dose history (premium feature)
Treatment adherence statistics
Support for multiple profiles (for caregivers)
If you have someone in your family who needs help remembering their medication, or if you yourself have ongoing treatment, this extension was made with you in mind.

Medication Time — because taking care of your health starts with consistency.

Built with React, TypeScript, Firebase, Stripe and Chrome Extensions Manifest V3.

That's it, chasing after creating something profitable and monetizing it, but obviously delivering a decent product as well, that's very interesting and I've been focusing on that instead of Hive for now.

Unsplash

Faz três dias que não posto nada, desde que comecei a minha interação com a Claude IA e descobri as maravilhas do Claude Code, tenho focado exatamente em criar e construir aplicações que visam melhorar a produtividade ou rotina das pessoas, tentando de certa forma oferecer aplicações de alta perfomance a preço de custo.

A ideia é tenta sempre fazer as coisas saírem a R$10, seja compra vitalícia ou assinatura premium. Talvez algo mais complexo faço a R$20, mas para mim, quero quantidade no lugar de valor alto, pelo menos agora no começo.

A extensão de navegador se chama "Hora do Remédio" e ainda estou terminando de construir ela, ajeitando alguns detalhes e coisas do tipo. Ainda preciso publicar ela no Chrome Web Store e acho que vão aceitar de boa. Depois disso, é partir para o aplicativo de celular, com foco em Android e depois se eu conseguir de alguma forma, IOS.

---

---

---

---

O resumo abaixo foi criado pela CLAUDE, com algumas revisões e alterações por minha parte!

• A ideia

Parece simples: tomar remédio no horário certo. Mas quem tem tratamento contínuo — ou cuida de alguém que tem — sabe que é mais difícil do que parece. Aplicativos de celular existem aos montes, mas eu queria algo que ficasse onde passo a maior parte do meu tempo: no navegador, trabalhando.

Uma extensão Chrome que dispara alarmes, mostra notificações do sistema operacional, toca um som e exibe um banner animado nas páginas que estou navegando. Tudo sincronizado com a minha conta Google, funcionando em qualquer computador.

• A stack

O projeto é um monorepo com três pacotes:

packages/extension — a extensão Chrome em si, feita com React + TypeScript + Vite
packages/shared — biblioteca compartilhada com tipos, lógica de negócio e acesso ao Firebase
packages/functions — Firebase Cloud Functions para o processamento de pagamentos
O backend é 100% Firebase: Firestore para os dados, Authentication com Google, Cloud Functions para o Stripe, Hosting para as páginas de retorno do pagamento.

• O que foi construído

Cadastro de medicamentos

Formulário completo com nome, dosagem (comprimido, gota, cápsula, mL, sachê, ampola), frequência (4h, 6h, 8h, 12h ou 1x ao dia), duração do tratamento (3 dias a uso contínuo) e horário de início com seletor de data e hora. Cada medicamento tem uma cor para identificação visual.

Sistema de alarmes

A parte mais complexa. O Chrome tem uma API de alarmes com mínimo de 60 segundos de delay, mas o grande desafio foi uma race condition: se o service worker for morto pelo Chrome (o que acontece frequentemente com Manifest V3) e renascido exatamente quando um alarme dispara, os dados da notificação precisam estar no storage antes do alarme ser criado — não depois. Corrigi isso salvando tudo no chrome.storage.local primeiro e só então registrando os alarmes.

Notificações em três camadas

Quando chega a hora do remédio, acontecem três coisas ao mesmo tempo:

• Notificação do sistema operacional — com botões "✅ Tomei!" e "⏰ Lembrar em 15 min"

• Nove bipes sonoros — três grupos de três notas (dó-mi-sol) tocados via Web Audio API em um documento offscreen, já que service workers não têm acesso a áudio

• Toast visual deslizante — aparece no canto inferior direito de todas as abas abertas, mesmo em abas que foram abertas antes da extensão ser instalada (resolvido injetando o toast diretamente no DOM via executeScript)

• Badge dinâmico: O ícone da extensão exibe um número vermelho com a quantidade de doses pendentes. Persiste mesmo se o service worker for reiniciado pelo Chrome — restaurado lendo o storage na inicialização.

---

---

---

• Snooze de 15 minutos

Ao clicar em "Lembrar em 15 min", cria um novo alarme do Chrome com prefixo especial e salva os dados da dose. Quando dispara, rexibe a notificação normalmente.

• Arrastar e soltar

A lista de medicamentos suporta reordenação por drag-and-drop, com a ordem salva no localStorage.

• Histórico de doses

Toda vez que o usuário clica "Tomei!" — seja no banner do popup, no toast da aba ou no botão da notificação OS — a dose é registrada no Firestore com nome do medicamento, quantidade, cor e horário exato. O histórico é exibido agrupado por data. Plano free: últimos 7 dias. Plano premium: 90 dias.

• Tema claro e escuro

Toggle no header, preferência salva no localStorage.

• Termos de uso

Modal completo na tela de login com oito seções.

---

---

---

Monetização com Stripe

Implementei um modelo freemium:

• Plano gratuito:

Até 3 medicamentos cadastrados
Notificações de lembrete
Sincronização via Google em qualquer dispositivo
Histórico dos últimos 7 dias

• Plano premium (R$9,90/mês ou R$79,90/ano):

Medicamentos ilimitados
Histórico dos últimos 90 dias
Compartilhamento familiar (titular + 1 convidado)
Exportar relatório em PDF para o médico (em breve)

O pagamento usa Stripe Checkout hospedado — a extensão abre uma aba com a página de pagamento do Stripe via chrome.tabs.create, a Cloud Function cria a sessão, o webhook do Stripe confirma e atualiza o Firestore em tempo real. O popup detecta a mudança via onSnapshot e libera os recursos premium instantaneamente.

• Compartilhamento familiar

Uma das features que mais gostei de projetar. O titular premium gera um código de 6 dígitos e compartilha com um familiar ou cuidador. O convidado entra com o código e passa a ver os medicamentos do titular na própria tela inicial — em modo somente leitura.

O desafio técnico: precisei de uma coleção separada inviteCodes no Firestore com leitura pública para usuários autenticados. Buscar diretamente em users por um campo seria bloqueado pelas security rules (que só permitem que cada usuário leia o próprio perfil).

• Bugs interessantes que resolvi

Race condition nos alarmes: dados salvos após criar o alarme causavam notificações sem conteúdo quando o service worker renascia. Solução: inverter a ordem, salvar sempre antes.

Toast não aparecia em abas antigas: após recarregar a extensão, abas abertas mantinham window.__hdrToastLoaded = true de um listener morto. Solução: no fallback, injetar o toast diretamente no DOM via executeScript com uma função auto-contida, sem depender de nenhum estado anterior.

Data de hoje mostrando amanhã: new Date().toISOString() retorna UTC — em UTC-3, às 22h o "hoje" em UTC já é "amanhã". Solução: usar getFullYear(), getMonth(), getDate() para construir a data local.

Double-log no histórico: ao clicar "Tomei!" no banner do popup, o log era salvo duas vezes — uma diretamente pelo popup e outra via fila do service worker. Solução: separar os dois caminhos — popup salva direto, service worker enfileira apenas quando age de forma independente (notificação OS).

---

---

---

• O processo

Todo o desenvolvimento foi feito em parceria com o Claude Code, da Anthropic. É uma ferramenta de IA que roda no terminal e tem acesso ao sistema de arquivos, podendo ler, editar e criar arquivos, rodar comandos, fazer buscas no código e raciocinar sobre arquitetura.

• Próximos passos

Exportar relatório PDF do histórico de doses (feature premium)
Estatísticas de adesão ao tratamento
Suporte a múltiplos perfis (para cuidadores)
Se você tem alguém na família que precisa de ajuda para lembrar dos remédios, ou se você mesmo tem um tratamento contínuo, essa extensão foi feita pensando em você.

Hora do Remédio — porque cuidar da saúde começa com consistência.

Construído com React, TypeScript, Firebase, Stripe e Chrome Extensions Manifest V3.

---

É isso, correr atrás de criar algo rentável e monetizar, mas que obviamente, entregue um produto decente também, isso está bem interessante e tenho focado nisso em vez da Hive por enquanto.

---

Follow me on X (Formerly Twitter)

🔥Please, consider helping by using my reference links🔥