<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: fidashigri412-png</title>
    <description>The latest articles on DEV Community by fidashigri412-png (@fidashigri412png).</description>
    <link>https://dev.to/fidashigri412png</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4083107%2F82e2ddc5-9299-4707-b69e-0c8cda855157.png</url>
      <title>DEV Community: fidashigri412-png</title>
      <link>https://dev.to/fidashigri412png</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/fidashigri412png"/>
    <language>en</language>
    <item>
      <title>I Built a Browser Extension That Shows a Quran Verse on Every New Tab — Here's How</title>
      <dc:creator>fidashigri412-png</dc:creator>
      <pubDate>Tue, 18 Aug 2026 11:30:40 +0000</pubDate>
      <link>https://dev.to/fidashigri412png/i-built-a-browser-extension-that-shows-a-quran-verse-on-every-new-tab-heres-how-6i7</link>
      <guid>https://dev.to/fidashigri412png/i-built-a-browser-extension-that-shows-a-quran-verse-on-every-new-tab-heres-how-6i7</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  The idea
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  The build
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;A couple of things worth sharing:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Overriding the new tab page&lt;/strong&gt; in Manifest V3 is just one line:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"chrome_url_overrides"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"newtab"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"newtab.html"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Rotating the verse daily&lt;/strong&gt; without any backend or storage — just a pure function seeded by the current date:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getAyatOfTheDay&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dayIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;AYAT_LIST&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;dayIndex&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="nx"&gt;AYAT_LIST&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Verse content lives in a single &lt;code&gt;data.js&lt;/code&gt; file as a plain array, sourced from the same verses published on &lt;a href="https://surahyaseen.pk" rel="noopener noreferrer"&gt;SurahYaseen.pk&lt;/a&gt;. No database, no API calls, nothing to fetch. It keeps the extension fast and means it works fully offline.&lt;/p&gt;

&lt;h2&gt;
  
  
  Publishing it
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where it stands now
&lt;/h2&gt;

&lt;p&gt;It's free, open source (MIT licensed), and live on multiple browser stores:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Source code: &lt;a href="https://github.com/facteye6-dot/surahyaseen-extension" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Install: &lt;a href="https://microsoftedge.microsoft.com/addons/detail/surah-yaseen-quick-access/nmkpcmfmoilejhlidfmjdiadmhjmncgn" rel="noopener noreferrer"&gt;Microsoft Edge Add-ons&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's a small project, but a nice reminder that not every useful thing needs to be complicated.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Have you built any small tools like this — something simple that scratched a personal itch? Would love to hear about it in the comments.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>javascript</category>
      <category>ai</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
