refactor: use WXT i18n

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>

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([])

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
 }

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')

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",

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"
+ }
+}

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 属性"
+ }
+}

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'],