Search code examples
reactjstypescriptgoogle-chrome-extensionlocalizationnavigator

How to use navigator.langugage for localization

I am trying to use navigator.langauge in react and I want to show greeting message in their local language by default and greetings should be according to hour. Can we use navigator.lang to do so?

I have tired react i18 but it doesn't work in chrome extension

Solution

  • This is a multilingual sample.

    manifest.json

    {
  "name": "__MSG_extName__",
  "version": "1.0",
  "manifest_version": 3,
  "default_locale": "en",
  "action": {
    "default_popup": "popup.html"
  }
}

    popup.html

    <html>
<body style="min-width:400px">
  <div id="hello"></div>
  <script src="popup.js"></script>
</body>
</html>

    popup.js

    const hello = chrome.i18n.getMessage("hello");
document.getElementById("hello").innerText = hello;

    _locales\en\messages.json

    {
  "extName": {
    "message": "Hello."
  },
  "hello": {
    "message": "Hello."
  }
}

    _locales\ja\messages.json

    {
  "extName": {
    "message": "こんにちは。"
  },
  "hello": {
    "message": "こんにちは。"
  }
}