DEV Community

fidashigri412-png
fidashigri412-png

Posted on

I Built a Browser Extension That Shows a Quran Verse on Every New Tab — Here's How

#javascript #ai #opensource #showdev

Like a lot of small side projects, this one started with a simple annoyance: every time I opened a new browser tab, I saw nothing useful — just a blank page or a grid of shortcuts I never clicked. I wanted that space to do something more meaningful, even something as small as a moment of reflection before diving back into work.

So I built a lightweight browser extension that shows a verse of Surah Yaseen (a chapter of the Quran) every time a new tab opens — in Arabic, Urdu, and English.

The idea

Keep it minimal, keep it fast, don't make it annoying. No accounts, no unnecessary permissions, no ads, no tracking. Just a clean card with a verse, its translation, and a link to read more.

The build

The whole thing is plain HTML, CSS, and JavaScript — no frameworks, no build step, no bundler. For a project this size, adding webpack or a compiler felt like overkill, and it keeps the entire source trivially easy to audit.

A couple of things worth sharing:

Overriding the new tab page in Manifest V3 is just one line:

{
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  }
}
Enter fullscreen mode Exit fullscreen mode

Rotating the verse daily without any backend or storage — just a pure function seeded by the current date:

function getAyatOfTheDay() {
  const dayIndex = Math.floor(Date.now() / (1000 * 60 * 60 * 24));
  return AYAT_LIST[dayIndex % AYAT_LIST.length];
}
Enter fullscreen mode Exit fullscreen mode

Verse content lives in a single data.js file as a plain array, sourced from the same verses published on SurahYaseen.pk. No database, no API calls, nothing to fetch. It keeps the extension fast and means it works fully offline.

Publishing it

Honestly, this taught me more than the coding did. Edge, Firefox, and Opera each have their own submission process — manifest field length limits, mandatory data-collection disclosures, single-purpose descriptions, and different review turnarounds (Edge took about a week, Firefox and Opera were quicker). None of it was hard, just a lot of small, store-specific checklists to get through.

Where it stands now

It's free, open source (MIT licensed), and live on multiple browser stores:

It's a small project, but a nice reminder that not every useful thing needs to be complicated.

Have you built any small tools like this — something simple that scratched a personal itch? Would love to hear about it in the comments.

Top comments (0)