? ????? HTML, CSS ? JavaScript? ???? ???? Google Chrome ??? ????? ?????. ??? ??? ?? ???? ??? ??, ? ???? ?? ?? ?? ??? ??? ????.

?? ? :

• ??? ? ?????? Chrome? ??? ??? ??????.
• manifest.json ?? ?? - Extension? ?? ??.
• ?? ????? ??? ??? ??.
• ??? ?? ????? ?? ?? ??.
• ?? ??? ?? ?? ? ??.
• Chrome ? ???? ??? ????? (?? ? ???? ?????).

1. ?? ??? ?? ?? :

Chrome?? ??? ??? ????? ??????. ?? ?? ?? ?? ??????? ??? ? ? ????. Chrome? ??? ????? 3 ?? ?? ?? (? ?? ??)? ???? "? ?? ??"> "??"? ??? ?? ??? ??? "??? ??"?? ???? ????? ???????.

?? ??? ??? ?? ??? ??? Chrome Extension API ??? ??????.

2. manifest.json ?? :

??????? ? ?? (? : "LanguagePicker")? ????. ??,? ??? ???? manifest.json ??????.

 {
  "??": "?? ??",
  "??": "??? ?? ?? ??",
  "??": "1.0",
  "Manifest_version": 3,
  "??": {
    "Service_worker": "background.js"
  },
  "??": [ "????"],
  "??": {
    "default_popup": "popup.html"
  }
}

? ??? ?? popup.html ??, ??, ?? ???? ( background.js

3. ?? ??? ??? ?? :

???? ?? ?? "???"?? ????? ????. 5 ?? ??? ??? (? : ??, ???, ????? ?)? ?????? english.png , chinese.png ??? ??????.

4. background.js JS ??? ??? :

? ??? background.js ??????.

 ?? = 'URL (flags/earlogy.png)';

chrome.runtime.oninstalled.addlistener (() => {
  Chrome.storage.sync.set ({language});
  console.log (`?? ??? ??? ?? ??? ???? $ {language}`);
});

??? ?? ??? ??? ?????.

5. ?? ?? ??? ( popup.html ? popup.css ) :

popup.html ??? :

 


  <title>?? ???</title>
  <link rel="stylesheet" href="popup.css">


  <div id="flagOptions"></div>
  <script src="popup.js"></script>

popup.css ?? .CSS :

 .Container {?? : 300px; }
?? {?? : 30px; ?? : 30px; ?? : ??; ?? : ??; ??-???? : 50%; ?? : 10px; ?? ?? : ? ??; ?? ?? : ??; ?? ?? : ??; }
.CurrentFlag { / * ?? ??? ???? ?? ??? ?? * /}

6. ?? JavaScript ( popup.js ) :

popup.js ????.

// ... (JavaScript ??? ?? ??? ? ?? ??? ?? ??? ???? ????? ?? ??? ????? ???? ???) ...
````(? ????``OtherLangs '???? ?? ??? ???? ?????? JavaScript? ???? ???, ?? ???? ???? ??? ??? ???? ?? ?? UI? ???????. ?? ?? ???? ??? ?? ??? ????? ?? ???? ?? ? ? ????).


** 7. ?? ? ??? : **

`chrome : // extensions/`?? "???? ????"? ???? ???? ??? ???? ???? ???????.

** 8. ?? (??) : **

?? ? ??? ???? ???? ??? ????? (??? ??).

? ??? ? ??? ?? ?? ??? ????? ? ???? ??? ??? ?????. ??? ? ??? ??? ??? ??? ???? ?? ? 'popup.js'??? ??????.

? ??? Google ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!