localization in Chrome extensions

问题

I have a query related to localization of Chrome extensions. I am trying to localize the text in a button in a popup html file in my extension. The code I am using is as follows:

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

       </label>
</button>

The javascript code is as follows:

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

I have tried using innerText, innerHTML, value but the text in the button is not applied. Am I doing something wrong here?

回答1:

I would just use <input type="button"> and set the value property of the button:

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

....

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

By the way, I'm fairly certain having a <label> nested inside of a <button> is not valid HTML. Use a <div> or <span> instead.

EDIT:

I just did a test, and using either .innerHTML or .innerText should work fine. Are you sure that:

1. the return value of chrome.i18n.getMessage("SaveButton") is non-empty?

2. you are running document.getElementById("buttonSave") after the DOM is built (i.e., document.getElementById("buttonSave") is not null or throwing an error)?

Also, understand that overwriting the innerText or innerHTML of the button will destroy the elements you have inside the button already. Perhaps you actually want to do document.querySelector("#buttonSave .buttonTextStyle").innerText to write the the element nested inside the button?

来源：https://stackoverflow.com/questions/11612355/localization-in-chrome-extensions