From ef91561595c31a92d3e7fb332d6d1451e57b10fa Mon Sep 17 00:00:00 2001
From: Jevin <jevin98@163.com>
Date: Thu, 14 May 2026 17:02:54 +0800
Subject: [PATCH] refactor: use WXT i18n

---
 entrypoints/devtools-panel/devtools-panel.vue | 24 ++++------
 .../devtools-panel/hooks/useDevToolsPanel.ts  |  3 +-
 entrypoints/devtools-panel/lang.ts            | 34 ++++++--------
 entrypoints/devtools-panel/main.ts            |  9 +---
 package.json                                  |  3 +-
 pnpm-lock.yaml                                | 45 -------------------
 public/_locales/en/messages.json              | 32 +++++++++++++
 public/_locales/zh_CN/messages.json           | 32 +++++++++++++
 wxt.config.ts                                 |  3 ++
 9 files changed, 92 insertions(+), 93 deletions(-)
 create mode 100644 public/_locales/en/messages.json
 create mode 100644 public/_locales/zh_CN/messages.json

diff --git a/entrypoints/devtools-panel/devtools-panel.vue b/entrypoints/devtools-panel/devtools-panel.vue
index fda3524..c1af12e 100644
--- a/entrypoints/devtools-panel/devtools-panel.vue
+++ b/entrypoints/devtools-panel/devtools-panel.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ElBacktop, ElButton, ElCheckbox, ElIcon, ElInput, ElOption, ElSelect, ElTable, ElTableColumn, ElText, ElTooltip } from 'element-plus'
+import { ElBacktop, ElButton, ElCheckbox, ElIcon, ElInput, ElTable, ElTableColumn, ElText, ElTooltip } from 'element-plus'
 import { defineComponent, h } from 'vue'
 import { useDevToolsPanel } from './hooks/useDevToolsPanel'
