Feature/request app review

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.13",
     "@radix-ui/react-toggle": "^1.1.6",
     "@radix-ui/react-toggle-group": "^1.1.7",
     "@testing-library/user-event": "^14.6.0",

public/_locales/en/messages.json

@@ -721,5 +721,17 @@
   },
   "help_pageAction_share_desc": {
     "message": "You can share and get Page Action commands from the Selection Command Hub."
+  },
+  "review_request_title": {
+    "message": "Enjoying Selection Command?"
+  },
+  "review_request_message": {
+    "message": "If you find this extension helpful, please consider leaving a review on the Chrome Web Store. Your feedback helps us improve!"
+  },
+  "review_request_button": {
+    "message": "Write a Review"
+  },
+  "review_request_close": {
+    "message": "Not Now"
   }
-}
+}

public/_locales/ja/messages.json

@@ -718,5 +718,17 @@
   },
   "help_pageAction_share_desc": {
     "message": "Selection Command Hubから、<b>Page Actionコマンドの共有と取得</b>ができます。 "
+  },
+  "review_request_title": {
+    "message": "Selection Command はいかがですか？"
+  },
+  "review_request_message": {
+    "message": "この拡張機能を気に入っていただけたら、Chrome Web Storeでのレビューをお願いします。皆様のフィードバックが改善の糧となります！"
+  },
+  "review_request_button": {
+    "message": "レビューする"
+  },
+  "review_request_later": {
+    "message": "後で"
   }
-}
+}

src/background_script.ts

@@ -18,10 +18,45 @@ import type {
 } from '@/types'
 import { Storage, SESSION_STORAGE_KEY } from './services/storage'
 
-const OPTION_PAGE = 'src/options_page.html'
+const CONSTANTS = {
+  OPTION_PAGE: 'src/options_page.html',
+  REVIEW_THRESHOLD: 100,
+  REVIEW_INTERVAL: 50,
+  SETTING_KEY: {
+    COMMAND_EXECUTION_COUNT: 'commandExecutionCount',
+    HAS_SHOWN_REVIEW_REQUEST: 'hasShownReviewRequest',
+  },
+} as const
 
 BgData.init()
 
