add i18n

Author: mefengl

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,11 @@
+# An array of strings which contain Language Ids defined by VS Code
+# You can check available language ids here: https://code.visualstudio.com/docs/languages/identifiers
+languageIds:
+  - typescript
+
+# Look for t("...")
+usageMatchRegex:
+  - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
+
+# Disable other built-in i18n ally frameworks
+monopoly: true

.vscode/settings.json

@@ -1,4 +1,9 @@
 {
+  /* i18n-ally */
+  "i18n-ally.localesPaths": ["src/locales"],
+  "i18n-ally.keystyle": "nested",
+
+  /* antfu's eslint */
   // Enable the ESlint flat config support
   "eslint.experimental.useFlatConfig": true,
 

package.json

@@ -3,7 +3,6 @@
   "type": "module",
   "version": "0.0.0",
   "private": true,
-  "description": "manifest.json description",
   "scripts": {
     "dev": "wxt",
     "dev:firefox": "wxt -b firefox",
@@ -20,6 +19,7 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@wxt-dev/i18n": "^0.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "react": "^18.3.1",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
 export default defineBackground(() => {
   // eslint-disable-next-line no-console
-  console.log('Hello background!', { id: browser.runtime.id })
+  console.log(`${i18n.t('hello')} background!`, { id: browser.runtime.id })
 })

src/entrypoints/background.ts

@@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button'
 function App() {
   return (
     <>
-      <Button>popup</Button>
+      <Button>{`${i18n.t('hello')} popup`}</Button>
     </>
   )
 }

src/entrypoints/popup/App.tsx

@@ -0,0 +1,4 @@
+extension:
+  name: wxt-starter
+  description: https://github.com/mefengl/wxt-starter
+hello: Hello

src/locales/en.yml

@@ -0,0 +1,4 @@
+extension:
+  name: wxt-starter
+  description: https://github.com/mefengl/wxt-starter
+hello: 你好

src/locales/zh.yml

@@ -3,8 +3,14 @@ import { defineConfig } from 'wxt'
 // See https://wxt.dev/api/config.html
 export default defineConfig({
   manifest: {
+    default_locale: 'en',
+    description: '__MSG_extension_description__',
+    name: '__MSG_extension_name__',
     permissions: [],
   },
-  modules: ['@wxt-dev/module-react'],
+  modules: [
+    '@wxt-dev/module-react',
+    '@wxt-dev/i18n/module',
+  ],
   srcDir: 'src',
 })