Chrome拡張機能のServiceWorker上でchrome.i18n.getMessage()が取れない時の対応法

2021/07/12（月）

この記事は2021/07/31（土）にメンテナンスが行われています。

Chrome Extensions Manifest V2からV3へ移行するタイミングでchrome.i18n.getMessage()が取れなくなる事象に出会いましたので、その時行った対処法を残しておきます。

コードを交えた具体的な内容としては、background.jsにて以下のi18n対応用のファイルを読み込んでいました。

'use strict'

// 日本語
import _messages from '../../../../dist/_locales/ja/messages.json'

const config = require('../../_' + process.env.NODE_ENV)

/**
 * i18n
 * @param {string} name
 */
export default name => {
  return config.env.status === 'production'
    ? chrome.i18n.getMessage(name)
    : _messages[name].message
}

production時にchrome.i18n.getMessage()でlocaleに合わせた翻訳ファイルを読むというなんていうことのない内容なのですが、どうやらそもそもnot a functionに。

V3ではbackground.jsがService Workerへ移行しますが、調べてみるとこのService Worker上でどうやらchrome.i18nが利用できない状況のようで、bugs.chromium.orgでも「Service Worker上でchrome.i18nが利用できない」という報告が複数上がっていました。
getMessage()以外にもgetUILanguage()も同様に利用出来ないようです。

いずれ解消される可能性もあるので待つのもありでしたが、私のプロダクトでは翻訳ファイルを読み込むだけでしか使用していなかったのでchrome.i18n.getMessage()を使わない方法に変更することで対応しました。

'use strict'

// 英語
import en from '../../../../dist/_locales/en/messages.json'
// スペイン語
import es from '../../../../dist/_locales/es/messages.json'
// 日本語
import ja from '../../../../dist/_locales/ja/messages.json'
// タイ語
import th from '../../../../dist/_locales/th/messages.json'
// ベトナム語
import vi from '../../../../dist/_locales/vi/messages.json'
// 中国語（繁体字）
import zh from '../../../../dist/_locales/zh/messages.json'

const i18n = {
  en: en,
  es: es,
  ja: ja,
  th: th,
  vi: vi,
  zh: zh
}

/**
 * i18n
 * @param {string} name
 */
export default name => {
  return i18n[navigator.language.slice(0, 2)].name
}

Extension APIの使用有無での分岐が必要なくなったのは副作用としては嬉しいものでした。（ただし.jsファイルのバンドルサイズは翻訳ファイル分増加します）

V3移行の際に、翻訳ファイルの読み込みなどの局所的な利用でchrome.i18n.getMessage()を使用している場合はnavigator.languageへ切り替えてみるのも対応手段としてありだと思います。

ただし根本的な解消まで待つ必要がある方は暫くIssue 1159438を追ってみると良さそうです。