+// Increment command execution count and check review request
+const incrementCommandExecutionCount = async (): Promise<void> => {
+  try {
+    const settings = await Settings.get()
+    let count = settings.commandExecutionCount ?? 0
+    const hasShown = settings.hasShownReviewRequest ?? false
+
+    // Increment command execution count
+    count++
+    await Settings.update(
+      CONSTANTS.SETTING_KEY.COMMAND_EXECUTION_COUNT,
+      () => count,
+      true,
+    )
+
+    // Show review request when threshold is exceeded
+    if ((count === CONSTANTS.REVIEW_THRESHOLD || (count > CONSTANTS.REVIEW_THRESHOLD && (count - CONSTANTS.REVIEW_THRESHOLD) % CONSTANTS.REVIEW_INTERVAL === 0)) && !hasShown) {
+      const tabs = await chrome.tabs.query({ active: true })
+      if (tabs[0]?.id) {
+        await Ipc.sendTab(tabs[0].id, TabCommand.showReviewRequest)
+      }
+    }
+  } catch (error) {
+    console.error('Failed to increment command execution count:', error)
+  }
+}
+
 type Sender = chrome.runtime.MessageSender
 
 export type openPopupAndClickProps = OpenPopupsProps & {
@@ -68,29 +103,50 @@ function bindVariables(
 }
 
 const commandFuncs = {
-  [BgCommand.openPopups]: (param: OpenPopupsProps): boolean => {
-    openPopups(param)
-    return false
+  [BgCommand.openPopups]: (
+    param: OpenPopupsProps,
+    _: Sender,
+    response: (res: unknown) => void,
+  ): boolean => {
+    incrementCommandExecutionCount().then(async () => {
+      try {
+        await openPopups(param)
+        response(true)
+      } catch (error) {
+        console.error('Failed to execute openPopups:', error)
+        response(false)
+      }
+    })
+    return true
   },
 
-  [BgCommand.openPopupAndClick]: (param: openPopupAndClickProps): boolean => {
-    const open = async () => {
-      const tabIds = await openPopups(param)
-      if (tabIds.length > 0) {
-        await Ipc.sendQueue(tabIds[0], TabCommand.clickElement, {
-          selector: (param as { selector: string }).selector,
-        })
-        return
+  [BgCommand.openPopupAndClick]: (
+    param: openPopupAndClickProps,
+    _: Sender,
+    response: (res: unknown) => void,
+  ): boolean => {
+    incrementCommandExecutionCount().then(async () => {
+      try {
+        const tabIds = await openPopups(param)
+        if (tabIds.length > 0) {
+          await Ipc.sendQueue(tabIds[0], TabCommand.clickElement, {
+            selector: (param as { selector: string }).selector,
+          })
+        } else {
+          console.debug('tab not found')
+        }
+        response(true)
+      } catch (error) {
+        console.error('Failed to execute openPopupAndClick:', error)
+        response(false)
       }
-      console.debug('tab not found')
-    }
-    open()
-    return false
+    })
+    return true
   },
 
   [BgCommand.openOption]: (): boolean => {
     chrome.tabs.create({
-      url: OPTION_PAGE,
+      url: CONSTANTS.OPTION_PAGE,
     })
     return false
   },
@@ -110,9 +166,9 @@ const commandFuncs = {
       await Settings.set({
         ...settings,
         pageRules,
-      })
+      }, true)
       chrome.tabs.create({
-        url: `${OPTION_PAGE}#pageRules`,
+        url: `${CONSTANTS.OPTION_PAGE}#pageRules`,
       })
     }
     add()
@@ -130,24 +186,24 @@ const commandFuncs = {
 
     const cmd = isSearch
       ? {
+        id: params.id,
+        title: params.title,
+        searchUrl: params.searchUrl,
+        iconUrl: params.iconUrl,
+        openMode: params.openMode,
+        openModeSecondary: params.openModeSecondary,
+        spaceEncoding: params.spaceEncoding,
+        popupOption: PopupOption,
+      }
+      : isPageAction
+        ? {
           id: params.id,
           title: params.title,
-          searchUrl: params.searchUrl,
           iconUrl: params.iconUrl,
           openMode: params.openMode,
-          openModeSecondary: params.openModeSecondary,
-          spaceEncoding: params.spaceEncoding,
+          pageActionOption: params.pageActionOption,
           popupOption: PopupOption,
         }
-      : isPageAction
-        ? {
-            id: params.id,
-            title: params.title,
-            iconUrl: params.iconUrl,
-            openMode: params.openMode,
-            pageActionOption: params.pageActionOption,
-            popupOption: PopupOption,
-          }
         : null
 
     if (!cmd) {
@@ -389,7 +445,7 @@ const updateWindowSize = async (
 
 chrome.action.onClicked.addListener(() => {
   chrome.tabs.create({
-    url: OPTION_PAGE,
+    url: CONSTANTS.OPTION_PAGE,
   })
 })
 

src/components/App.tsx

@@ -11,12 +11,17 @@ import { getSelectionText } from '@/services/dom'
 import { SelectContextProvider } from '@/hooks/useSelectContext'
 import { PageActionContextProvider } from '@/hooks/pageAction/usePageActionContext'
 import { Ipc, TabCommand } from '@/services/ipc'
+import { Toaster } from "@/components/ui/toaster"
+import { useToast } from "@/hooks/useToast"
+import { showReviewRequestToast } from '@/components/ReviewRequestToast'
+import { Settings } from '@/services/settings'
 
 export function App() {
   const [positionElm, setPositionElm] = useState<Element | null>(null)
   const [target, setTarget] = useState<Element | null>(null)
   const [isHover, setIsHover] = useState<boolean>(false)
   const [selectionText, setSelectionText] = useState('')
+  const { toast } = useToast()
 
   useEffect(() => {
     Ipc.addListener(TabCommand.connect, () => false)
@@ -37,6 +42,21 @@ export function App() {
     }
   }, [isHover])
 
+  useEffect(() => {
+    const handleShowReviewRequest = (_param: any, _sender: any, response: any) => {
+      showReviewRequestToast(toast, () => {
+        Settings.update('hasShownReviewRequest', () => true)
+      })
+      response(true)
+      return true
+    }
+
+    Ipc.addListener(TabCommand.showReviewRequest, handleShowReviewRequest)
+    return () => {
+      Ipc.removeListener(TabCommand.showReviewRequest)
+    }
+  }, [])
+
   return (
     <PageActionContextProvider>
       <SelectContextProvider value={{ selectionText, target, setTarget }}>
@@ -50,6 +70,7 @@ export function App() {
         <OpenInTab />
         <PageActionRunner />
         <PageActionRecorder />
+        <Toaster />
       </SelectContextProvider>
     </PageActionContextProvider>
   )

src/components/ReviewRequestToast.tsx

@@ -0,0 +1,39 @@
+import { t } from '@/services/i18n'
+import { ToastAction } from "@/components/ui/toast"
+
+const REVIEW_URL = 'https://chromewebstore.google.com/detail/nlnhbibaommoelemmdfnkjkgoppkohje/reviews'
+const ICON_URL = chrome.runtime.getURL('icon128.png')
+
+export function showReviewRequestToast(toast: any, onAccept: () => void): void {
+  const tst = toast({
+    title: (
+      <p className='flex flex-row gap-2 items-center'>
+        <img src={ICON_URL} className='w-6 h-6' />
+        <span className='text-base font-semibold text-gray-800'>
+          {t("review_request_title")}
+        </span>
+      </p>
+    ),
+    description: <span className='text-sm'>
+      {t("review_request_message")}
+    </span>,
+    className: 'flex flex-col text-gray-800',
+    action: <div className='w-full flex flex-row gap-3 px-4 pt-3 pb-2'>
+      <ToastAction key="later" altText="Later"
+        className='flex-1 h-9'
+        onClick={() => {
+          // Close the toast
+          tst.dismiss()
+        }}
+      >{t("review_request_later")}</ToastAction>
+      <ToastAction key="review" altText="Write a review"
+        className='flex-1 h-9 transition hover:bg-sky-100'
+        onClick={() => {
+          window.open(REVIEW_URL, '_blank')
+          onAccept()
+        }}
+      ><span className='mr-1'>🎉</span> {t("review_request_button")}</ToastAction>
+    </div>,
+    duration: 60 * 1000,
+  })
+} 

src/components/option/ImportExport.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react'
 import { Dialog } from './Dialog'
-import type { SettingsType } from '@/types'
+import type { UserSettings } from '@/types'
 
 import { Storage, STORAGE_KEY } from '@/services/storage'
 import { Settings, migrate } from '@/services/settings'
@@ -24,7 +24,7 @@ function getTimestamp() {
 export function ImportExport() {
   const [resetDialog, setResetDialog] = useState(false)
   const [importDialog, setImportDialog] = useState(false)
-  const [importJson, setImportJson] = useState<SettingsType>()
+  const [importJson, setImportJson] = useState<UserSettings>()
   const inputFile = useRef<HTMLInputElement>(null)
 
   const handleReset = () => {
@@ -39,7 +39,7 @@ export function ImportExport() {
   }
 
   const handleExport = async () => {
-    const data = await Storage.get<SettingsType>(STORAGE_KEY.USER)
+    const data = await Storage.get<UserSettings>(STORAGE_KEY.USER)
     data.commands = await Storage.getCommands()
 
     // for back compatibility
@@ -84,7 +84,13 @@ export function ImportExport() {
   const handleImportClose = (ret: boolean) => {
     if (ret && importJson != null) {
       ; (async () => {
-        const data = await migrate(importJson)
+        const { commandExecutionCount = 0, hasShownReviewRequest = false } = await Settings.get()
+        const data = await migrate({
+          ...importJson,
+          commandExecutionCount,
+          hasShownReviewRequest,
+          stars: []
+        })
         await Settings.set(data)
         location.reload()
       })()