Tadabbur: Quranic Reflection Chrome Extension

TL;DR

I built and shipped Tadabbur, a Chrome new-tab extension that turns browser openings into moments of Quranic reflection. Instead of news feeds and distractions, each new tab shows a verse with Arabic text, English translation, a short Ibn Kathir excerpt, an AI-assisted commentary, a reflection question, and a full-screen nature image.

The extension was intentionally built with no framework, no build step, and no external services. It is fully offline and privacy-first by design.

Update: Tadabbur 1.1.0 introduces My Journal, a private space to record your thoughts as you read and reflect. See What’s New in 1.1.0 below.

If you want to try it now, View Chrome extension.

---

Why I Built This

Ramadan is when I try to increase Quran recitation and reflection, but daily browsing habits make that difficult. I noticed the same pattern each day: open browser, start work, lose intentionality.

So I designed a small intervention at the point of highest repetition, the new tab page.

The core product question was simple:

Can opening a new tab become a reminder to pause and reflect, not scroll?

---

What Tadabbur Does

Tadabbur replaces Chrome’s default new tab page with curated Quranic reflections.

Each reflection includes:

• Arabic ayah text
• English translation
• Brief Ibn Kathir tafsir excerpt
• AI-assisted modern commentary
• Reflection question
• Paired full-screen nature background

The first release ships with 32 hand-curated ayahs from a local reflections.json content file.

---

Interface Context

To make the reflection flow practical without adding noise, the extension keeps controls accessible but secondary to the ayah content.

Settings Sidebar

The sidebar gives quick access to reflection controls like Arabic text visibility, reflection question toggle, font size, and refresh behavior.

About Modal

The about modal introduces the purpose of Tadabbur with minimal copy so first-time users understand the experience before they begin.

---

Product Decisions That Improved Focus

1. No-Repeat Verse Cycle

Using chrome.storage.local, the extension tracks displayed ayahs and cycles through all 32 before repeating. This avoids stale repetition and keeps daily use fresh.

2. Daily Lock Mode

Users can switch to “once per day” mode, where the same ayah remains visible until midnight. This encourages deeper reflection over fast content cycling.

3. Save as Image (1080 x 1080)

With the Canvas API, users can export the current reflection card as a downloadable PNG for sharing or saving. Rendering happens entirely in-browser with no backend dependency.

4. Fully Offline by Default

All assets are bundled inside the extension:

• Fonts (Amiri for Arabic, Inter for interface text)
• Nature images
• Reflection content JSON

No internet is required after installation.

5. Privacy-First Constraints

There is no analytics, no account system, and no remote sync. Persistence is local-only through chrome.storage.local.

---

What’s New in 1.1.0: My Journal

Tadabbur 1.1.0 adds My Journal, a private space to record your thoughts as you read and reflect. Reflection works best when you can capture it in the moment, so the journal lives right inside the new tab experience.

Capture Your Reflections

Write about the ayah currently displayed, or add a general reflection that is not linked to a particular verse. Each reflection is stored as a separate entry, so previous thoughts are never overwritten.

Search and Revisit Your Journal

View all your reflections in one place, together with the relevant ayah and translation. You can search your entries and edit them directly whenever you want to expand or refine a thought.

Build a Gentle Rhythm

A simple seven-day view shows how often you have taken time to reflect recently. No streaks. No pressure. Just a quiet record: you reflected on five of the last seven days.

Private by Design

Your journal is stored locally in your Chrome profile. There are no accounts, no external servers, and your reflections are never sent anywhere. You can export them as Markdown or create a JSON backup at any time. Your words remain yours.

---

Final Thoughts

Tadabbur is a small product, but it reflects how I like to build:

1. Start from a real behavior problem
2. Design for intentional outcomes, not feature count
3. Keep architecture simple enough to ship quickly
4. Protect user privacy by default

If you want to see similar build work, browse my portfolio, and if you want to try Tadabbur, View Chrome extension.