如何使用Chrome.i18n Web扩展API检索消息的内容。

Question

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

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

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

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

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

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

Answer 1

要获取“ messages.json”文件，您必须使用“ fetch”并使用” chrome.runtime“ API和“ geturl”方法。

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-＆gt; en-＆gt;消息
_locales-＆gt; es-＆gt;消息

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

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

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

两种方式迭代并返回给定对象的键。更多信息：与对象一起工作。

最终代码：这将返回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 - ＆gt; en - ＆gt; messages.json”：

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

控制台中的结果将是：

我的扩展名称

很棒的扩展。

Sorry if the wording is not correct or I am very repetitive, I had to use the translator.