Use chrome extension i18n in injected script

inject_i18n.md

Use Chrome Extension i18n in Injected Script

Introduction

Injected script has no access to chrome.i18n namespace. It would be a problem when injected script requires some i18n work. A solution is describled in this documentation.

Basic Idea

The i18n method proposed in this official documentation suggests that develops put all i18n string in messages.json file. If we could get the URL to current locale file, we can then load the JSON with XMLHttpRequest. Another documentation tells us that current locale name can be accessed by using @@ui_locale message.

Solution

Content script:

# Excaping
toLiteral = (str) ->
        dict = {'\b': 'b', '\t': 't', '\n': 'n', '\v': 'v', '\f': 'f', '\r': 'r'}
        return str.replace /// ([\\\'\"\b\t\n\v\f\r]) ///g, ($0, $1) ->
                return '\\' + (dict[$1] || $1);

# Inject a variable via JSON
injectJson = (name, value) ->
        code = "var #{name} = JSON.parse('#{toLiteral JSON.stringify(value)}');"
        console.log "Inject #{code}"
        elem = document.createElement('script')
        elem.textContent = code
        (document.head || document.documentElement).appendChild(elem)
        
# Calculate URL to current i18n json
locale = chrome.i18n.getMessage "@@ui_locale"
i18n_url = chrome.extension.getURL("/_locales/#{locale}/messages.json")

# Make request
xhr = new XMLHttpRequest()
xhr.onreadystatechange = () ->
        if xhr.readyState == 4
                # Response
                # Parse once here gives us a chance to handle errors
                i18n = JSON.parse xhr.responseText
                injectJson "i18n", i18n
                
xhr.open "GET", i18n_url
xhr.send()

In injected script, we will have a varialbe named i18n:

msg1 = i18n.entry1.message
# or
msg2 = i18n["entry2"].message