rate link

_locales/en/messages.json

@@ -911,6 +911,12 @@
     "hide_links": {
         "message": "Hide links"
     },
+    "rate_us_chrome": {
+        "message": "Enjoying the extension? Rate us on the Chrome Web Store!"
+    },
+    "rate_us_firefox": {
+        "message": "Enjoying the extension? Rate us on Firefox Add-ons!"
+    },
     "hide_navbar": {
         "message": "Hide Navigation Bar"
     },

css/content.css

@@ -618,3 +618,9 @@
 .cr-quote-mark {font-size:clamp(20px,11cqw,44px);line-height:.5;font-weight:800;color:color-mix(in srgb, var(--bclinks,#0374b5) 55%, transparent);}
 .cr-quote-text {margin:0;font-size:clamp(14px,7.5cqw,26px);line-height:1.45;font-style:italic;color:var(--bctext-0,#2d3b45);}
 .cr-quote-author {font-size:clamp(11px,3.6cqw,17px);font-weight:600;color:var(--bctext-2,#9aa3ab);align-self:flex-end;}
+
+/* Canvas' SpeedGrader/document preview container: give the preview 80% of its
+   parent instead of Canvas' default height. */
+#doc_preview {
+    height: 80% !important;
+}

css/popup.css

@@ -129,6 +129,9 @@ h2 {margin-top: 20px;font-weight:600}
 .social-toggle {text-align: center;font-size: 12px;color: #9a9a9a;cursor: pointer;user-select: none;transition: .15s color;text-decoration: underline;text-underline-offset: 3px;padding: 4px 10px;border-radius: 6px;}
 .social-toggle:hover {color: #e2e2e2;background: #ffffff0a;}
 .social-buttons.hidden {display: none}
+.rate-link {font-size: 12px;color: #9a9a9a;text-align: center;text-decoration: underline;text-underline-offset: 3px;font-weight: 600;padding: 2px 8px;border-radius: 6px;transition: .15s color, .15s background;}
+.rate-link:hover {color: #e2e2e2;background: #ffffff0a;}
+.rate-link.hidden {display: none}
 .social-footer:has(.social-buttons.hidden) {padding-top: 8px;border-top-color: transparent;margin-top: 8px;}
 #setSingleColor, #setGradientColor {padding: 8px 20px;margin-top:5px;}
 .tab-header {display: flex;justify-content: space-between;gap:20px;align-items:center}

html/popup.html

@@ -481,6 +481,7 @@
                     <span>GitHub</span>
                 </a>
             </div>
+            <a class="rate-link" id="rate-link" href="https://chromewebstore.google.com/detail/canvas-refined/ihienfbdfdamhmhhiokjnjmpjgbenedg/reviews" target="_blank" rel="noopener noreferrer" data-i18n="rate_us_chrome">Enjoying the extension? Rate us on the Chrome Web Store!</a>
             <div class="social-toggle" id="social-toggle" role="button" tabindex="0" data-i18n="hide_links">Hide links</div>
         </div>
     </div>

js/popup.js

@@ -421,10 +421,25 @@ document.addEventListener("DOMContentLoaded", setup);
 document.addEventListener("DOMContentLoaded", () => {
     const toggle = document.getElementById("social-toggle");
     const buttons = document.querySelector(".social-buttons");
+    const rateLink = document.getElementById("rate-link");
     if (!toggle || !buttons) return;
+
+    // One review link, pointed at whichever store this browser installs from.
+    if (rateLink) {
+        const isFirefox = /firefox/i.test(navigator.userAgent);
+        const key = isFirefox ? "rate_us_firefox" : "rate_us_chrome";
+        rateLink.href = isFirefox
+            ? "https://addons.mozilla.org/en-US/firefox/addon/canvas-refined/reviews/"
+            : "https://chromewebstore.google.com/detail/canvas-refined/ihienfbdfdamhmhhiokjnjmpjgbenedg/reviews";
+        rateLink.dataset.i18n = key;
+        const msg = getMsg(key);
+        if (msg) rateLink.textContent = msg;
+    }
+
     const KEY = "hide_socials";
     const render = (hidden) => {
         buttons.classList.toggle("hidden", hidden);
+        if (rateLink) rateLink.classList.toggle("hidden", hidden);
         toggle.textContent = getMsg(hidden ? "show_links" : "hide_links") || (hidden ? "Show links" : "Hide links");
     };
     chrome.storage.local.get(KEY, (res) => render(!!res[KEY]));