谷歌插件笔记07——国际化，关于i18n的使用因为谷歌在全世界的流行使用，所以要做一个多地区比较通用的扩展的话，对谷歌扩

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

基本使用

使用谷歌扩展的国际化，需要在根目录下新建一个_locales文件夹，并且在该文件夹下新建对应的语言的文件夹，例如：_locales/en这样的结构。

接着在_locales/en文件夹下，需要新建一个messages.json文件，该文件就是一个实现国际化的字典文件，其目录结构如下：

对于messages.json文件，其内容格式应该如下图所示：

其中，extName就是一个标识，message就是标识对应的内容，description标识该标识的一个描述。

重要提示：
如果扩展有_locales目录，则清单必须定义“default_locale”。

那么怎么在代码中使用该标识呢？方式如下：

在manifest.json文件中，通过__MSG_messagename__这样的格式引入，例如：

{
  "name": "__MSG_title__",
  "description": "description.",
  "version": "0.0.1",
  "manifest_version": 3,
  "default_locale": "en",
  "action": {
    "default_title": "i18n",
    "default_icon": "logo.png",
    "default_popup": "popup.html"
  }
}

// _locales/en/messages.json
{
  "title": {
    "message": "International",
    "description": "title"
  }
}

上面，插件名称就使用了messages.json文件中的title标识，在页面中的显示如下图：

在JavaScript文件中使用，则需要通过chrome.i18n.getMessage这个内置API来实现，代码如下：

// popup.js
const title = chrome.i18n.getMessage("title")
document.querySelector('body').innerHTML = title

其效果图如下：

占位符

在messages.json中进行配置时，可以使用占位符，让在编写国际化时能更加的灵活。使用方式是通过 $placehoder$ 在代码中占位，然后通过placeholder定义对应的信息，例如：

// _locales/en/messages.json
{
  "title": {
    "message": "International $title$ $subtitle$",
    "description": "title",
    "placeholders": {
      "title": {
        "content": "$1"
      },
      "subtitle": {
        "content": "$2"
      }
    }
  }
}

// popup.js
const title = chrome.i18n.getMessage("title",  ["hello", "i18n"])
document.querySelector('body').innerHTML = title

其效果图如下：

其他方法

谷歌内置的国家化还提供以下几个API方法：

getAcceptLanguages
以从浏览器获取接受的语言类型
detectLanguage
检测对应字符串可国际化的类型
detectLanguage
获取浏览器的浏览器 UI 语言，与i18n.getAcceptLanguages返回首选用户语言不同。

分别对几个方法进行测试，可以看到如下结果：

// popup.js
const lang = chrome.i18n.getUILanguage()
console.log('getUILanguage:', lang)

chrome.i18n.getAcceptLanguages(e => {
  console.log('getAcceptLanguages:', e)
})

chrome.i18n.detectLanguage('title', e => {
  console.log('detectLanguage title', e)
})

遗憾的是，我并没有在文档中找到能动态修改国际化的方法。
这样的话，国际化只能在插件市场中起到一个支持语言的功能，然后或许根据默认的UI语言来匹配设置好的国际化字典吧。

至此，就已经基本了解了谷歌国际化的使用了:)

谷歌插件笔记07——国际化，关于i18n的使用

相关简介

基本使用

占位符

其他方法