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: &

Solution 1:

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

<inputtype="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?