for example in my manifest.json there is a param:

  "default_locale": "en"

the question is how can I dynamically change the language in the javascript code?

can't find any examples on the docs about specific methods...

also my data is binded like this:

<div data-l10n-id="key_download"></div>

it is dynamically parsed in the html, but how can I change the language it chooses?

for example in my manifest.json there is a param:

  "default_locale": "en"

the question is how can I dynamically change the language in the javascript code?

can't find any examples on the docs about specific methods...

also my data is binded like this:

<div data-l10n-id="key_download"></div>

it is dynamically parsed in the html, but how can I change the language it chooses?

• javascript
• google-chrome-extension

2 Answers 2

The point of the built-in chrome.i18n API is to make extensions match the UI language of the browser so there's no chrome API way to change it programmatically, you'll have to implement it yourself or use one of the existing js libraries.

Read the official chrome.i18n documentation for more details and examples of how to facilitate testing of your extension with different UI languages of the browser.

you tagged you question as google chrome extension, but the API you use is from mozilla docs

the system behind chrome.i18n API is that it relies on messages.json files for different languages
If developer implemented language support for particular language (added messages.json into locales folder) and that language is recognized by Chrome (browser language), Chrome will use that file.
That file is in form of key-value.
It means that, for every key there is a value that will be used depending on browser language.
String that you want to use, you simple describe with key (like in your example, but for Chrome is data-i18n)

<div data-i18n="key_download"></div>

and in your messages.json files, add value to that key
default is English, this is what you defined in your manifest

"default_locale": "en"

so if there is no key in used messages, if will fallback to messages.json defined in en subfolder of your locales folder (and if that file also lacks that key ...nothing, no string will be added)

So, back to that key_downlaod
in en subfolder, in your messages.json you will have:

{
    "key_downlaod ": {
        "message": "download"
    },
    ............
}

and in your hr subfolder (example for Croatian), in messages.json it will be:

{
    "key_downlaod ": {
        "message": "preuzmi"
    },
    ............
}

it's easy when you can add those keys to HTML, but if you need it dynamically from javascript, collect all elements with data-i18n attribute and add text strings to them based on their key

var i18n_elem = document.querySelectorAll('[data-i18n]');

for (var j=i18n_elem.length-1; j>=0; j--) 
    i18n_elem[j].textContent = chrome.i18n.getMessage(i18n_elem[j].getAttribute('data-i18n'));

or, you can add text string directly to element (maybe in the moment of creation). Example for button title:

someElement.title = chrome.i18n.getMessage('key_open');

key_open is key from your messages file. No need to add prefix key_, I just add it for better understanding, you can call those keys whatever you like, but uniquely.

another use case is when you need to change some elements (eg. width) for different languages
get UI language and then do your job

var getLang = chrome.i18n.getUILanguage();

if (getLang === 'ru') {
    //whatever
} else if (getLang === 'de') {
    //whatever
}