How to use navigator.langugage for localization-CodePudding

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

CodePudding user response：

navigator.language is going to give you a string representing the language and dialect (example: en-US) that the user's browser is set to. If you want to just grab the language part (not the dialect), you could do this:

navigator.language.split('-').shift()

And it should give you just give you the "en" part.

CodePudding user response：

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": "こんにちは。"
  }
}