やりたいこと
chrome.i18nではJavaScriptから呼び出す他に、 manifest.json, CSSのローカライズに対応していますが、 HTMLのローカライズは対応していません。 その対応方法です。
前提条件
概要
- ローカライズしたい要素に以下のいずれかを付ける。
- 要素の中のテキストをローカライズしたい場合(spanなど):
data-i18n-text属性 - 要素のvalueをローカライズしたい場合(inputなど):
data-i18n-value属性
- 要素の中のテキストをローカライズしたい場合(spanなど):
- HTMLのこの属性を検索し、メッセージを置き換える。
手順
以下のような関数を作ります。
function localizeHtmlPage() {
document.querySelectorAll("[data-i18n-text]").forEach(element => {
const key = element.getAttribute("data-i18n-text");
element.textContent = chrome.i18n.getMessage(key);
});
document.querySelectorAll("[data-i18n-value]").forEach(element => {
const key = element.getAttribute("data-i18n-value");
element.value = chrome.i18n.getMessage(key);
});
}
補足
- 独自機能のため、カスタムデータ属性を使っています。
- 属性を1つにし、要素によってvalueかtextContentなのか切り替えることも可能ですが、明示的に指定したほうがシンプルだと判断しました。