Orion browser.18n.getMessage placeholder does not work in content script

mrdotb

Hi calling a translation with a placeholder from content script does not work.

The message is defined as

{
  "hello": {
    "message": "hello: $DETAILS$",
    "placeholders": {
      "details": {
        "content": "$1"
      }
    }
  }
}

called with

browser.i18n.getMessage('hello', ['world']);

On a chrome browser

On orion borwser IOS

Here is the small extension to reproduce the issue.
https://github.com/mrdotb/i18n-bug-orion

It's working for popup which is a different context.
On orion borwser IOS

The message should be interpolated.

1.3.22

mrdotb

Hi I have a good workaround that I use in my extension and works on Orion with minimal perf impact for other chrome browser.
You wrap the default i18n and don't use the built-in placeholder

const regex = /\{([A-Z]+)\}/g

// i18n('key', 'hi {user}',  ["bob"]) => hi bob
export default function i18n(
  key: string,
  fallbackMsg: string,
  placeholders: (string | number)[] = [],
): string {
  let msg

  // https://orionfeedback.org/d/11027-orion-browser18ngetmessage-placeholder-does-not-work-in-content-script
  // Do not use the extension i18n directly as it does not work in content scripts in Orion instead we use {PLACEHOLDER}
  // and replace them manually
  try {
    // @ts-ignore
    msg = browser.i18n.getMessage(key)
  } catch (_error) {
    msg = ''
  }

  if (msg === '') {
    msg = fallbackMsg
  }

  // Replace {VALUE} patterns with actual values
  if (placeholders.length > 0) {
    const ps = placeholders.map((p) => String(p))
    return replacePlaceholders(msg, ps)
  }

  return msg
}

function replacePlaceholders(msg: string, ps: string[]): string {
  return (msg.match(regex) || []).reduce((acc, placeholder, index) => {
    return acc.replace(placeholder, ps[index])
  }, msg)
}