我的 Google Chrome 扩展程序的 HTML 页面国际化

Question

我找到了一种非常简单的方法来实现Google Chrome 扩展的翻译（或本地化），但这似乎只适用于.json 、 css和js文件。

但是如何本地化我的html内容，比如在弹出窗口或选项窗口中？

Answer 1

你会做的是这个。

首先，在您的 HTML 中使用与 Chrome 在其他任何地方要求的相同的语法。 所以你的基本popup.html将是：

<!DOCTYPE html>
<html>
<head>
<title>__MSG_app_title__</title>
</head>
<body>

<a href="http://example.com/" title="__MSG_prompt001__">__MSG_link001__</a>

<!-- Need to call our JS to do the localization -->
<script src="popup.js"></script>
</body>
</html>

然后在_locales\\en\\messages.json提供通常的翻译：

{
    "app_title": {
        "message": "MyApp",
        "description": "Name of the extension"
    },
    "link001": {
        "message": "My link",
        "description": "Link name for the page"
    },
    "prompt001": {
        "message": "Click this link",
        "description": "User prompt for the link"
    }
}

最后，您的popup.js将执行实际的本地化：

function localizeHtmlPage()
{
    //Localize by replacing __MSG_***__ meta tags
    var objects = document.getElementsByTagName('html');
    for (var j = 0; j < objects.length; j++)
    {
        var obj = objects[j];

        var valStrH = obj.innerHTML.toString();
        var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
        {
            return v1 ? chrome.i18n.getMessage(v1) : "";
        });

        if(valNewH != valStrH)
        {
            obj.innerHTML = valNewH;
        }
    }
}

localizeHtmlPage();

Answer 2

简单明了：

{
  "exmaple_key": {
    "message": "example_translation"
  }
}

<sometag data-locale="example_key">fallback text</sometag>

document.querySelectorAll('[data-locale]').forEach(elem => {
  elem.innerText = chrome.i18n.getMessage(elem.dataset.locale)
})

Answer 3

从 ahmd0 的答案中构建。 使用数据属性允许硬编码回退。

<!DOCTYPE html>
<html>
    <head>
        <title data-localize="__MSG_app_title__">My Default Title</title>
    </head>
    <body>
        <a href="http://example.com/" title="__MSG_prompt001__" data-localize="__MSG_link001__">Default link text</a>

        <script src="localize.js"></script>
    </body>
</html>

然后在_locales\\en\\messages.json提供通常的翻译：

{
    "app_title": {
        "message": "MyApp",
        "description": "Name of the extension"
    },
    "link001": {
        "message": "My link",
        "description": "Link name for the page"
    },
    "prompt001": {
        "message": "Click this link",
        "description": "User prompt for the link"
    }
}

最后你的localize.js将执行实际的本地化：

function replace_i18n(obj, tag) {
    var msg = tag.replace(/__MSG_(\w+)__/g, function(match, v1) {
        return v1 ? chrome.i18n.getMessage(v1) : '';
    });

    if(msg != tag) obj.innerHTML = msg;
}

function localizeHtmlPage() {
    // Localize using __MSG_***__ data tags
    var data = document.querySelectorAll('[data-localize]');

    for (var i in data) if (data.hasOwnProperty(i)) {
        var obj = data[i];
        var tag = obj.getAttribute('data-localize').toString();

        replace_i18n(obj, tag);
    }

    // Localize everything else by replacing all __MSG_***__ tags
    var page = document.getElementsByTagName('html');

    for (var j = 0; j < page.length; j++) {
        var obj = page[j];
        var tag = obj.innerHTML.toString();

        replace_i18n(obj, tag);
    }
}

localizeHtmlPage();

硬编码回退避免了 i18n 标签在 JavaScript 进行替换时可见。 硬编码似乎否定了国际化的想法，但在 Chrome 支持直接在 HTML 中使用 i18n 之前，我们需要使用 JavaScript。

Answer 4

正如 RobW 在评论中指出的那样，创建了使用相同机制在 HTML 中添加 i18n 支持的功能请求，但此后由于性能和安全问题而被拒绝。 因此，您不能使用相同的方法。

该问题提到了一种可能的解决方法：为每种语言设置单独的 HTML 页面并在清单中在它们之间切换：

  "browser_action": {
    "default_popup": "__MSG_browser_action_page__"
  }

但如果这不是一个合适的方法，唯一的方法是通过 JavaScript 动态翻译页面。 您提到了一个最简单的解决方案，只需标记元素以使用 id 进行翻译并在页面加载时替换它们。