+import { t } from './lang'
 import { filterJoin } from './utils'
 
 const {
@@ -44,29 +45,22 @@ const PropertyNode = defineComponent({
     <h2 class="font-bold text-center text-lg">
       DOM Diff
     </h2>
-
-    <ElSelect v-model="$i18n.locale" class="!w-[100px] !absolute !right-0 !top-0" size="small">
-      <ElOption v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
-        {{ locale }}
-      </ElOption>
-    </ElSelect>
-
     <ElText class="block" type="primary">
-      {{ $t('info') }}
+      {{ t('info') }}
     </ElText>
 
     <ElButton class="mt-[10px]" type="warning" plain @click="handleClearSelection">
-      {{ $t('removeBtn') }}
+      {{ t('removeBtn') }}
     </ElButton>
 
     <ElText v-if="!renderCssDiffs.length" class="block !mt-[10px]" type="danger">
-      {{ $t('selectedInfo') }}
+      {{ t('selectedInfo') }}
     </ElText>
 
     <div class="flex justify-between my-3">
-      <ElInput v-model="inputValue" :placeholder="$t('inputPlaceholder')" clearable class="!w-[50%]" />
+      <ElInput v-model="inputValue" :placeholder="t('inputPlaceholder')" clearable class="!w-[50%]" />
 
-      <ElCheckbox v-model="isAllProperty" :label="$t('isAllProperty')" />
+      <ElCheckbox v-model="isAllProperty" :label="t('isAllProperty')" />
     </div>
     <ElTable
       class="w-full"
@@ -76,7 +70,7 @@ const PropertyNode = defineComponent({
       :row-class-name="onTableRowClassName"
       @cell-click="handleCopyStyle"
     >
-      <ElTableColumn prop="property" :label="$t('property')">
+      <ElTableColumn prop="property" :label="t('property')">
         <template #default="scope">
           <PropertyNode :text="scope.row.property" />
         </template>
@@ -86,7 +80,7 @@ const PropertyNode = defineComponent({
           <template #header>
             <span class="align-middle">{{ filterJoin(el.tag, el.id, el.class) }}</span>
 
-            <ElTooltip :content="$t('tableColumnInfo')" trigger="click">
+            <ElTooltip :content="t('tableColumnInfo')" trigger="click">
               <ElIcon class="align-middle ml-[4px]">
                 <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m0 832a384 384 0 0 0 0-768a384 384 0 0 0 0 768m48-176a48 48 0 1 1-96 0a48 48 0 0 1 96 0m-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32" /></svg>
               </ElIcon>
diff --git a/entrypoints/devtools-panel/hooks/useDevToolsPanel.ts b/entrypoints/devtools-panel/hooks/useDevToolsPanel.ts
index 2fa26e0..d6d920b 100644
--- a/entrypoints/devtools-panel/hooks/useDevToolsPanel.ts
+++ b/entrypoints/devtools-panel/hooks/useDevToolsPanel.ts
@@ -1,12 +1,11 @@
 import type { CssDiffsType, SelectedElType } from '../types'
 import { useClipboard } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
-import { useI18n } from 'vue-i18n'
+import { t } from '../lang'
 import SM from '../message'
 import { formatStyle, type FormatStyleValue } from '../utils'
 
 export function useDevToolsPanel() {
-  const { t } = useI18n()
   const inputValue = ref('')
 
   const selectedEl: Array<SelectedElType> = reactive([])
diff --git a/entrypoints/devtools-panel/lang.ts b/entrypoints/devtools-panel/lang.ts
index 6f2f6bf..7024573 100644
--- a/entrypoints/devtools-panel/lang.ts
+++ b/entrypoints/devtools-panel/lang.ts
@@ -1,23 +1,15 @@
-export default {
-  'en': {
-    info: 'Select two elements in the Elements tab of the DevTools panel and the style differences will be shown below.',
-    removeBtn: 'Clear Selection',
-    selectedInfo: 'Please select two elements to compare.',
-    property: 'property',
-    isAllProperty: 'Show all',
-    tableColumnInfo: 'The header name is concatenated from the DOM\'s `TagName`, `Id`, and `Class` attributes using `$$`.',
-    copyInfo: 'Copy Success',
-    inputPlaceholder: 'Please enter the css property you want to view',
-  },
+import { browser } from 'wxt/browser'
 
-  'zh-CN': {
-    info: '在 DevTools 面板的 Elements 选项卡中选择两个元素，样式差异将显示在下面。',
-    removeBtn: '清除选择',
-    selectedInfo: '请选择两个元素进行比较。',
-    property: '属性名',
-    isAllProperty: '显示全部',
-    tableColumnInfo: '表头名称由DOM的 `TagName`、`Id`、`Class` 属性使用 `$$` 拼接而成。',
-    copyInfo: '复制成功',
-    inputPlaceholder: '请输入需要查看的css属性',
-  },
+export type MessageKey =
+  | 'info'
+  | 'removeBtn'
+  | 'selectedInfo'
+  | 'property'
+  | 'isAllProperty'
+  | 'tableColumnInfo'
+  | 'copyInfo'
+  | 'inputPlaceholder'
+
+export function t(key: MessageKey, substitutions?: string | string[]) {
+  return browser.i18n.getMessage(key, substitutions) || key
 }
diff --git a/entrypoints/devtools-panel/main.ts b/entrypoints/devtools-panel/main.ts
index 032f63a..1c905eb 100644
--- a/entrypoints/devtools-panel/main.ts
+++ b/entrypoints/devtools-panel/main.ts
@@ -1,13 +1,6 @@
 import { createApp } from 'vue'
-import { createI18n } from 'vue-i18n'
 import App from './devtools-panel.vue'
 
-import messages from './lang'
 import 'element-plus/dist/index.css'
 
-const i18n = createI18n({
-  locale: 'en',
-  messages,
-})
-
-createApp(App).use(i18n).mount('#app')
+createApp(App).mount('#app')
diff --git a/package.json b/package.json
index 9a90329..0c8855b 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,7 @@
   "dependencies": {
     "@vue/shared": "^3.5.13",
     "element-plus": "^2.9.1",
-    "vue": "^3.5.12",
-    "vue-i18n": "10"
+    "vue": "^3.5.12"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c016e50..43deb51 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,6 @@ importers:
       vue:
         specifier: ^3.5.12
         version: 3.5.13(typescript@5.6.3)
-      vue-i18n:
-        specifier: '10'
-        version: 10.0.5(vue@3.5.13(typescript@5.6.3))
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^3.12.0
@@ -466,18 +463,6 @@ packages:
     resolution: {integrity: sha512-e5+YUKENATs1JgYHMzTr2MW/NDcXGfYFAuOQU8gJgF/kEh4EqKgfGrfLI67bMD4tbhZVlkigz/9YYwWcbOFthg==}
     engines: {node: '>=10.13.0'}
 
-  '@intlify/core-base@10.0.5':
-    resolution: {integrity: sha512-F3snDTQs0MdvnnyzTDTVkOYVAZOE/MHwRvF7mn7Jw1yuih4NrFYLNYIymGlLmq4HU2iIdzYsZ7f47bOcwY73XQ==}
-    engines: {node: '>= 16'}
-
-  '@intlify/message-compiler@10.0.5':
-    resolution: {integrity: sha512-6GT1BJ852gZ0gItNZN2krX5QAmea+cmdjMvsWohArAZ3GmHdnNANEcF9JjPXAMRtQ6Ux5E269ymamg/+WU6tQA==}
-    engines: {node: '>= 16'}
-
-  '@intlify/shared@10.0.5':
-    resolution: {integrity: sha512-bmsP4L2HqBF6i6uaMqJMcFBONVjKt+siGluRq4Ca4C0q7W2eMaVZr8iCgF9dKbcVXutftkC7D6z2SaSMmLiDyA==}
-    engines: {node: '>= 16'}
-
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -903,9 +888,6 @@ packages:
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
-  '@vue/devtools-api@6.6.4':
-    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
-
   '@vue/language-core@2.1.10':
     resolution: {integrity: sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==}
     peerDependencies:
@@ -3652,12 +3634,6 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-i18n@10.0.5:
-    resolution: {integrity: sha512-9/gmDlCblz3i8ypu/afiIc/SUIfTTE1mr0mZhb9pk70xo2csHAM9mp2gdQ3KD2O0AM3Hz/5ypb+FycTj/lHlPQ==}
-    engines: {node: '>= 16'}
-    peerDependencies:
-      vue: ^3.0.0
-
   vue-tsc@2.1.10:
     resolution: {integrity: sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==}
     hasBin: true
@@ -4140,18 +4116,6 @@ snapshots:
 
   '@hutson/parse-repository-url@5.0.0': {}
 
-  '@intlify/core-base@10.0.5':
-    dependencies:
-      '@intlify/message-compiler': 10.0.5
-      '@intlify/shared': 10.0.5
-
-  '@intlify/message-compiler@10.0.5':
-    dependencies:
-      '@intlify/shared': 10.0.5
-      source-map-js: 1.2.1
-
-  '@intlify/shared@10.0.5': {}
-
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -4546,8 +4510,6 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
-  '@vue/devtools-api@6.6.4': {}
-
   '@vue/language-core@2.1.10(typescript@5.6.3)':
     dependencies:
       '@volar/language-core': 2.4.11
@@ -7578,13 +7540,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)):
-    dependencies:
-      '@intlify/core-base': 10.0.5
-      '@intlify/shared': 10.0.5
-      '@vue/devtools-api': 6.6.4
-      vue: 3.5.13(typescript@5.6.3)
-
   vue-tsc@2.1.10(typescript@5.6.3):
     dependencies:
       '@volar/typescript': 2.4.11
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
new file mode 100644
index 0000000..58f0120
--- /dev/null
+++ b/public/_locales/en/messages.json
@@ -0,0 +1,32 @@
+{
+  "extName": {
+    "message": "CSS-Diff"
+  },
+  "extDescription": {
+    "message": "A browser extension that compares different CSS."
+  },
+  "info": {
+    "message": "Select two elements in the Elements tab of the DevTools panel and the style differences will be shown below."
+  },
+  "removeBtn": {
+    "message": "Clear Selection"
+  },
+  "selectedInfo": {
+    "message": "Please select two elements to compare."
+  },
+  "property": {
+    "message": "property"
+  },
+  "isAllProperty": {
+    "message": "Show all"
+  },
+  "tableColumnInfo": {
+    "message": "The header name is concatenated from the DOM's `TagName`, `Id`, and `Class` attributes using `$$$$`."
+  },
+  "copyInfo": {
+    "message": "Copy Success"
+  },
+  "inputPlaceholder": {
+    "message": "Please enter the css property you want to view"
+  }
+}
diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
new file mode 100644
index 0000000..932c14c
--- /dev/null
+++ b/public/_locales/zh_CN/messages.json
@@ -0,0 +1,32 @@
+{
+  "extName": {
+    "message": "CSS-Diff"
+  },
+  "extDescription": {
+    "message": "一个用于比较 CSS 差异的浏览器扩展。"
+  },
+  "info": {
+    "message": "在 DevTools 面板的 Elements 选项卡中选择两个元素，样式差异将显示在下面。"
+  },
+  "removeBtn": {
+    "message": "清除选择"
+  },
+  "selectedInfo": {
+    "message": "请选择两个元素进行比较。"
+  },
+  "property": {
+    "message": "属性名"
+  },
+  "isAllProperty": {
+    "message": "显示全部"
+  },
+  "tableColumnInfo": {
+    "message": "表头名称由 DOM 的 `TagName`、`Id`、`Class` 属性使用 `$$$$` 拼接而成。"
+  },
+  "copyInfo": {
+    "message": "复制成功"
+  },
+  "inputPlaceholder": {
+    "message": "请输入需要查看的 css 属性"
+  }
+}
diff --git a/wxt.config.ts b/wxt.config.ts
index 024fcbc..d5f542b 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -4,6 +4,9 @@ import { defineConfig } from 'wxt'
 export default defineConfig({
   browser: 'chrome',
   manifest: {
+    name: '__MSG_extName__',
+    description: '__MSG_extDescription__',
+    default_locale: 'en',
     permissions: ['nativeMessaging', 'tabs', 'activeTab', 'scripting'],
   },
   modules: ['@wxt-dev/module-vue'],