feat: jump to existing app tab from popup page (sheepzh#653)

Author: sheepzh

package.json

@@ -28,18 +28,18 @@
     },
     "license": "MIT",
     "devDependencies": {
-        "@crowdin/crowdin-api-client": "^1.49.0",
+        "@crowdin/crowdin-api-client": "^1.51.1",
         "@emotion/babel-plugin": "^11.13.5",
         "@emotion/css": "^11.13.5",
-        "@rsdoctor/rspack-plugin": "^1.3.12",
-        "@rspack/cli": "^1.6.6",
-        "@rspack/core": "^1.6.6",
-        "@swc/core": "^1.15.3",
+        "@rsdoctor/rspack-plugin": "^1.3.16",
+        "@rspack/cli": "^1.6.8",
+        "@rspack/core": "^1.6.8",
+        "@swc/core": "^1.15.7",
         "@swc/jest": "^0.2.39",
         "@types/chrome": "0.1.32",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^24.10.1",
+        "@types/node": "^25.0.3",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",
@@ -54,7 +54,7 @@
         "postcss": "^8.5.6",
         "postcss-loader": "^8.2.0",
         "postcss-rtlcss": "^5.7.1",
-        "puppeteer": "^24.32.0",
+        "puppeteer": "^24.34.0",
         "ts-loader": "^9.5.4",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
@@ -63,10 +63,10 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
         "echarts": "^6.0.0",
-        "element-plus": "2.12.0",
+        "element-plus": "2.13.0",
         "punycode": "^2.3.1",
-        "vue": "^3.5.25",
-        "vue-router": "^4.6.3"
+        "vue": "^3.5.26",
+        "vue-router": "^4.6.4"
     },
     "engines": {
         "node": ">=22"

src/api/chrome/tab.ts

@@ -5,6 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { IS_MV3 } from '@util/constant/environment'
 import { handleError } from "./common"
 
 export function getTab(id: number): Promise<ChromeTab | undefined> {
@@ -122,4 +123,16 @@ export function onTabUpdated(handler: TabHandler<ChromeTabUpdatedInfo>): void {
         handleError("tabUpdated")
         handler(tabId, changeInfo, tab)
     })
+}
+
+export function updateTab(tabId: number, updateProperties: chrome.tabs.UpdateProperties): Promise<ChromeTab | undefined> {
+    if (IS_MV3) {
+        return chrome.tabs.update(tabId, updateProperties)
+    }
+    return new Promise((resolve) => {
+        chrome.tabs.update(tabId, updateProperties, (tab) => {
+            handleError("updateTab")
+            resolve(tab)
+        })
+    })
 }

src/pages/popup/components/Header/index.tsx

@@ -1,52 +1,55 @@
-import { createTab } from "@api/chrome/tab"
+import { createTab, listTabs, updateTab } from "@api/chrome/tab"
 import { View } from "@element-plus/icons-vue"
 import Flex from "@pages/components/Flex"
 import LangSelect from "@popup/components/Header/LangSelect"
 import { t } from "@popup/locale"
 import { IS_ANDROID } from "@util/constant/environment"
 import { getAppPageUrl } from "@util/constant/url"
 import { ElLink } from "element-plus"
-import { defineComponent } from "vue"
+import { FunctionalComponent } from "vue"
 import DarkSwitch from "./DarkSwitch"
 import Github from "./Github"
 import Logo from "./Logo"
 import Option from "./Option"
 import RateUs from './RateUs'
 
-const Header = defineComponent<{}>(() => {
-    const handleAllFuncClick = () => {
-        const appPageUrl = getAppPageUrl()
-        if (IS_ANDROID) {
-            location.replace(appPageUrl)
-        } else {
-            createTab(appPageUrl)
+const openAppPage = async () => {
+    const appPageUrl = getAppPageUrl()
+    if (IS_ANDROID) return location.replace(appPageUrl)
+    try {
+        const tabs = await listTabs({ currentWindow: true })
+        // If there are non-highlighted app page tab, jump to it
+        const tabId2Jump = tabs.find(tab => !!tab.url?.startsWith(appPageUrl) && !tab.highlighted)?.id
+        if (tabId2Jump) {
+            await updateTab(tabId2Jump, { highlighted: true })
+            return
         }
+    } catch (ignored) {
     }
+    // fall back to open new tab
+    await createTab(appPageUrl)
+}
 
-    return () => (
-        <Flex justify="space-between" padding='0 10px' color='text-primary'>
-            <Logo />
+const Header: FunctionalComponent = () => (
+    <Flex justify="space-between" padding='0 10px' color='text-primary'>
+        <Logo />
+        <Flex gap={10}>
             <Flex gap={10}>
-                <Flex gap={10}>
-                    <RateUs />
-                    <ElLink
-                        underline="never"
-                        onClick={handleAllFuncClick}
-                        icon={View}
-                        style={{ gap: '3px' }}
-                    >
-                        {t(msg => msg.base.allFunction)}
-                    </ElLink>
-                </Flex>
-                <Flex align="center" gap={8} style={{ fontSize: '30px' }}>
-                    <LangSelect />
-                    <DarkSwitch />
-                    <Option />
-                    <Github />
-                </Flex>
+                <RateUs />
+                <ElLink underline="never" onClick={openAppPage} icon={View} style={{ gap: '3px' }}>
+                    {t(msg => msg.base.allFunction)}
+                </ElLink>
             </Flex>
-        </Flex >
-    )
-})
+            <Flex align="center" gap={8} fontSize={30}>
+                <LangSelect />
+                <DarkSwitch />
+                <Option />
+                <Github />
+            </Flex>
+        </Flex>
+    </Flex>
+)
+
+Header.displayName = "PopupHeader"
 
 export default Header