Geek Answers Handbook

Internationalizing HTML pages for my Google Chrome extension

I found a very simple way to implement the translation (or localization) of my Google Chrome extension, but this only looks like .json , css and js .

But how to localize my html content, say, in a popup or options window?

+8
javascript html google-chrome google-chrome-extension internationalization
source share
7 answers

As RobW noted in a comment, a function request to add i18n support to HTML using the same mechanism was created, but has since been rejected due to performance and security issues. Therefore, you cannot use the same approach.

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

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

But if this is not the right approach, the only way is to translate the page dynamically using JavaScript. You indicate the solution to the simplest approach by simply marking the elements for translation with ids and replacing them with the page load.

You can also use more sophisticated tools like webL10n in parallel with the Chrome approach. Please note that you should probably still use the Chrome approach minimally, so the web store knows that the item supports multiple languages.

+5
source share

What would you do is this.

First, your HTML uses the same syntax as Chrome. So your main popup.html will be:

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

Then specify the normal 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 do the actual localization:

 function localizeHtmlPage() { //Localize by replacing __MSG_***__ meta tags var 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();
+23
source share

Create from ahmd0 answer. Use the data attribute to enable hard-code backups.

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

Then specify the normal 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 do the current localization:

 function replace_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; } function localizeHtmlPage() { // Localize using __MSG_***__ data tags var 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_***__ tags var 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();

A hard-coded backup eliminates the visibility of i18n shortcuts when JavaScript performs replacements. Hard coding seems to deny the idea of ​​internationalization, but while Chrome does not support i18n directly in HTML, we need to use JavaScript.

+6
source share

Instead of parsing the complete DOM model, simply add the "localize" class to the elements you want to translate and add the data-localize="open_dashboard"

 <div class="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)); });

File '_locales / en / messages.json'

 { "open_dashboard": { "message": "Open Dashboard", "description": "Opens the app dashboard" } }
+1
source share

One way to localize your content in popup html is to extract it from javascript onLoad. Save the lines in the _locales folder under the different languages ​​you support, as indicated here , and make chrome.i18n.getMessage ("messagename") to extract and load the variable lines and set them using the javascript / jquery onLoad function for each html element from your background .js or any other js that you download before loading your html pages.

0
source share

Simply put:

 { "exmaple_key": { "message": "example_translation" } } 
 <sometag data-locale="example_key">fallback text</sometag> 
 document.querySelectorAll('[data-locale]').forEach(elem => { elem.innerText = chrome.i18n.getMessage(elem.dataset.locale) })
0
source share

Another workaround is you can use the content property in css with __MSG_myText inside.

-one
source share

More articles:


All Articles