您还可以与 Chrome 的方法并行使用更复杂的工具，如webL10n 。 请注意，您可能仍应最低限度地实施 Chrome 的方法，以便网上应用店知道该项目支持多种语言。

Answer 5

无需解析完整的 DOM，只需向必须翻译的元素添加一个“localize”类并添加数据属性data-localize="open_dashboard"

<div class="localize" data-localize="open_dashboard" >
  Open Dashboard
</div>

JavaScript :

$('.localize').each(function(index,item){
    var localizeKey = $(item).data( 'localize' );
    $(item).html(chrome.i18n.getMessage(localizeKey));
});

'_locales/en/messages.json' 文件

{
    "open_dashboard": {
        "message": "Open Dashboard",
        "description": "Opens the app dashboard"
    }
}

Answer 6

避免替换的解决方法：

使用简单的“重定向”

它适用于弹出窗口和选项

1. 在您的清单中，声明默认弹出窗口

   "default_popup": "popup/redirect.html"

2. popup/redirect.html几乎是空的。 它只包含重定向脚本的脚本链接

    <!DOCTYPE html> <html> <head></head> <body> <script src="redirect.js"></script> </body>

3. popup/redirect.js文件也非常简单：

    var currentlang = chrome.i18n.getMessage("lang"); var popupUrl = chrome.runtime.getURL("popup/popup-"+currentlang+".html"); window.location.href = popupUrl;

4. 创建多个已本地化的弹出窗口：

   • popup-fr.html
   • popup-en.html

5. 进入您的每个 messages.json 文件（在 _locales 中）并添加一个“ lang ”消息，并使用当前语言缩写作为值： en表示英语 json，fr 表示法语 json...

   • _locales/en/message.json 的示例：

      "lang": { "message": "en", "description": "Locale language of the extension." },

一个非常小的项目的简单解决方法......对于大型项目绝对不是一个好的选择。 它也适用于选项页面。

Answer 7

在弹出的 html 中本地化您的内容的方法之一是从 javascript onLoad 中获取它。 将字符串存储在您所支持的各种语言下的 _locales 文件夹中，如此处所述，并执行 chrome.i18n.getMessage("messagename") 以获取和加载变量字符串，并使用 javascript/jquery onLoad 函数为您的每个 html 元素设置它们background.js 或您在 html 页面加载之前加载的任何 js。

Answer 8

我遇到了同样的问题，但我通过使用自定义数据属性的简单方法解决了它。

实现一个使用chrome.i18n的本地化类并在DOMContentLoaded事件中调用它。 在 HTML 中，使用data-chrome-i18n属性标记要本地化的元素。 （此属性名称是暂时命名的。）将消息名称指定为此属性的值可以本地化元素的文本内容。 如果要本地化属性，请以attribute_name=message_name格式指定它。 可以通过将它们分开来指定多个规范; .

 const i18n = (window.browser || window.chrome || {}).i18n || { getMessage: () => undefined }; class Localizer { constructor(options = {}) { const { translate = Localizer.defaultTranslate, attributeName = Localizer.defaultAttributeName, parse = Localizer.defaultParse } = options; this.translate = translate; this.attributeName = attributeName; this.parse = parse; } localizeElement(element) { for (const [destination, name] of this.parse(element.getAttribute(this.attributeName))) { if (!name) continue; const message = this.translate(name) || ''; if (!destination) { element.textContent = message; } else { element.setAttribute(destination, message); } } } localize(target = window.document) { const nodes = target instanceof NodeList ? target : target.querySelectorAll(`[${CSS.escape(this.attributeName)}]`); for (const node of nodes) this.localizeElement(node); } } Localizer.defaultTranslate = i18n.getMessage; Localizer.defaultAttributeName = 'data-chrome-i18n'; Localizer.defaultParse = (value) => { return (value || '').split(';').map(text => (text.includes('=') ? text.split('=') : ['', text])); }; const localizer = new Localizer(); window.addEventListener('DOMContentLoaded', () => { localizer.localize(); });

 <!DOCTYPE html> <html data-chrome-i18n="lang=@@ui_locale"> <head> <meta charset="UTF-8" /> <title data-chrome-i18n="extensionName"></title> </head> <body> <p data-chrome-i18n="foo;title=bar;lang=@@ui_locale"></p> </body> </html>

要解决这个问题，有几件事需要考虑。

• 使用chrome.i18n （许多人希望在messages.json 中聚合。）
• 支持属性以及元素内容
• 不仅支持弹出，还支持选项页面
• 渲染性能
• 安全

