Chrome 扩展中的本地化答案

【问题标题】：localization in Chrome extensionsChrome 扩展中的本地化
【发布时间】：2012-07-23 12:16:26
【问题描述】：

我有一个与 Chrome 扩展程序本地化相关的查询。我正在尝试在我的扩展程序的弹出 html 文件中本地化按钮中的文本。我使用的代码如下：

<button name="buttonSave" id="buttonSave" style="width: 100px; float: right;">
       <label class="buttonTextStyle">

       </label>
</button>

javascript代码如下：

document.getElementById("buttonSave").innerText = chrome.i18n.getMessage("SaveButton");

我尝试过使用innerText、innerHTML、value，但未应用按钮中的文本。我在这里做错了吗？

【问题讨论】：

标签： javascript html internationalization google-chrome-extension

【解决方案1】：

我会使用<input type="button"> 并设置按钮的value 属性：

<input type="button" name="buttonSave" id="buttonSave" style="width: 100px; float: right;">

....

document.getElementById("buttonSave").value = chrome.i18n.getMessage("SaveButton");

顺便说一句，我相当肯定将<label> 嵌套在<button> 内不是有效的HTML。请改用<div> 或<span>。

编辑：

我刚刚做了一个测试，使用.innerHTML 或.innerText 应该可以正常工作。你确定：

chrome.i18n.getMessage("SaveButton")的返回值非空？
您在构建 DOM 后运行 document.getElementById("buttonSave")（即，document.getElementById("buttonSave") 不为空或抛出错误）？

另外，请理解覆盖按钮的innerText 或innerHTML 会破坏按钮内已有的元素。也许你真的想做document.querySelector("#buttonSave .buttonTextStyle").innerText 来编写嵌套在按钮内的元素？

【讨论】：

谢谢。 :) document.querySelector("#buttonSave .buttonTextStyle").innerText 成功了。