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.

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.

---

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.