From d97a7e736dd67d1b9550aeb2e8c3a42c2935346e Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 16 Aug 2023 09:18:54 +0800
Subject: [PATCH] chore: add extension link to readme

---
 README.md               |  4 ++++
 extension/src/popup.tsx | 37 ++++++++++++++++++++++++++++---------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 70326ca..e20c46a 100644
--- a/README.md
+++ b/README.md
@@ -34,4 +34,8 @@ Slash provides a browser extension to help you use your shortcuts in the search
 
 ![browser-extension-example](./resources/browser-extension-example.png)
 
+### Chromium based browsers
+
+For Chromium based browsers(Chrome, Edge, Arc, ...), you can install the extension from the [Chrome Web Store](https://chrome.google.com/webstore/detail/slash/ebaiehmkammnacjadffpicipfckgeobg).
+
 Learn more in [The Browser Extension of Slash](https://github.com/boojack/slash/blob/main/docs/install-browser-extension.md).
diff --git a/extension/src/popup.tsx b/extension/src/popup.tsx
index 7b9d3fc..c2b8712 100644
--- a/extension/src/popup.tsx
+++ b/extension/src/popup.tsx
@@ -26,7 +26,7 @@ const IndexPopup = () => {
 
   return (
     <>
-      <div className="w-full min-w-[512px] p-6">
+      <div className="w-full min-w-[512px] px-4 pt-4">
         <div className="w-full flex flex-row justify-between items-center">
           <div className="flex flex-row justify-start items-center">
             <Logo className="w-6 h-auto mr-2" />
@@ -54,15 +54,34 @@ const IndexPopup = () => {
                 </div>
               )}
 
-              <Divider className="!mt-4 !mb-3" />
+              <Divider className="!mt-4 !mb-2 opacity-40" />
 
-              <div className="w-full flex flex-row justify-start items-center">
-                <IconButton size="sm" variant="plain" color="neutral" onClick={handleSettingButtonClick}>
-                  <Icon.Settings className="w-5 h-auto text-gray-500" />
-                </IconButton>
-                <IconButton size="sm" variant="plain" color="neutral" component="a" href="https://github.com/boojack/slash" target="_blank">
-                  <Icon.Github className="w-5 h-auto text-gray-500" />
-                </IconButton>
+              <div className="w-full flex flex-row justify-between items-center mb-2">
+                <div className="flex flex-row justify-start items-center">
+                  <IconButton size="sm" variant="plain" color="neutral" onClick={handleSettingButtonClick}>
+                    <Icon.Settings className="w-5 h-auto text-gray-500" />
+                  </IconButton>
+                  <IconButton
+                    size="sm"
+                    variant="plain"
+                    color="neutral"
+                    component="a"
+                    href="https://github.com/boojack/slash"
+                    target="_blank"
+                  >
+                    <Icon.Github className="w-5 h-auto text-gray-500" />
+                  </IconButton>
+                </div>
+                <div className="flex flex-row justify-end items-center">
+                  <a
+                    className="text-sm flex flex-row justify-start items-center text-gray-500 hover:underline hover:text-blue-600"
+                    href={domain}
+                    target="_blank"
+                  >
+                    <span className="mr-1">Go to my Slash</span>
+                    <Icon.ExternalLink className="w-4 h-auto" />
+                  </a>
+                </div>
               </div>
             </>
           ) : (