I’ve tried with both Firefox 137.0.1 (aarch64) and Firefox Developer Edition 138.0b6 (aarch64), by setting the language to either only German or French in Firefox settings.
My extension’s default locale is “en” and I’ve created translations for a number of languages, including German (de) and French (fr). I’ve validated the messages.json files to make sure there were no syntax errors and I’ve also tried setting the default locale to “de” (German). However, the Options page is never being translated and is always in English!
Below is the code (from Options.js) that I’m using for translating the Options.html page:
function i18n() {
translateContent('data-i18n', 'textContent');
translateContent('data-i18n-placeholder', 'placeholder');
translateContent('data-i18n-title', 'title');
}
// Translate content based on data attributes
function translateContent(attribute, type) {
let i18nElements = document.querySelectorAll('[' + attribute + ']');
if (logToConsole) console.log(`Translating ${i18nElements.length} elements`);
if (logToConsole) console.log('Translating:', i18nElements);
i18nElements.forEach(i => {
const i18n_attrib = i.getAttribute(attribute); // Get key before try block
try {
const message = browser.i18n.getMessage(i18n_attrib); // Call getMessage
if (logToConsole) console.log(`Translating key: "${i18n_attrib}" used by element:`, i, 'Message:', message);
// Check if the message is empty or same as the key (indicates missing translation)
if (!message || message === i18n_attrib) {
if (logToConsole) console.warn(`Translation missing for key: "${i18n_attrib}" used by element:`, i);
// Optionally, leave the original text/placeholder/title instead of setting empty string
return; // Skip applying the empty/missing translation
}
switch (type) {
case 'textContent':
i.textContent = message;
break;
case 'placeholder':
i.placeholder = message;
break;
case 'title':
i.title = message;
break;
default:
break;
}
} catch (ex) { // Catch errors during getMessage itself
if (logToConsole) console.error(`Error getting translation for key "${i18n_attrib}":`, ex, "Element:", i);
}
});
}
i18n() is called when DOM has completed loading.
Would be most grateful if someone could help and explain what I’m doing wrong.