Internationalization Of Html Pages For My Google Chrome Extension

December 27, 2023 Post a Comment

I found a very easy way to implement translation (or localization) of my Google Chrome Extension, but that seems to apply only to .json, css and js files. But how to localize my ht

Solution 1:

What you would do is this.

First, in your HTML use the same syntax as Chrome requires anywhere else. So your basic popup.html will be:

<!DOCTYPE html><html><head><title>__MSG_app_title__</title></head><body><ahref="http://example.com/"title="__MSG_prompt001__">__MSG_link001__</a><!-- Need to call our JS to do the localization --><scriptsrc="popup.js"></script></body></html>

Then provide the usual translation in _locales\en\messages.json:

{"app_title":{"message":"MyApp","description":"Name of the extension"},"link001":{"message":"My link","description":"Link name for the page"},"prompt001":{"message":"Click this link","description":"User prompt for the link"}}

And finally your popup.js will perform the actual localization:

functionlocalizeHtmlPage()
{
    //Localize by replacing __MSG_***__ meta tagsvar objects = document.getElementsByTagName('html');
    for (var j = 0; j < objects.length; j++)
    {
        var obj = objects[j];

        var valStrH = obj.innerHTML.toString();
        var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
        {
            return v1 ? chrome.i18n.getMessage(v1) : "";
        });

        if(valNewH != valStrH)
        {
            obj.innerHTML = valNewH;
        }
    }
}

localizeHtmlPage();

Solution 2:

Plain an simple:

{"exmaple_key":{"message":"example_translation"}}

<sometagdata-locale="example_key">fallback text</sometag>

document.querySelectorAll('[data-locale]').forEach(elem => {
  elem.innerText = chrome.i18n.getMessage(elem.dataset.locale)
})

Solution 3:

Building from ahmd0's answer. Use a data attribute to allow a hard-coded fallback.

<!DOCTYPE html><html><head><titledata-localize="__MSG_app_title__">My Default Title</title></head><body><ahref="http://example.com/"title="__MSG_prompt001__"data-localize="__MSG_link001__">Default link text</a><scriptsrc="localize.js"></script></body></html>

Then provide the usual translation in _locales\en\messages.json:

{"app_title":{"message":"MyApp","description":"Name of the extension"},"link001":{"message":"My link","description":"Link name for the page"},"prompt001":{"message":"Click this link","description":"User prompt for the link"}}

And finally your localize.js will perform the actual localization:

functionreplace_i18n(obj, tag) {
    var msg = tag.replace(/__MSG_(\w+)__/g, function(match, v1) {
        return v1 ? chrome.i18n.getMessage(v1) : '';
    });

    if(msg != tag) obj.innerHTML = msg;
}

functionlocalizeHtmlPage() {
    // Localize using __MSG_***__ data tagsvar data = document.querySelectorAll('[data-localize]');

    for (var i in data) if (data.hasOwnProperty(i)) {
        var obj = data[i];
        var tag = obj.getAttribute('data-localize').toString();

        replace_i18n(obj, tag);
    }

    // Localize everything else by replacing all __MSG_***__ tagsvar page = document.getElementsByTagName('html');

    for (var j = 0; j < page.length; j++) {
        var obj = page[j];
        var tag = obj.innerHTML.toString();

        replace_i18n(obj, tag);
    }
}

localizeHtmlPage();

The hard-coded fallback avoids the i18n tags being visible while the JavaScript does the replacements. Hard-coding seems to negate the idea of internationalisation, but until Chrome supports i18n use directly in HTML we need to use JavaScript.

Solution 4:

As RobW noted in a comment, a feature request for adding i18n support in HTML using the same mechanism was created, but it has since then been rejected due to performance and security concerns. Therefore you can't use the same approach.

The issue mentions one possible workaround: to have separate HTML pages per language and switch between them in the manifest:

"browser_action":{"default_popup":"__MSG_browser_action_page__"}

But if that's not a suitable approach, the only way is to translate the page dynamically via JavaScript. You mention a solution the simplest approach, by just tagging elements to translate with ids and replacing them on page load.

You can also employ more sophisticated tools like webL10n in parallel with Chrome's approach. Note that you should probably still minimally implement Chrome's approach, so that Web Store knows that the item is supporting several languages.

Solution 5:

Rather than parsing the full DOM, just add a class "localize" to the elements that have to be translated and add a data attribute data-localize="open_dashboard"

<divclass="localize"data-localize="open_dashboard" >
  Open Dashboard
</div>

JavaScript :

$('.localize').each(function(index,item){
    var localizeKey = $(item).data( 'localize' );
    $(item).html(chrome.i18n.getMessage(localizeKey));
});

'_locales/en/messages.json' file

{"open_dashboard":{"message":"Open Dashboard","description":"Opens the app dashboard"}}

JavaScript Controls