首先，在manifest.json中为每种语言切换 HTML 的方法不起作用。 即使您将__MSG_*__给default_popup字段，popup 仍然会显示错误“ERR_FILE_NOT_FOUND”。 我不知道为什么。 Chrome extensions Developer Guide 中没有对default_popup详细参考，但MDN提到它是一个可本地化的属性。 同样，如果您将__MSG _*__赋予options_ui的page字段，则扩展本身将无法加载。

直觉上觉得在HTML中替换__MSG_*__ ，使用innerHTML重写结果的做法存在性能和安全问题。

Answer 9

这个答案很酷！

我想做一些修改。

对于 chrome 93.0.4577.63 chrome.i18n.getMessage ^{永久链接， 按版本链接}

chrome.i18n.getMessage（消息名称，替换，{escapeLt}）

所以我想让它支持

• 替换
• 逃生

测试数据

// _locales/en/messages.json
{
  "hello": {    
    "message": "<b>Hello</b> $USER$ Welcoming $OUR_SITE$. $EMOJI$",
    "description": "Greet the user",
    "placeholders": {
      "user": {
        "content": "$1", // chrome.i18n.getMessage("hello", "variable 1")
        "example": "Carson"
      },
      "our_site": {
        "content": "Example.com"
      },
      "emoji": {
        "content": "$2",
        "example": "\uD83D\uDE42" // 🙂, 😎
      }
    }
  },
  "app": {
    "message": "My cool APP.",
    "description": "description"
  }
}

<!-- test.html-->

<script src="my-i18n.js"></script>

<p data-i18n="__MSG_hello__"></p>

<p data-i18n="__MSG_hello__<b>Carson</b>"></p>
<p data-i18n="__MSG_hello__<b>Carson</b>|0"></p>
<p data-i18n="__MSG_hello__<i>Carson</i>|1"></p>

<button title="__MSG_hello__<b>Carson</b>" data-i18n></button>
<button title="__MSG_hello__<b>Carson</b>|0" data-i18n></button>
<button title="__MSG_hello__<b>Carson</b>|1" data-i18n></button>

<p title="__MSG_app__" data-i18n="__MSG_hello__Carson,🙂"></p>

输出

脚本

// my-i18n.js


/**
 * @param {string} msg "__MSG_Hello__para1,para2|1"  or "__MSG_Hello__para1,para2|0"
 * */
function convertMsgAsFuncPara(msg) {
  const match = /__MSG_(?<id>\w+)__(?<para>[^|]*)?(\|(?<escapeLt>[01]{1}))?/g.exec(msg) // https://regex101.com/r/OeXezc/1/
  if (match) {
    let {groups: {id, para, escapeLt}} = match
    para = para ?? ""
    escapeLt = escapeLt ?? false
    return [id, para.split(","), Boolean(Number(escapeLt))]
  }
  return [undefined]
}

function InitI18nNode() {
  const msgNodeArray = document.querySelectorAll(`[data-i18n]`)
  msgNodeArray.forEach(msgNode => {
    const [id, paraArray, escapeLt] = convertMsgAsFuncPara(msgNode.getAttribute("data-i18n"))
    if (id) {
      msgNode.innerHTML = chrome.i18n.getMessage(id, paraArray, {escapeLt})
    }

    // ↓ handle attr
    for (const attr of msgNode.attributes) {
      const [attrName, attrValue] = [attr.nodeName, attr.nodeValue]
      const [id, paraArray, escapeLt] = convertMsgAsFuncPara(attrValue)
      if (!id) {
        continue
      }
      msgNode.setAttribute(attrName, chrome.i18n.getMessage(id, paraArray, {escapeLt}))
    }
  })
}

(() => {
  window.addEventListener("load", InitI18nNode, {once: true})
})()

Answer 10

批量修改伪类内容。

 <div data-content="font"></div>

div::before {
  content: attr(data-content);
}

document.querySelectorAll('[data-content]').forEach(el => {
  el.dataset.content = chrome.i18n.getMessage(el.dataset.content);
});

使用 CSS 国际化。

<p></p>

p::before {
  content: "__MSG_font__";
}

Answer 11

另一种解决方法 - 您可以在__MSG_myText使用 css 中的content属性。

Answer 12

使用 Vue.js：

<html>
  <head>
  </head>
  <body>
    <div id="app">{{msgTranslated}}</div>
  </body>
</html>

注入的javascript文件：

new Vue({
  el: '#app',
  data: {
    msgTranslated: chrome.i18n.getMessage("message")
  }
})