Add popup donation prompt

public/_locales/en/messages.json

@@ -787,6 +787,9 @@
     "Donate": {
         "message": "Donate"
     },
+    "considerDonating": {
+        "message": "Help fund development"
+    },
     "hideDonationLink": {
         "message": "Hide Donation Link"
     },

public/icons/heart.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="heart.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="32.916667"
+     inkscape:cx="11.98481"
+     inkscape:cy="12.01519"
+     inkscape:window-width="1366"
+     inkscape:window-height="731"
+     inkscape:window-x="1366"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M0 0h24v24H0V0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"
+     id="path4"
+     style="fill:#800000" />
+</svg>

public/popup.css

@@ -393,7 +393,7 @@ label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponso
 
 /* footer */
 
-#sbFooter > a {
+#sbFooter a {
   color: var(--sb-main-fg-color);
   text-decoration: none;
 }

public/popup.html

@@ -138,6 +138,14 @@
           <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
       </div>
       <footer id="sbFooter">
+        <div id="sponsorTimesDonateContainer" style="display: none; align-items: center;">
+          <img src="/icons/heart.svg"/>
+          <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
+            __MSG_considerDonating__
+          </a>
+          <img id="sbCloseDonate" src="/icons/close.png" height="8px" style="padding-left: 5px; cursor: pointer;"/>
+        </div>
+
         <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a> |
         <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a> |
         <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>