Simple migration from SDK l10n to WebExtensions i18n for HTML pages

Add-ons Development
#1

Like a few add-on developers I’m currently porting as much of my extension as possible to WebExtensions. With using WebExtensions there’s no longer built in support to translate a HTML page (instead you’d want to swap out pages etc.).

I decided to see if it would be faster to just write a script that emulates what the Add-on SDK service did and it turns out, yes it was. Way faster than migrating to a different system.

You can find the result on https://gist.github.com/freaktechnik/4a72bc0711d9bc82cf3b075bcc292953

It does pretty much the same as what the SDK did, except that it doesn’t hide everything until the document is translated, so in the worst case there can be a quick flash of the original strings.

#2

except that it doesn’t hide everything until the document is translated, so in the worst case there can be a quick flash of the original strings

How about listening to “DOMContentLoaded” instead of “load” event?

#3

Depending on how the script is inserted that can lead to better results. I guess if you’d load it within the body of a document you wouldn’t even need the listener.

#4

This is cool. I’m using i18n, because I use React anyways, so the strings come through there. When Firefox supports the language changed event, I have plans to add in a update for that.

Apparently i18n allows us to localize CSS too, but I haven’t figured out how yet. The old way was to put the style in a xhtml page and use xhtml replacments.

Honestly I was never a fan of how the SDK did localization of HTML, so I always used XHTML. I’m not exactly sure how the i18n does it, but since I have no other options I haven’t dug in to see how it works.