{
  "name": "__MSG_appName__",
  "description": "__MSG_appDescription__",
  "default_locale": "en"
}

{
  "appName": {
    "message": "My Extension",
    "description": "The display name of the extension"
  },
  "appDescription": {
    "message": "A powerful browser extension for productivity",
    "description": "The description of the extension in the Web Store"
  },
  "welcomeMessage": {
    "message": "Hello, $USERNAME$! Welcome back.",
    "description": "Greeting message with user name",
    "placeholders": {
      "username": {
        "content": "$1",
        "example": "John"
      }
    }
  },
  "itemCount": {
    "message": "You have $COUNT$ items",
    "description": "Shows the number of items",
    "placeholders": {
      "count": {
        "content": "$1"
      }
    }
  },
  "openSettings": {
    "message": "Open Settings",
    "description": "Button text to open settings page"
  }
}

{
  "appName": {
    "message": "我的扩展",
    "description": "扩展的显示名称"
  },
  "appDescription": {
    "message": "一款强大的浏览器效率工具",
    "description": "Chrome Web Store 中的扩展描述"
  },
  "welcomeMessage": {
    "message": "你好，$USERNAME$！欢迎回来。",
    "description": "带用户名的问候语",
    "placeholders": {
      "username": {
        "content": "$1",
        "example": "小明"
      }
    }
  },
  "itemCount": {
    "message": "您有 $COUNT$ 个项目",
    "description": "显示项目数量",
    "placeholders": {
      "count": {
        "content": "$1"
      }
    }
  },
  "openSettings": {
    "message": "打开设置",
    "description": "打开设置页面的按钮文本"
  }
}

// 获取消息
const appName = chrome.i18n.getMessage('appName');
console.log(appName); // "我的扩展" 或 "My Extension"

// 带占位符的消息
const welcome = chrome.i18n.getMessage('welcomeMessage', ['小明']);
console.log(welcome); // "你好，小明！欢迎回来。"

// 多个占位符
const message = chrome.i18n.getMessage('itemCount', ['5']);
console.log(message); // "您有 5 个项目"

// 获取当前语言
const lang = chrome.i18n.getUILanguage();
console.log(lang); // "zh-CN"

<!-- 在 manifest.json 中使用 -->
<!-- "name": "__MSG_appName__" -->

<!-- 在 HTML 中使用（需手动替换或使用 JS） -->
<h1 data-i18n="appName"></h1>
<p data-i18n="appDescription"></p>
<button data-i18n="openSettings"></button>

<script>
// 自动翻译页面中所有带 data-i18n 属性的元素
document.querySelectorAll('[data-i18n]').forEach(element => {
  const key = element.getAttribute('data-i18n');
  const message = chrome.i18n.getMessage(key);
  if (message) {
    element.textContent = message;
  }
});

// 翻译 input placeholder
document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
  const key = element.getAttribute('data-i18n-placeholder');
  const message = chrome.i18n.getMessage(key);
  if (message) {
    element.placeholder = message;
  }
});

// 翻译 title 属性
document.querySelectorAll('[data-i18n-title]').forEach(element => {
  const key = element.getAttribute('data-i18n-title');
  const message = chrome.i18n.getMessage(key);
  if (message) {
    element.title = message;
  }
});
</script>

// lib/i18n.js

class I18nManager {
  constructor() {
    this.currentLocale = chrome.i18n.getUILanguage();
    this.messages = {};
  }

  // 获取消息，支持回退
  getMessage(key, substitutions = []) {
    const message = chrome.i18n.getMessage(key, substitutions);
    return message || key; // 回退到键名
  }

  // 批量获取消息
  getMessages(keys) {
    const result = {};
    for (const key of keys) {
      result[key] = this.getMessage(key);
    }
    return result;
  }

  // 翻译整个 DOM
  translatePage(root = document) {
    // 翻译文本内容
    root.querySelectorAll('[data-i18n]').forEach(el => {
      const key = el.getAttribute('data-i18n');
      const text = this.getMessage(key);
      if (text) el.textContent = text;
    });

    // 翻译 placeholder
    root.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
      const key = el.getAttribute('data-i18n-placeholder');
      el.placeholder = this.getMessage(key);
    });

    // 翻译 title
    root.querySelectorAll('[data-i18n-title]').forEach(el => {
      const key = el.getAttribute('data-i18n-title');
      el.title = this.getMessage(key);
    });

    // 翻译 aria-label
    root.querySelectorAll('[data-i18n-aria]').forEach(el => {
      const key = el.getAttribute('data-i18n-aria');
      el.setAttribute('aria-label', this.getMessage(key));
    });
  }

  // 格式化日期（根据地区）
  formatDate(date, options = {}) {
    const defaults = {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      ...options
    };
    return new Intl.DateTimeFormat(this.currentLocale, defaults).format(date);
  }

  // 格式化数字
  formatNumber(number, options = {}) {
    return new Intl.NumberFormat(this.currentLocale, options).format(number);
  }

  // 格式化货币
  formatCurrency(amount, currency = 'CNY') {
    return new Intl.NumberFormat(this.currentLocale, {
      style: 'currency',
      currency
    }).format(amount);
  }

  // 相对时间
  formatRelativeTime(value, unit) {
    try {
      return new Intl.RelativeTimeFormat(this.currentLocale, {
        numeric: 'auto'
      }).format(value, unit);
    } catch {
      return `${value} ${unit}s ago`;
    }
  }
}

// 单例导出
const i18n = new I18nManager();
export default i18n;

async function suggestLanguage() {
  const userLang = chrome.i18n.getUILanguage();
  const { preferredLang } = await chrome.storage.sync.get('preferredLang');

  if (!preferredLang && !userLang.startsWith('zh')) {
    // 用户使用非中文系统，但仍可提示
    const available = ['en', 'zh_CN', 'ja', 'ko'];
    const bestMatch = available.find(l => userLang.startsWith(l.split('_')[0]));

    if (bestMatch && bestMatch !== 'en') {
      chrome.notifications.create('lang-suggest', {
        type: 'basic',
        iconUrl: 'icons/icon-128.png',
        title: 'Language Available',
        message: `This extension is available in your language. Check Settings.`
      });
    }
  }
}

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'searchWeb',
    title: chrome.i18n.getMessage('contextMenuSearch'),
    contexts: ['selection']
  });

  chrome.contextMenus.create({
    id: 'saveToCollection',
    title: chrome.i18n.getMessage('contextMenuSave'),
    contexts: ['selection', 'link', 'image']
  });
});