⚡ Add guide url

nilooy · Jul 2, 2022 · cd3d1de · cd3d1de
1 parent 1bbc57d
commit cd3d1de
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "dev:chrome": "run-p chrome:*",
     "dev:firefox": "run-p firefox:*",
     "chrome:prepare": "esno scripts/prepare.ts build --watch",
-    "chrome:watch": "vite",
+    "chrome:watch": "vite build --watch",
     "chrome:preview": "vite preview",
     "chrome:build": "tsup src/background src/content --format iife --out-dir extension/dist --no-splitting",
     "chrome:open": "npm run wait && web-ext run -t chromium --start-url \"https://stackoverflow.com\" --source-dir ./extension/",

diff --git a/src/components/hints.tsx b/src/components/hints.tsx
@@ -6,13 +6,19 @@ import Review from "./review";
 import Social from "./social";
 import { useFirefox } from "./useFirefox";
 import { CHROME_SHORTCUT_GUIDE, FIREFOX_SHORTCUT_GUIDE } from "../constants";
+import { useEffect } from "preact/compat";
+import browser from "webextension-polyfill";
 
 const Hints: FunctionComponent = () => {
   const { mainCommand } = useCommand();
   const { isFirefox } = useFirefox();
 
   const guideUrl = isFirefox ? FIREFOX_SHORTCUT_GUIDE : CHROME_SHORTCUT_GUIDE;
 
+  useEffect(() => {
+    console.log({ sss: browser.runtime.id });
+  }, []);
+
   return (
     <div>
       <div
@@ -22,7 +28,7 @@ const Hints: FunctionComponent = () => {
           "--tw-bg-opacity": "0.8",
         }}
       >
-        <div className="modal-box relative">
+        <div className="modal-box relative bg-black">
           <a href="#" className="btn btn-sm btn-circle absolute right-2 top-2">
             ✕
           </a>
@@ -36,16 +42,22 @@ const Hints: FunctionComponent = () => {
               <Shortcuts command={mainCommand} />{" "}
             </li>{" "}
             <li>
-              <a
-                target="_blank"
-                href={guideUrl}
-                rel="noreferrer"
+              <span
+                onClick={() =>
+                  isFirefox
+                    ? window.open(guideUrl)
+                    : browser.tabs.create({
+                        url: guideUrl,
+                      })
+                }
                 className="link link-accent"
               >
                 <em className="text-[12px]">
-                  Follow this guide to change browser shortcuts
+                  {isFirefox
+                    ? "Follow this guide to change browser shortcuts"
+                    : "Change browser shortcut"}
                 </em>
-              </a>
+              </span>
             </li>
             <div className="divider"></div>
             <li class="flex justify-between items-center my-2">

diff --git a/src/components/review.tsx b/src/components/review.tsx
@@ -1,6 +1,7 @@
 import { CHROME_STORE_URL, FIREFOX_STORE_URL } from "../constants";
 import { Icon } from "@iconify/react";
 import { useFirefox } from "./useFirefox";
+import browser from "webextension-polyfill";
 
 const Review = () => {
   const { isFirefox } = useFirefox();
@@ -11,7 +12,11 @@ const Review = () => {
         <a
           target="_blank"
           className="ml-2 flex items-center"
-          href={isFirefox ? FIREFOX_STORE_URL : CHROME_STORE_URL}
+          href={
+            isFirefox
+              ? FIREFOX_STORE_URL
+              : CHROME_STORE_URL + browser.runtime.id
+          }
         >
           <span>⭐️ Please leave us a review on</span>
           <Icon

diff --git a/src/constants.ts b/src/constants.ts
@@ -3,10 +3,9 @@ export const KEY_PREFIX: string = "superkey";
 export const FIREFOX_STORE_URL: string =
   "https://addons.mozilla.org/en-US/firefox/addon/superkeys";
 export const CHROME_STORE_URL: string =
-  "https://addons.mozilla.org/en-US/firefox/addon/superkeys";
+  "https://chrome.google.com/webstore/detail/superkeys/";
 
 export const FIREFOX_SHORTCUT_GUIDE: string =
   "https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox";
 
-export const CHROME_SHORTCUT_GUIDE: string =
-  "https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox";
+export const CHROME_SHORTCUT_GUIDE: string = "chrome://extensions/shortcuts";