如何使用 chrome.i18n Web 扩展 API 检索 message.json 文件的内容答案

【问题标题】：How to retrieve contents of message.json file with chrome.i18n web extension API如何使用 chrome.i18n Web 扩展 API 检索 message.json 文件的内容
【发布时间】：2022-10-05 02:42:55
【问题描述】：

使用 chrome 的 chrome.i18n API 时，chrome.i18n.getMessage 方法一次只检索一条消息。

const buttonText = chrome.i18n.getMessage('buttonText');

我想要的是在弹出窗口打开时更新弹出 UI，并带有 message.json 文件的本地化内容。这样做需要我知道使用的消息名称。是否有类似于getMessage 的方法/技术一次检索message.json 文件的所有内容？

现在，我只能将所有消息名称保存在某个地方并单独检索每个本地化消息，例如：


const messages = ["buttonText", "buttonTitle"];

messages.forEach((message) => {
  const messageText = chrome.i18n.getMessage(message);
  // Update UI
});

【问题讨论】：

没有 API，但您可以使用 fetch 或 XMLHttpRequest 将文件读取为 json。

标签： javascript google-chrome-extension firefox-addon browser-extension

【解决方案1】：

要获取“messages.json”文件，您必须使用“fetch”并使用"chrome.runtime" API and the "getURL" method 访问文件的 URL。

fetch(chrome.runtime.getURL(`_locales/en/messages.json`))

唯一的问题是，这样你必须自己指定语言并验证它，我就是这样做的：

let lang = 'en';
if (["es"].includes(chrome.i18n.getUILanguage().split('-')[0])) {
    lang = chrome.i18n.getUILanguage().split('-')[0];
}
fetch(chrome.runtime.getURL(`_locales/${lang}/popup_content.json`))

检测浏览器的语言并验证它是否存在于我的扩展中，除了默认语言，在这种情况下为英语，如果它不存在于数组中，则它不会被修改并默认保留。

我的“_locales”目录：
_locales -> en -> messages.json
_locales -> es -> messages.json

最后，为了迭代“messages.json”的结果，因为它是一个对象，我找到了这些方法：

for (let key in obj) {
    console.log(obj[key]);
}

Object.keys(obj).forEach(key => {
    console.log(obj[key]);
});

两种方式都迭代并返回给定对象的键。更多信息：Working with objects。

最终代码：这将返回 json 主对象中每个对象的“消息”键的每个值。

let lang = 'en';
if (["es"].includes(chrome.i18n.getUILanguage().split('-')[0])) {
    lang = chrome.i18n.getUILanguage().split('-')[0];
}
fetch(chrome.runtime.getURL(`_locales/${lang}/messages.json`)).then(res=> {
    res.json().then(json=> {
        Object.keys(json).forEach(key => {
            console.log(json[key].message);
        });
    });
});

文件“_locales -> en -> messages.json”：

{
  "appName": {
    "message": "Name of my extension"
  },
  "appDesc": {
    "message": "Awesome extension."
  }
}

控制台中的结果将类似于：

我的扩展名

很棒的扩展。

很抱歉，如果措辞不正确或我非常重复，我不得不使用翻译器。

【讨论】：