ການຂຽນສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບທີ່ປອດໄພ

ບໍ່ຄືກັບສະຖາປັດຕະຍະກຳ "ລູກຄ້າ-ເຊີບເວີ" ທົ່ວໄປ, ແອັບພລິເຄຊັ່ນທີ່ມີການແບ່ງຂັ້ນຄຸ້ມຄອງແມ່ນມີລັກສະນະ:

• ບໍ່ຈໍາເປັນຕ້ອງເກັບຮັກສາຖານຂໍ້ມູນທີ່ມີການເຂົ້າສູ່ລະບົບຂອງຜູ້ໃຊ້ແລະລະຫັດຜ່ານ. ຂໍ້ມູນການເຂົ້າເຖິງແມ່ນຖືກເກັບຮັກສາໄວ້ສະເພາະໂດຍຜູ້ໃຊ້ເອງ, ແລະການຢືນຢັນຂອງຄວາມຖືກຕ້ອງຂອງພວກມັນເກີດຂື້ນໃນລະດັບໂປໂຕຄອນ.
• ບໍ່ຈໍາເປັນຕ້ອງໃຊ້ເຄື່ອງແມ່ຂ່າຍ. ເຫດຜົນຂອງຄໍາຮ້ອງສະຫມັກສາມາດຖືກປະຕິບັດຢູ່ໃນເຄືອຂ່າຍ blockchain, ບ່ອນທີ່ມັນເປັນໄປໄດ້ທີ່ຈະເກັບຮັກສາຈໍານວນຂໍ້ມູນທີ່ຕ້ອງການ.

ມີ 2 ການເກັບຮັກສາທີ່ຂ້ອນຂ້າງປອດໄພສໍາລັບລະຫັດຜູ້ໃຊ້ - ຮາດແວ wallets ແລະສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບ. ຮາດແວ wallets ສ່ວນຫຼາຍແມ່ນປອດໄພທີ່ສຸດ, ແຕ່ຍາກທີ່ຈະໃຊ້ແລະຢູ່ໄກຈາກບໍ່ເສຍຄ່າ, ແຕ່ການຂະຫຍາຍຂອງຕົວທ່ອງເວັບແມ່ນການປະສົມປະສານທີ່ສົມບູນແບບຂອງຄວາມປອດໄພແລະຄວາມງ່າຍໃນການນໍາໃຊ້, ແລະຍັງສາມາດບໍ່ເສຍຄ່າສໍາລັບຜູ້ໃຊ້ສຸດທ້າຍ.

ໂດຍພິຈາລະນາທັງຫມົດນີ້, ພວກເຮົາຕ້ອງການທີ່ຈະເຮັດໃຫ້ການຂະຫຍາຍທີ່ປອດໄພທີ່ສຸດທີ່ເຮັດໃຫ້ມັນງ່າຍຂຶ້ນໃນການພັດທະນາຄໍາຮ້ອງສະຫມັກການແບ່ງຂັ້ນຄຸ້ມຄອງໂດຍການສະຫນອງ API ງ່າຍດາຍສໍາລັບການເຮັດວຽກກັບທຸລະກໍາແລະລາຍເຊັນ.
ພວກເຮົາຈະບອກທ່ານກ່ຽວກັບປະສົບການນີ້ຂ້າງລຸ່ມນີ້.

ບົດຄວາມຈະປະກອບດ້ວຍຄໍາແນະນໍາຂັ້ນຕອນໂດຍຂັ້ນຕອນກ່ຽວກັບວິທີການຂຽນສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບ, ມີຕົວຢ່າງລະຫັດແລະ screenshots. ທ່ານສາມາດຊອກຫາລະຫັດທັງຫມົດໃນ ຄັງເກັບມ້ຽນ. ແຕ່ລະຄໍາຫມັ້ນສັນຍາຢ່າງມີເຫດຜົນກົງກັບພາກສ່ວນຂອງບົດຄວາມນີ້.

ປະຫວັດຫຍໍ້ຂອງສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບ

ສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບມີມາເປັນເວລາດົນແລ້ວ. ພວກມັນປາກົດຢູ່ໃນ Internet Explorer ໃນປີ 1999, ໃນ Firefox ໃນປີ 2004. ຢ່າງໃດກໍຕາມ, ສໍາລັບເວລາດົນນານບໍ່ມີມາດຕະຖານດຽວສໍາລັບການຂະຫຍາຍ.

ພວກເຮົາສາມາດເວົ້າໄດ້ວ່າມັນປາກົດພ້ອມກັບສ່ວນຂະຫຍາຍໃນ Google Chrome ຮຸ່ນທີສີ່. ແນ່ນອນ, ບໍ່ມີຂໍ້ມູນສະເພາະຫຼັງຈາກນັ້ນ, ແຕ່ມັນແມ່ນ Chrome API ທີ່ກາຍເປັນພື້ນຖານຂອງມັນ: ໂດຍໄດ້ເອົາຊະນະຕະຫຼາດຕົວທ່ອງເວັບສ່ວນໃຫຍ່ແລະມີຮ້ານແອັບພລິເຄຊັນ, Chrome ຕົວຈິງແລ້ວໄດ້ກໍານົດມາດຕະຖານສໍາລັບສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບ.

Mozilla ມີມາດຕະຖານຂອງຕົນເອງ, ແຕ່ເຫັນຄວາມນິຍົມຂອງສ່ວນຂະຫຍາຍ Chrome, ບໍລິສັດໄດ້ຕັດສິນໃຈສ້າງ API ທີ່ເຂົ້າກັນໄດ້. ໃນປີ 2015, ໃນການລິເລີ່ມຂອງ Mozilla, ກຸ່ມພິເສດໄດ້ຖືກສ້າງຕັ້ງຂື້ນພາຍໃນ World Wide Web Consortium (W3C) ເພື່ອເຮັດວຽກກ່ຽວກັບຂໍ້ກໍານົດການຂະຫຍາຍຂ້າມຕົວທ່ອງເວັບ.

ສ່ວນຂະຫຍາຍ API ທີ່ມີຢູ່ສໍາລັບ Chrome ໄດ້ຖືກປະຕິບັດເປັນພື້ນຖານ. ວຽກງານດັ່ງກ່າວໄດ້ຖືກປະຕິບັດໂດຍການສະຫນັບສະຫນູນຂອງ Microsoft (Google ປະຕິເສດທີ່ຈະເຂົ້າຮ່ວມໃນການພັດທະນາມາດຕະຖານ), ແລະດັ່ງນັ້ນ, ສະບັບຮ່າງໄດ້ປາກົດຂຶ້ນ. ຂໍ້ສະເພາະ.

ຢ່າງເປັນທາງການ, ຂໍ້ມູນສະເພາະແມ່ນສະຫນັບສະຫນູນໂດຍ Edge, Firefox ແລະ Opera (ສັງເກດວ່າ Chrome ບໍ່ຢູ່ໃນບັນຊີລາຍຊື່ນີ້). ແຕ່ໃນຄວາມເປັນຈິງ, ມາດຕະຖານແມ່ນເຫມາະສົມກັບ Chrome ສ່ວນໃຫຍ່, ເພາະວ່າມັນຖືກຂຽນໂດຍອີງໃສ່ການຂະຫຍາຍຂອງມັນ. ທ່ານສາມາດອ່ານເພີ່ມເຕີມກ່ຽວກັບ WebExtensions API ທີ່ນີ້.

ໂຄງປະກອບການຂະຫຍາຍ

ໄຟລ໌ດຽວທີ່ຕ້ອງການສໍາລັບການຂະຫຍາຍແມ່ນ manifest (manifest.json). ມັນຍັງເປັນ "ຈຸດເຂົ້າ" ໃນການຂະຫຍາຍ.

ການສະແດງ

ອີງຕາມຂໍ້ມູນສະເພາະ, ໄຟລ໌ manifest ແມ່ນໄຟລ໌ JSON ທີ່ຖືກຕ້ອງ. ລາຍ​ລະ​ອຽດ​ເຕັມ​ທີ່​ຂອງ​ກະ​ແຈ manifest ທີ່​ມີ​ຂໍ້​ມູນ​ກ່ຽວ​ກັບ​ການ​ທີ່​ກະ​ແຈ​ທີ່​ຖືກ​ຮອງ​ຮັບ​ໃນ​ທີ່​ຕົວ​ທ່ອງ​ເວັບ​ສາ​ມາດ​ເບິ່ງ​ໄດ້​ ທີ່ນີ້.

ກະແຈທີ່ບໍ່ຢູ່ໃນສະເພາະ "ອາດຈະ" ຖືກລະເລີຍ (ທັງ Chrome ແລະ Firefox ລາຍງານຄວາມຜິດພາດ, ແຕ່ສ່ວນຂະຫຍາຍຍັງສືບຕໍ່ເຮັດວຽກ).

ແລະຂ້າພະເຈົ້າຢາກຈະດຶງດູດເອົາບາງຈຸດ.

1. ຄວາມເປັນມາ - ວັດຖຸທີ່ປະກອບມີຊ່ອງຂໍ້ມູນຕໍ່ໄປນີ້:
   1. scripts — array ຂອງ scripts ທີ່ຈະຖືກປະຕິບັດໃນສະພາບພື້ນຖານ (ພວກເຮົາຈະເວົ້າກ່ຽວກັບເລື່ອງນີ້ຕໍ່ມາເລັກນ້ອຍ);
   2. Page - ແທນທີ່ຈະເປັນ scripts ທີ່ຈະຖືກປະຕິບັດໃນຫນ້າເປົ່າ, ທ່ານສາມາດກໍານົດ html ກັບເນື້ອຫາ. ໃນກໍລະນີນີ້, ຊ່ອງສະຄຣິບຈະຖືກລະເລີຍ, ແລະ scripts ຈະຕ້ອງຖືກໃສ່ເຂົ້າໄປໃນຫນ້າເນື້ອຫາ;
   3. ຢູ່ — ທຸງຄູ່, ຖ້າບໍ່ລະບຸ, ບຣາວເຊີຈະ “ຂ້າ” ຂະບວນການພື້ນຫຼັງເມື່ອມັນພິຈາລະນາວ່າມັນບໍ່ໄດ້ເຮັດຫຍັງ, ແລະເປີດມັນຄືນໃໝ່ຖ້າຈຳເປັນ. ຖ້າບໍ່ດັ່ງນັ້ນ, ຫນ້າເວັບຈະຖືກຍົກເລີກເມື່ອຕົວທ່ອງເວັບຖືກປິດ. ບໍ່ຮອງຮັບໃນ Firefox.
2. content_scripts — array ຂອງວັດຖຸທີ່ອະນຸຍາດໃຫ້ທ່ານສາມາດໂຫລດ scripts ທີ່ແຕກຕ່າງກັນໄປຫາຫນ້າເວັບຕ່າງໆ. ແຕ່ລະວັດຖຸມີຊ່ອງຂໍ້ມູນສຳຄັນຕໍ່ໄປນີ້:
   1. ກົງກັນ - url ຮູບແບບ, ເຊິ່ງກໍານົດວ່າສະຄິບເນື້ອຫາໂດຍສະເພາະຈະຖືກລວມເຂົ້າຫຼືບໍ່.
   2. js — ບັນ​ຊີ​ລາຍ​ຊື່​ຂອງ scripts ທີ່​ຈະ​ໄດ້​ຮັບ​ການ​ໂຫຼດ​ເຂົ້າ​ໄປ​ໃນ​ການ​ແຂ່ງ​ຂັນ​ນີ້​;
   3. exclude_match - ບໍ່ລວມຈາກພາກສະຫນາມ match URL ທີ່ກົງກັບຊ່ອງຂໍ້ມູນນີ້.
3. page_action - ຕົວຈິງແລ້ວແມ່ນວັດຖຸທີ່ຮັບຜິດຊອບສໍາລັບໄອຄອນທີ່ສະແດງຢູ່ຂ້າງແຖບທີ່ຢູ່ໃນຕົວທ່ອງເວັບແລະປະຕິສໍາພັນກັບມັນ. ມັນຍັງອະນຸຍາດໃຫ້ທ່ານສາມາດສະແດງປ່ອງຢ້ຽມປ໊ອບອັບ, ເຊິ່ງຖືກກໍານົດໂດຍໃຊ້ HTML, CSS ແລະ JS ຂອງທ່ານເອງ.
   1. default_popup — ເສັ້ນທາງໄປຫາໄຟລ໌ HTML ທີ່ມີການໂຕ້ຕອບປ໊ອບອັບ, ອາດຈະມີ CSS ແລະ JS.
4. ການອະນຸຍາດ — array ສໍາລັບການຄຸ້ມຄອງສິດທິການຂະຫຍາຍ. ມີ 3 ປະເພດຂອງສິດທິ, ເຊິ່ງໄດ້ອະທິບາຍຢ່າງລະອຽດ ທີ່ນີ້
5. web_accessible_resources — ຊັບພະຍາກອນສ່ວນຂະຫຍາຍທີ່ຫນ້າເວັບສາມາດຮ້ອງຂໍໄດ້, ຕົວຢ່າງ, ຮູບພາບ, JS, CSS, HTML.
6. externally_connectable — ໃນ​ທີ່​ນີ້​ທ່ານ​ສາ​ມາດ​ລະ​ບຸ​ຢ່າງ​ຊັດ​ເຈນ IDs ຂອງ​ການ​ຂະ​ຫຍາຍ​ອື່ນໆ​ແລະ​ໂດ​ເມນ​ຂອງ​ຫນ້າ​ເວັບ​ທີ່​ທ່ານ​ສາ​ມາດ​ເຊື່ອມ​ຕໍ່​. ໂດເມນສາມາດເປັນລະດັບທີສອງຫຼືສູງກວ່າ. ໃຊ້ບໍ່ໄດ້ໃນ Firefox.

ບໍລິບົດການປະຕິບັດ

ສ່ວນຂະຫຍາຍມີສາມສະພາບການປະຕິບັດລະຫັດ, ນັ້ນແມ່ນ, ແອັບພລິເຄຊັນປະກອບດ້ວຍສາມສ່ວນທີ່ມີລະດັບການເຂົ້າເຖິງ API ຂອງຕົວທ່ອງເວັບ.

ບໍລິບົດການຂະຫຍາຍ

ສ່ວນໃຫຍ່ຂອງ API ແມ່ນມີຢູ່ທີ່ນີ້. ໃນສະພາບການນີ້ພວກເຂົາ "ດໍາລົງຊີວິດ":

1. ໜ້າພື້ນຫຼັງ - ສ່ວນ "backend" ຂອງສ່ວນຂະຫຍາຍ. ໄຟລ໌ຖືກລະບຸໄວ້ໃນ manifest ໂດຍໃຊ້ປຸ່ມ "ພື້ນຫຼັງ".
2. ໜ້າປັອບອັບ — ໜ້າປັອບອັບທີ່ປາກົດຂຶ້ນເມື່ອທ່ານຄລິກໃສ່ໄອຄອນສ່ວນຂະຫຍາຍ. ໃນ manifesto ໄດ້ browser_action -> default_popup.
3. ໜ້າກຳນົດເອງ - ຫນ້າສ່ວນຂະຫຍາຍ, "ດໍາລົງຊີວິດ" ໃນແຖບແຍກຕ່າງຫາກຂອງມຸມເບິ່ງ chrome-extension://<id_расширения>/customPage.html.

ບໍລິບົດນີ້ມີຢູ່ເປັນເອກະລາດຈາກໜ້າຕ່າງ ແລະແຖບຂອງບຣາວເຊີ. ໜ້າພື້ນຫຼັງ ມີຢູ່ໃນສໍາເນົາດຽວແລະເຮັດວຽກສະເຫມີ (ຂໍ້ຍົກເວັ້ນແມ່ນຫນ້າເຫດການ, ເມື່ອສະຄິບພື້ນຫລັງຖືກເປີດຕົວໂດຍເຫດການແລະ "ຕາຍ" ຫຼັງຈາກການປະຕິບັດຂອງມັນ). ໜ້າປັອບອັບ ມີຢູ່ໃນເວລາທີ່ປ່ອງຢ້ຽມປ໊ອບອັບເປີດ, ແລະ ໜ້າກຳນົດເອງ — ໃນຂະນະທີ່ແຖບທີ່ມີມັນເປີດຢູ່. ບໍ່ມີການເຂົ້າເຖິງແຖບອື່ນ ແລະເນື້ອຫາຂອງພວກມັນຈາກບໍລິບົດນີ້.

ສະຄຣິບເນື້ອຫາ

ໄຟລ໌ script ເນື້ອຫາຖືກເປີດຕົວພ້ອມກັບແຕ່ລະແຖບຂອງຕົວທ່ອງເວັບ. ມັນມີການເຂົ້າເຖິງສ່ວນຫນຶ່ງຂອງ API ຂອງການຂະຫຍາຍແລະຕົ້ນໄມ້ DOM ຂອງຫນ້າເວັບ. ມັນເປັນ scripts ເນື້ອໃນທີ່ຮັບຜິດຊອບສໍາລັບການພົວພັນກັບຫນ້າ. ສ່ວນຂະຫຍາຍທີ່ manipulate ຕົ້ນໄມ້ DOM ເຮັດສິ່ງນີ້ໃນສະຄິບເນື້ອຫາ - ຕົວຢ່າງ, ຕົວສະກັດໂຄສະນາຫຼືນັກແປ. ນອກຈາກນີ້, script ເນື້ອຫາສາມາດສື່ສານກັບຫນ້າໂດຍຜ່ານມາດຕະຖານ postMessage.

ບໍລິບົດຂອງຫນ້າເວັບ

ນີ້ແມ່ນຫນ້າເວັບຕົວຈິງຂອງມັນເອງ. ມັນບໍ່ມີຫຍັງກ່ຽວຂ້ອງກັບການຂະຫຍາຍແລະບໍ່ມີການເຂົ້າເຖິງທີ່ນັ້ນ, ຍົກເວັ້ນໃນກໍລະນີທີ່ໂດເມນຂອງຫນ້ານີ້ບໍ່ໄດ້ລະບຸຢ່າງຊັດເຈນໃນ manifest (ເພີ່ມເຕີມຢູ່ຂ້າງລຸ່ມນີ້).

ການແລກປ່ຽນຂໍ້ຄວາມ

ພາກສ່ວນຕ່າງໆຂອງແອັບພລິເຄຊັນຕ້ອງແລກປ່ຽນຂໍ້ຄວາມເຊິ່ງກັນແລະກັນ. ມີ API ສໍາລັບການນີ້ runtime.sendMessage ເພື່ອສົ່ງຂໍ້ຄວາມ background и tabs.sendMessage ເພື່ອສົ່ງຂໍ້ຄວາມໄປຫາໜ້າໃດໜຶ່ງ (ສະຄຣິບເນື້ອຫາ, ປັອບອັບ ຫຼືໜ້າເວັບຖ້າມີ externally_connectable). ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງເມື່ອເຂົ້າເຖິງ Chrome API.

// Сообщением может быть любой JSON сериализуемый объект
const msg = {a: 'foo', b: 'bar'};

// extensionId можно не указывать, если мы хотим послать сообщение 'своему' расширению (из ui или контент скрипта)
chrome.runtime.sendMessage(extensionId, msg);

// Так выглядит обработчик
chrome.runtime.onMessage.addListener((msg) => console.log(msg))

// Можно слать сообщения вкладкам зная их id
chrome.tabs.sendMessage(tabId, msg)

// Получить к вкладкам и их id можно, например, вот так
chrome.tabs.query(
    {currentWindow: true, active : true},
    function(tabArray){
      tabArray.forEach(tab => console.log(tab.id))
    }
)

ສໍາລັບການສື່ສານຢ່າງເຕັມທີ່, ທ່ານສາມາດສ້າງການເຊື່ອມຕໍ່ໂດຍຜ່ານ runtime.connect. ໃນ​ການ​ຕອບ​ສະ​ຫນອງ​ພວກ​ເຮົາ​ຈະ​ໄດ້​ຮັບ​ runtime.Port, ທີ່, ໃນຂະນະທີ່ມັນເປີດ, ທ່ານສາມາດສົ່ງຂໍ້ຄວາມໃດໆ. ໃນດ້ານລູກຄ້າ, ສໍາລັບຕົວຢ່າງ, contentscript, ມັນເບິ່ງຄືວ່ານີ້:

// Опять же extensionId можно не указывать при коммуникации внутри одного расширения. Подключение можно именовать
const port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
    if (msg.question === "Who's there?")
        port.postMessage({answer: "Madame"});
    else if (msg.question === "Madame who?")
        port.postMessage({answer: "Madame... Bovary"});

ເຊີບເວີ ຫຼືພື້ນຫຼັງ:

// Обработчик для подключения 'своих' вкладок. Контент скриптов, popup или страниц расширения
chrome.runtime.onConnect.addListener(function(port) {
    console.assert(port.name === "knockknock");
    port.onMessage.addListener(function(msg) {
        if (msg.joke === "Knock knock")
            port.postMessage({question: "Who's there?"});
        else if (msg.answer === "Madame")
            port.postMessage({question: "Madame who?"});
        else if (msg.answer === "Madame... Bovary")
            port.postMessage({question: "I don't get it."});
    });
});

// Обработчик для подключения внешних вкладок. Других расширений или веб страниц, которым разрешен доступ в манифесте
chrome.runtime.onConnectExternal.addListener(function(port) {
    ...
});

ນອກຈາກນີ້ຍັງມີເຫດການ onDisconnect ແລະວິທີການ disconnect.

ແຜນວາດຄໍາຮ້ອງສະຫມັກ

ໃຫ້ພວກເຮົາສ້າງສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບທີ່ເກັບຮັກສາລະຫັດສ່ວນຕົວ, ສະຫນອງການເຂົ້າເຖິງຂໍ້ມູນສາທາລະນະ (ທີ່ຢູ່, ລະຫັດສາທາລະນະຕິດຕໍ່ສື່ສານກັບຫນ້າແລະອະນຸຍາດໃຫ້ແອັບພລິເຄຊັນພາກສ່ວນທີສາມຮ້ອງຂໍລາຍເຊັນສໍາລັບການເຮັດທຸລະກໍາ.

ການພັດທະນາແອັບພລິເຄຊັນ

ຄໍາຮ້ອງສະຫມັກຂອງພວກເຮົາຕ້ອງພົວພັນກັບຜູ້ໃຊ້ແລະໃຫ້ຫນ້າເວັບທີ່ມີ API ເພື່ອໂທຫາວິທີການ (ຕົວຢ່າງເຊັ່ນການເຊັນການເຮັດທຸລະກໍາ). ເຮັດດ້ວຍພຽງອັນດຽວ contentscript ຈະບໍ່ເຮັດວຽກ, ເພາະວ່າມັນພຽງແຕ່ເຂົ້າເຖິງ DOM, ແຕ່ບໍ່ແມ່ນ JS ຂອງຫນ້າ. ເຊື່ອມຕໍ່ຜ່ານ runtime.connect ພວກເຮົາບໍ່ສາມາດ, ເພາະວ່າ API ແມ່ນຈໍາເປັນໃນທຸກໂດເມນ, ແລະພຽງແຕ່ຫນຶ່ງສະເພາະທີ່ສາມາດຖືກລະບຸໄວ້ໃນ manifest. ດັ່ງນັ້ນ, ແຜນວາດຈະມີລັກສະນະດັ່ງນີ້:

ຈະ​ມີ​ຕົວ​ອັກ​ສອນ​ອື່ນ - inpage, ທີ່ພວກເຮົາຈະສີດເຂົ້າໄປໃນຫນ້າ. ມັນຈະດໍາເນີນການໃນສະພາບການຂອງມັນແລະສະຫນອງ API ສໍາລັບການເຮັດວຽກກັບສ່ວນຂະຫຍາຍ.

Начало

ລະຫັດສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບທັງໝົດແມ່ນມີຢູ່ GitHub. ໃນລະຫວ່າງຄໍາອະທິບາຍຈະມີການເຊື່ອມຕໍ່ກັບຄໍາຫມັ້ນສັນຍາ.

ໃຫ້ເລີ່ມຕົ້ນດ້ວຍ manifesto:

{
  // Имя и описание, версия. Все это будет видно в браузере в chrome://extensions/?id=<id расширения>
  "name": "Signer",
  "description": "Extension demo",
  "version": "0.0.1",
  "manifest_version": 2,

  // Скрипты, которые будут исполнятся в background, их может быть несколько
  "background": {
    "scripts": ["background.js"]
  },

  // Какой html использовать для popup
  "browser_action": {
    "default_title": "My Extension",
    "default_popup": "popup.html"
  },

  // Контент скрипты.
  // У нас один объект: для всех url начинающихся с http или https мы запускаем
  // contenscript context со скриптом contentscript.js. Запускать сразу по получении документа для всех фреймов
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "contentscript.js"
      ],
      "run_at": "document_start",
      "all_frames": true
    }
  ],
  // Разрешен доступ к localStorage и idle api
  "permissions": [
    "storage",
    // "unlimitedStorage",
    //"clipboardWrite",
    "idle"
    //"activeTab",
    //"webRequest",
    //"notifications",
    //"tabs"
  ],
  // Здесь указываются ресурсы, к которым будет иметь доступ веб страница. Тоесть их можно будет запрашивать fetche'м или просто xhr
  "web_accessible_resources": ["inpage.js"]
}

ສ້າງ background.js ຫວ່າງເປົ່າ, popup.js, inpage.js ແລະ contentscript.js. ພວກເຮົາເພີ່ມ popup.html - ແລະແອັບພລິເຄຊັນຂອງພວກເຮົາສາມາດຖືກໂຫລດເຂົ້າໄປໃນ Google Chrome ແລ້ວແລະໃຫ້ແນ່ໃຈວ່າມັນເຮັດວຽກ.

ເພື່ອກວດສອບນີ້, ທ່ານສາມາດເອົາລະຫັດ ຈາກນີ້. ນອກເຫນືອຈາກສິ່ງທີ່ພວກເຮົາໄດ້ເຮັດ, ການເຊື່ອມຕໍ່ໄດ້ກໍານົດການປະກອບໂຄງການໂດຍໃຊ້ webpack. ເພື່ອເພີ່ມແອັບພລິເຄຊັນໃສ່ຕົວທ່ອງເວັບ, ໃນ chrome://extensions ທ່ານຈໍາເປັນຕ້ອງເລືອກ load unpacked ແລະໂຟນເດີທີ່ມີສ່ວນຂະຫຍາຍທີ່ສອດຄ້ອງກັນ - ໃນກໍລະນີຂອງພວກເຮົາ dist.

ໃນປັດຈຸບັນສ່ວນຂະຫຍາຍຂອງພວກເຮົາຖືກຕິດຕັ້ງແລະເຮັດວຽກ. ທ່ານ​ສາ​ມາດ​ໃຊ້​ເຄື່ອງ​ມື​ການ​ພັດ​ທະ​ນາ​ສໍາ​ລັບ​ສະ​ພາບ​ການ​ທີ່​ແຕກ​ຕ່າງ​ກັນ​ດັ່ງ​ຕໍ່​ໄປ​ນີ້​:

ປ໊ອບອັບ ->

ການເຂົ້າເຖິງ console script ເນື້ອຫາແມ່ນດໍາເນີນໂດຍຜ່ານ console ຂອງຫນ້າຂອງມັນເອງທີ່ມັນຖືກເປີດຕົວ.

ການແລກປ່ຽນຂໍ້ຄວາມ

ດັ່ງນັ້ນ, ພວກເຮົາຈໍາເປັນຕ້ອງສ້າງສອງຊ່ອງທາງການສື່ສານ: inpage <-> background ແລະ popup <-> background. ທ່ານສາມາດ, ແນ່ນອນ, ພຽງແຕ່ສົ່ງຂໍ້ຄວາມໄປຫາພອດແລະປະດິດໂປໂຕຄອນຂອງທ່ານເອງ, ແຕ່ຂ້ອຍມັກວິທີການທີ່ຂ້ອຍເຫັນໃນໂຄງການ metamask open source.

ນີ້ແມ່ນສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບສໍາລັບການເຮັດວຽກກັບເຄືອຂ່າຍ Ethereum. ໃນມັນ, ພາກສ່ວນຕ່າງໆຂອງແອັບພລິເຄຊັນຕິດຕໍ່ສື່ສານຜ່ານ RPC ໂດຍໃຊ້ຫ້ອງສະຫມຸດ dnode. ມັນອະນຸຍາດໃຫ້ທ່ານຈັດການແລກປ່ຽນຂ້ອນຂ້າງໄວແລະສະດວກຖ້າທ່ານສະຫນອງມັນດ້ວຍນ້ໍາ nodejs ເປັນການຂົນສົ່ງ (ຫມາຍຄວາມວ່າວັດຖຸທີ່ປະຕິບັດການໂຕ້ຕອບດຽວກັນ):

import Dnode from "dnode/browser";

// В этом примере условимся что клиент удаленно вызывает функции на сервере, хотя ничего нам не мешает сделать это двунаправленным

// Cервер
// API, которое мы хотим предоставить
const dnode = Dnode({
    hello: (cb) => cb(null, "world")
})
// Транспорт, поверх которого будет работать dnode. Любой nodejs стрим. В браузере есть бибилиотека 'readable-stream'
connectionStream.pipe(dnode).pipe(connectionStream)

// Клиент
const dnodeClient = Dnode() // Вызов без агрумента значит что мы не предоставляем API на другой стороне

// Выведет в консоль world
dnodeClient.once('remote', remote => {
    remote.hello(((err, value) => console.log(value)))
})

ໃນປັດຈຸບັນພວກເຮົາຈະສ້າງຫ້ອງຮຽນຄໍາຮ້ອງສະຫມັກ. ມັນຈະສ້າງວັດຖຸ API ສໍາລັບປ໊ອບອັບແລະຫນ້າເວັບ, ແລະສ້າງ dnode ສໍາລັບພວກເຂົາ:

import Dnode from 'dnode/browser';

export class SignerApp {

    // Возвращает объект API для ui
    popupApi(){
        return {
            hello: cb => cb(null, 'world')
        }
    }

    // Возвращает объет API для страницы
    pageApi(){
        return {
            hello: cb => cb(null, 'world')
        }
    }

    // Подключает popup ui
    connectPopup(connectionStream){
        const api = this.popupApi();
        const dnode = Dnode(api);

        connectionStream.pipe(dnode).pipe(connectionStream);

        dnode.on('remote', (remote) => {
            console.log(remote)
        })
    }

    // Подключает страницу
    connectPage(connectionStream, origin){
        const api = this.popupApi();
        const dnode = Dnode(api);

        connectionStream.pipe(dnode).pipe(connectionStream);

        dnode.on('remote', (remote) => {
            console.log(origin);
            console.log(remote)
        })
    }
}

ທີ່ນີ້ແລະຂ້າງລຸ່ມນີ້, ແທນທີ່ຈະເປັນວັດຖຸ Chrome ທົ່ວໂລກ, ພວກເຮົາໃຊ້ extensionApi, ເຊິ່ງເຂົ້າເຖິງ Chrome ໃນຕົວທ່ອງເວັບຂອງ Google ແລະຕົວທ່ອງເວັບຂອງຄົນອື່ນ. ນີ້ແມ່ນເຮັດສໍາລັບຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບຂ້າມ, ແຕ່ສໍາລັບຈຸດປະສົງຂອງບົດຄວາມນີ້, ພຽງແຕ່ສາມາດນໍາໃຊ້ 'chrome.runtime.connect'.

ມາສ້າງຕົວຢ່າງແອັບພລິເຄຊັນໃນສະຄຣິບພື້ນຫຼັງ:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";

const app = new SignerApp();

// onConnect срабатывает при подключении 'процессов' (contentscript, popup, или страница расширения)
extensionApi.runtime.onConnect.addListener(connectRemote);

function connectRemote(remotePort) {
    const processName = remotePort.name;
    const portStream = new PortStream(remotePort);
    // При установке соединения можно указывать имя, по этому имени мы и оппределяем кто к нам подлючился, контентскрипт или ui
    if (processName === 'contentscript'){
        const origin = remotePort.sender.url
        app.connectPage(portStream, origin)
    }else{
        app.connectPopup(portStream)
    }
}

ເນື່ອງຈາກ dnode ເຮັດວຽກກັບກະແສ, ແລະພວກເຮົາໄດ້ຮັບພອດ, ຫ້ອງຮຽນອະແດບເຕີແມ່ນຈໍາເປັນ. ມັນຖືກສ້າງຂຶ້ນໂດຍໃຊ້ຫ້ອງສະຫມຸດທີ່ສາມາດອ່ານໄດ້, ເຊິ່ງປະຕິບັດການຖ່າຍທອດ nodejs ໃນຕົວທ່ອງເວັບ:

import {Duplex} from 'readable-stream';

export class PortStream extends Duplex{
    constructor(port){
        super({objectMode: true});
        this._port = port;
        port.onMessage.addListener(this._onMessage.bind(this));
        port.onDisconnect.addListener(this._onDisconnect.bind(this))
    }

    _onMessage(msg) {
        if (Buffer.isBuffer(msg)) {
            delete msg._isBuffer;
            const data = new Buffer(msg);
            this.push(data)
        } else {
            this.push(msg)
        }
    }

    _onDisconnect() {
        this.destroy()
    }

    _read(){}

    _write(msg, encoding, cb) {
        try {
            if (Buffer.isBuffer(msg)) {
                const data = msg.toJSON();
                data._isBuffer = true;
                this._port.postMessage(data)
            } else {
                this._port.postMessage(msg)
            }
        } catch (err) {
            return cb(new Error('PortStream - disconnected'))
        }
        cb()
    }
}

ຕອນນີ້ໃຫ້ພວກເຮົາສ້າງການເຊື່ອມຕໍ່ໃນ UI:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import Dnode from 'dnode/browser';

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupUi().catch(console.error);

async function setupUi(){
    // Также, как и в классе приложения создаем порт, оборачиваем в stream, делаем  dnode
    const backgroundPort = extensionApi.runtime.connect({name: 'popup'});
    const connectionStream = new PortStream(backgroundPort);

    const dnode = Dnode();

    connectionStream.pipe(dnode).pipe(connectionStream);

    const background = await new Promise(resolve => {
        dnode.once('remote', api => {
            resolve(api)
        })
    });

    // Делаем объект API доступным из консоли
    if (DEV_MODE){
        global.background = background;
    }
}

ຫຼັງຈາກນັ້ນ, ພວກເຮົາສ້າງການເຊື່ອມຕໍ່ໃນ script ເນື້ອໃນ:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import PostMessageStream from 'post-message-stream';

setupConnection();
injectScript();

function setupConnection(){
    const backgroundPort = extensionApi.runtime.connect({name: 'contentscript'});
    const backgroundStream = new PortStream(backgroundPort);

    const pageStream = new PostMessageStream({
        name: 'content',
        target: 'page',
    });

    pageStream.pipe(backgroundStream).pipe(pageStream);
}

function injectScript(){
    try {
        // inject in-page script
        let script = document.createElement('script');
        script.src = extensionApi.extension.getURL('inpage.js');
        const container = document.head || document.documentElement;
        container.insertBefore(script, container.children[0]);
        script.onload = () => script.remove();
    } catch (e) {
        console.error('Injection failed.', e);
    }
}

ເນື່ອງຈາກພວກເຮົາຕ້ອງການ API ບໍ່ໄດ້ຢູ່ໃນສະຄິບເນື້ອຫາ, ແຕ່ໂດຍກົງຢູ່ໃນຫນ້າ, ພວກເຮົາເຮັດສອງຢ່າງ:

1. ພວກເຮົາສ້າງສອງສາຍນ້ໍາ. ຫນຶ່ງ - ຕໍ່ຫນ້າ, ຢູ່ເທິງສຸດຂອງ postMessage. ສໍາລັບນີ້ພວກເຮົາໃຊ້ນີ້ ຊຸດນີ້ ຈາກຜູ້ສ້າງ metamask. ກະແສທີສອງແມ່ນເພື່ອພື້ນຫລັງຂອງພອດທີ່ໄດ້ຮັບຈາກ runtime.connect. ໃຫ້ຊື້ພວກມັນ. ຕອນນີ້ໜ້າເວັບຈະມີກະແສໄປຫາພື້ນຫຼັງ.
2. ໃສ່ສະຄຣິບໃສ່ DOM. ດາວໂຫລດສະຄຣິບ (ການເຂົ້າເຖິງມັນຖືກອະນຸຍາດໃຫ້ຢູ່ໃນ manifest) ແລະສ້າງແທັກ script ກັບ​ເນື້ອ​ໃນ​ຂອງ​ຕົນ​ຢູ່​ໃນ​:

import PostMessageStream from 'post-message-stream';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";

setupConnection();
injectScript();

function setupConnection(){
    // Стрим к бекграунду
    const backgroundPort = extensionApi.runtime.connect({name: 'contentscript'});
    const backgroundStream = new PortStream(backgroundPort);

    // Стрим к странице
    const pageStream = new PostMessageStream({
        name: 'content',
        target: 'page',
    });

    pageStream.pipe(backgroundStream).pipe(pageStream);
}

function injectScript(){
    try {
        // inject in-page script
        let script = document.createElement('script');
        script.src = extensionApi.extension.getURL('inpage.js');
        const container = document.head || document.documentElement;
        container.insertBefore(script, container.children[0]);
        script.onload = () => script.remove();
    } catch (e) {
        console.error('Injection failed.', e);
    }
}

ຕອນນີ້ພວກເຮົາສ້າງວັດຖຸ api ໃນ inpage ແລະຕັ້ງມັນເປັນທົ່ວໂລກ:

import PostMessageStream from 'post-message-stream';
import Dnode from 'dnode/browser';

setupInpageApi().catch(console.error);

async function setupInpageApi() {
    // Стрим к контентскрипту
    const connectionStream = new PostMessageStream({
        name: 'page',
        target: 'content',
    });

    const dnode = Dnode();

    connectionStream.pipe(dnode).pipe(connectionStream);

    // Получаем объект API
    const pageApi = await new Promise(resolve => {
        dnode.once('remote', api => {
            resolve(api)
        })
    });

    // Доступ через window
    global.SignerApp = pageApi;
}

ພວກເຮົາພ້ອມແລ້ວ Remote Procedure Call (RPC) ທີ່ມີ API ແຍກຕ່າງຫາກສໍາລັບຫນ້າແລະ UI. ເມື່ອເຊື່ອມຕໍ່ໜ້າໃໝ່ກັບພື້ນຫຼັງເຮົາສາມາດເຫັນອັນນີ້:

API ຫວ່າງເປົ່າ ແລະຕົ້ນກຳເນີດ. ໃນດ້ານຫນ້າ, ພວກເຮົາສາມາດໂທຫາຫນ້າທີ່ສະບາຍດີເຊັ່ນນີ້:

ການເຮັດວຽກກັບຟັງຊັນ callback ໃນ JS ທີ່ທັນສະໄຫມແມ່ນລັກສະນະທີ່ບໍ່ດີ, ສະນັ້ນໃຫ້ພວກເຮົາຂຽນຕົວຊ່ວຍນ້ອຍໆເພື່ອສ້າງ dnode ທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດສົ່ງຜ່ານວັດຖຸ API ໄປຫາ utils.

ຕອນນີ້ວັດຖຸ API ຈະມີລັກສະນະດັ່ງນີ້:

export class SignerApp {

    popupApi() {
        return {
            hello: async () => "world"
        }
    }

...

}

ເອົາວັດຖຸຈາກໄລຍະໄກແບບນີ້:

import {cbToPromise, transformMethods} from "../../src/utils/setupDnode";

const pageApi = await new Promise(resolve => {
    dnode.once('remote', remoteApi => {
        // С помощью утилит меняем все callback на promise
        resolve(transformMethods(cbToPromise, remoteApi))
    })
});

ແລະຟັງຊັນການໂທສົ່ງຄືນຄໍາສັນຍາ:

ລຸ້ນທີ່ມີຟັງຊັນບໍ່ຊິ້ງໂຄນ ທີ່ນີ້.

ໂດຍລວມແລ້ວ, ວິທີການ RPC ແລະ stream ເບິ່ງຄືວ່າມີຄວາມຍືດຫຍຸ່ນຫຼາຍ: ພວກເຮົາສາມາດນໍາໃຊ້ການ multiplexing ໄອນ້ໍາແລະສ້າງ APIs ທີ່ແຕກຕ່າງກັນຫຼາຍສໍາລັບວຽກງານທີ່ແຕກຕ່າງກັນ. ໃນຫຼັກການ, dnode ສາມາດນໍາໃຊ້ໄດ້ທຸກບ່ອນ, ສິ່ງທີ່ສໍາຄັນແມ່ນການຫໍ່ການຂົນສົ່ງໃນຮູບແບບຂອງນ້ໍາ nodejs.

ທາງເລືອກອື່ນແມ່ນຮູບແບບ JSON, ເຊິ່ງປະຕິບັດໂປໂຕຄອນ JSON RPC 2. ແນວໃດກໍ່ຕາມ, ມັນເຮັດວຽກກັບການຂົນສົ່ງສະເພາະ (TCP ແລະ HTTP(S)), ເຊິ່ງບໍ່ສາມາດໃຊ້ໄດ້ໃນກໍລະນີຂອງພວກເຮົາ.

ສະຖານະພາຍໃນ ແລະ localStorage

ພວກເຮົາຈະຕ້ອງການເກັບຮັກສາສະຖານະພາຍໃນຂອງຄໍາຮ້ອງສະຫມັກ - ຢ່າງຫນ້ອຍລະຫັດເຊັນຊື່. ພວກເຮົາສາມາດເພີ່ມສະຖານະໃຫ້ກັບແອັບພລິເຄຊັນ ແລະວິທີການປ່ຽນມັນຢູ່ໃນ popup API ໄດ້ງ່າຍໆ:

import {setupDnode} from "./utils/setupDnode";

export class SignerApp {

    constructor(){
        this.store = {
            keys: [],
        };
    }

    addKey(key){
        this.store.keys.push(key)
    }

    removeKey(index){
        this.store.keys.splice(index,1)
    }

    popupApi(){
        return {
            addKey: async (key) => this.addKey(key),
            removeKey: async (index) => this.removeKey(index)
        }
    }

    ...

} 

ໃນພື້ນຫລັງ, ພວກເຮົາຈະຫໍ່ທຸກຢ່າງໃນຟັງຊັນແລະຂຽນວັດຖຸແອັບພລິເຄຊັນໃສ່ປ່ອງຢ້ຽມເພື່ອໃຫ້ພວກເຮົາສາມາດເຮັດວຽກກັບມັນຈາກ console:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupApp();

function setupApp() {
    const app = new SignerApp();

    if (DEV_MODE) {
        global.app = app;
    }

    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url;
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

ມາເພີ່ມກະແຈບາງອັນຈາກ UI console ແລະເບິ່ງວ່າເກີດຫຍັງຂຶ້ນກັບສະຖານະ:

ລັດຕ້ອງໄດ້ຮັບການເຮັດໃຫ້ຄົງທີ່ເພື່ອບໍ່ໃຫ້ກະແຈສູນເສຍໄປໃນເວລາທີ່ restart.

ພວກເຮົາຈະເກັບຮັກສາມັນໄວ້ໃນ localStorage, ຂຽນທັບມັນກັບທຸກໆການປ່ຽນແປງ. ຫຼັງຈາກນັ້ນ, ການເຂົ້າເຖິງມັນຍັງຈະມີຄວາມຈໍາເປັນສໍາລັບ UI, ແລະຂ້ອຍກໍ່ຕ້ອງການຈອງການປ່ຽນແປງ. ອີງຕາມການນີ້, ມັນຈະສະດວກໃນການສ້າງການເກັບຮັກສາທີ່ສາມາດສັງເກດໄດ້ແລະຈອງການປ່ຽນແປງຂອງມັນ.

ພວກເຮົາຈະໃຊ້ຫ້ອງສະຫມຸດ mobx (https://github.com/mobxjs/mobx). ທາງເລືອກໄດ້ຕົກຢູ່ໃນມັນເພາະວ່າຂ້ອຍບໍ່ຈໍາເປັນຕ້ອງເຮັດວຽກກັບມັນ, ແຕ່ຂ້ອຍກໍ່ຢາກສຶກສາມັນ.

ໃຫ້ເພີ່ມການເລີ່ມຕົ້ນຂອງສະຖານະເບື້ອງຕົ້ນແລະເຮັດໃຫ້ຮ້ານສາມາດສັງເກດໄດ້:

import {observable, action} from 'mobx';
import {setupDnode} from "./utils/setupDnode";

export class SignerApp {

    constructor(initState = {}) {
        // Внешне store так и останется тем же объектом, только теперь все его поля стали proxy, которые отслеживают доступ к ним
        this.store =  observable.object({
            keys: initState.keys || [],
        });
    }

    // Методы, которые меняют observable принято оборачивать декоратором
    @action
    addKey(key) {
        this.store.keys.push(key)
    }

    @action
    removeKey(index) {
        this.store.keys.splice(index, 1)
    }

    ...

}

"ພາຍໃຕ້ຜ້າມ່ານ," mobx ໄດ້ປ່ຽນພື້ນທີ່ຮ້ານທັງຫມົດດ້ວຍຕົວແທນແລະຂັດຂວາງການໂທທັງຫມົດໄປຫາພວກເຂົາ. ມັນຈະເປັນໄປໄດ້ທີ່ຈະຈອງຂໍ້ຄວາມເຫຼົ່ານີ້.

ຂ້າງລຸ່ມນີ້ຂ້ອຍມັກຈະໃຊ້ຄໍາວ່າ "ເມື່ອປ່ຽນແປງ", ເຖິງແມ່ນວ່າມັນບໍ່ຖືກຕ້ອງທັງຫມົດ. Mobx ຕິດຕາມການເຂົ້າເຖິງຊ່ອງຂໍ້ມູນ. Getters ແລະ setters ຂອງ proxy objects ທີ່ຫ້ອງສະຫມຸດສ້າງແມ່ນຖືກນໍາໃຊ້.

ນັກຕົບແຕ່ງປະຕິບັດຮັບໃຊ້ສອງຈຸດປະສົງ:

1. ໃນ​ຮູບ​ແບບ​ທີ່​ເຄັ່ງ​ຄັດ​ທີ່​ມີ​ທຸງ enforceActions, mobx ຫ້າມ​ການ​ປ່ຽນ​ແປງ​ລັດ​ໂດຍ​ກົງ​. ມັນຖືວ່າເປັນການປະຕິບັດທີ່ດີທີ່ຈະເຮັດວຽກພາຍໃຕ້ເງື່ອນໄຂທີ່ເຄັ່ງຄັດ.
2. ເຖິງແມ່ນວ່າຫນ້າທີ່ປ່ຽນແປງລັດຫຼາຍຄັ້ງ - ຕົວຢ່າງ, ພວກເຮົາປ່ຽນຫຼາຍຊ່ອງຂໍ້ມູນໃນລະຫັດຫຼາຍສາຍ - ຜູ້ສັງເກດການໄດ້ຮັບການແຈ້ງເຕືອນພຽງແຕ່ເມື່ອມັນສໍາເລັດ. ນີ້ແມ່ນສິ່ງສໍາຄັນໂດຍສະເພາະສໍາລັບ frontend, ບ່ອນທີ່ການປັບປຸງລັດທີ່ບໍ່ຈໍາເປັນນໍາໄປສູ່ການສະແດງອົງປະກອບທີ່ບໍ່ຈໍາເປັນ. ໃນກໍລະນີຂອງພວກເຮົາ, ທັງສອງອັນທໍາອິດຫຼືທີສອງແມ່ນບໍ່ກ່ຽວຂ້ອງໂດຍສະເພາະ, ແຕ່ພວກເຮົາຈະປະຕິບັດຕາມການປະຕິບັດທີ່ດີທີ່ສຸດ. ມັນເປັນປະເພນີທີ່ຈະຕິດເຄື່ອງຕົບແຕ່ງກັບຫນ້າທີ່ທັງຫມົດທີ່ປ່ຽນສະຖານະຂອງທົ່ງນາທີ່ສັງເກດເຫັນ.

ໃນພື້ນຫລັງພວກເຮົາຈະເພີ່ມການເລີ່ມຕົ້ນແລະບັນທຶກສະຖານະໃນ localStorage:

import {reaction, toJS} from 'mobx';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";
// Вспомогательные методы. Записывают/читают объект в/из localStorage виде JSON строки по ключу 'store'
import {loadState, saveState} from "./utils/localStorage";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupApp();

function setupApp() {
    const initState = loadState();
    const app = new SignerApp(initState);

    if (DEV_MODE) {
        global.app = app;
    }

    // Setup state persistence

    // Результат reaction присваивается переменной, чтобы подписку можно было отменить. Нам это не нужно, оставлено для примера
    const localStorageReaction = reaction(
        () => toJS(app.store), // Функция-селектор данных
        saveState // Функция, которая будет вызвана при изменении данных, которые возвращает селектор
    );

    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

ຟັງຊັນຕິກິຣິຍາແມ່ນຫນ້າສົນໃຈຢູ່ທີ່ນີ້. ມັນ​ມີ​ສອງ​ການ​ໂຕ້​ຖຽງ​:

1. ຕົວເລືອກຂໍ້ມູນ.
2. ຕົວຈັດການທີ່ຈະຖືກເອີ້ນດ້ວຍຂໍ້ມູນນີ້ທຸກຄັ້ງທີ່ມັນປ່ຽນແປງ.

ບໍ່ເຫມືອນກັບ redux, ບ່ອນທີ່ພວກເຮົາໄດ້ຮັບລັດເປັນການໂຕ້ຖຽງຢ່າງຊັດເຈນ, mobx ຈື່ຈໍາວ່າພວກເຮົາເຂົ້າເຖິງພາຍໃນຕົວເລືອກ, ແລະພຽງແຕ່ໂທຫາຕົວຈັດການເມື່ອພວກເຂົາປ່ຽນແປງ.

ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະເຂົ້າໃຈຢ່າງແທ້ຈິງວ່າ mobx ຕັດສິນໃຈແນວໃດທີ່ພວກເຮົາຕິດຕາມ. ຖ້າຂ້ອຍຂຽນຕົວເລືອກໃນລະຫັດແບບນີ້() => app.store, ຫຼັງຈາກນັ້ນ, ປະຕິກິລິຍາຈະບໍ່ຖືກເອີ້ນວ່າ, ນັບຕັ້ງແຕ່ການເກັບຮັກສາຕົວມັນເອງບໍ່ສາມາດສັງເກດເຫັນໄດ້, ພຽງແຕ່ທົ່ງນາຂອງມັນເທົ່ານັ້ນ.

ຖ້າຂ້ອຍຂຽນແບບນີ້ () => app.store.keys, ຫຼັງຈາກນັ້ນ, ອີກເທື່ອຫນຶ່ງບໍ່ມີຫຍັງເກີດຂຶ້ນ, ນັບຕັ້ງແຕ່ເມື່ອເພີ່ມ / ຖອນອົງປະກອບ array, ການອ້າງອີງເຖິງມັນຈະບໍ່ປ່ຽນແປງ.

Mobx ເຮັດໜ້າທີ່ເປັນຕົວເລືອກເປັນຄັ້ງທຳອິດ ແລະພຽງແຕ່ຕິດຕາມສິ່ງທີ່ສັງເກດໄດ້ທີ່ພວກເຮົາໄດ້ເຂົ້າເຖິງ. ນີ້ແມ່ນເຮັດຜ່ານຕົວຮັບຕົວແທນ. ດັ່ງນັ້ນ, ຟັງຊັນທີ່ສ້າງຂຶ້ນແມ່ນຖືກນໍາໃຊ້ຢູ່ທີ່ນີ້ toJS. ມັນສົ່ງຄືນວັດຖຸໃໝ່ທີ່ມີຕົວແທນທັງໝົດແທນທີ່ດ້ວຍຊ່ອງຂໍ້ມູນຕົ້ນສະບັບ. ໃນ​ລະ​ຫວ່າງ​ການ​ປະ​ຕິ​ບັດ​, ມັນ​ອ່ານ​ພາກ​ສະ​ຫນາມ​ທັງ​ຫມົດ​ຂອງ​ວັດ​ຖຸ - ເພາະ​ສະ​ນັ້ນ getters ແມ່ນ triggered​.

ໃນປັອບອັບຄອນໂຊນພວກເຮົາຈະເພີ່ມລະຫັດຫຼາຍອັນອີກຄັ້ງ. ເວລານີ້ພວກເຂົາຍັງສິ້ນສຸດລົງໃນ localStorage:

ເມື່ອໜ້າພື້ນຫຼັງຖືກໂຫຼດຄືນໃໝ່, ຂໍ້ມູນຍັງຄົງຢູ່.

ລະຫັດຄໍາຮ້ອງສະຫມັກທັງຫມົດເຖິງຈຸດນີ້ສາມາດເບິ່ງໄດ້ ທີ່ນີ້.

ການເກັບຮັກສາກະແຈສ່ວນຕົວທີ່ປອດໄພ

ການເກັບຮັກສາກະແຈສ່ວນຕົວໃນຂໍ້ຄວາມທີ່ຊັດເຈນແມ່ນບໍ່ປອດໄພ: ມີໂອກາດສະເຫມີທີ່ເຈົ້າຈະຖືກແຮັກ, ເຂົ້າເຖິງຄອມພິວເຕີຂອງທ່ານ, ແລະອື່ນໆ. ດັ່ງນັ້ນ, ໃນ localStorage ພວກເຮົາຈະເກັບຮັກສາກະແຈໃນຮູບແບບທີ່ເຂົ້າລະຫັດລັບ.

ເພື່ອຄວາມປອດໄພຫຼາຍກວ່າເກົ່າ, ພວກເຮົາຈະເພີ່ມສະຖານະທີ່ຖືກລັອກໃຫ້ກັບແອັບພລິເຄຊັນ, ເຊິ່ງໃນນັ້ນຈະບໍ່ມີການເຂົ້າເຖິງກະແຈເລີຍ. ພວກເຮົາຈະໂອນສ່ວນຂະຫຍາຍໄປໃຫ້ສະຖານະທີ່ຖືກລັອກໂດຍອັດຕະໂນມັດເນື່ອງຈາກໝົດເວລາ.

Mobx ຊ່ວຍໃຫ້ທ່ານສາມາດເກັບຂໍ້ມູນໄດ້ພຽງແຕ່ຊຸດຕໍາ່ສຸດທີ່, ແລະສ່ວນທີ່ເຫຼືອຈະຖືກຄິດໄລ່ໂດຍອັດຕະໂນມັດໂດຍອີງໃສ່ມັນ. ເຫຼົ່ານີ້ແມ່ນອັນທີ່ເອີ້ນວ່າຄຸນສົມບັດຄໍານວນ. ພວກເຂົາສາມາດຖືກປຽບທຽບກັບ views ໃນຖານຂໍ້ມູນ:

import {observable, action} from 'mobx';
import {setupDnode} from "./utils/setupDnode";
// Утилиты для безопасного шифрования строк. Используют crypto-js
import {encrypt, decrypt} from "./utils/cryptoUtils";

export class SignerApp {
    constructor(initState = {}) {
        this.store = observable.object({
            // Храним пароль и зашифрованные ключи. Если пароль null - приложение locked
            password: null,
            vault: initState.vault,

            // Геттеры для вычислимых полей. Можно провести аналогию с view в бд.
            get locked(){
                return this.password == null
            },
            get keys(){
                return this.locked ?
                    undefined :
                    SignerApp._decryptVault(this.vault, this.password)
            },
            get initialized(){
                return this.vault !== undefined
            }
        })
    }
    // Инициализация пустого хранилища новым паролем
    @action
    initVault(password){
        this.store.vault = SignerApp._encryptVault([], password)
    }
    @action
    lock() {
        this.store.password = null
    }
    @action
    unlock(password) {
        this._checkPassword(password);
        this.store.password = password
    }
    @action
    addKey(key) {
        this._checkLocked();
        this.store.vault = SignerApp._encryptVault(this.store.keys.concat(key), this.store.password)
    }
    @action
    removeKey(index) {
        this._checkLocked();
        this.store.vault = SignerApp._encryptVault([
                ...this.store.keys.slice(0, index),
                ...this.store.keys.slice(index + 1)
            ],
            this.store.password
        )
    }

    ... // код подключения и api

    // private
    _checkPassword(password) {
        SignerApp._decryptVault(this.store.vault, password);
    }

    _checkLocked() {
        if (this.store.locked){
            throw new Error('App is locked')
        }
    }

    // Методы для шифровки/дешифровки хранилища
    static _encryptVault(obj, pass){
        const jsonString = JSON.stringify(obj)
        return encrypt(jsonString, pass)
    }

    static _decryptVault(str, pass){
        if (str === undefined){
            throw new Error('Vault not initialized')
        }
        try {
            const jsonString = decrypt(str, pass)
            return JSON.parse(jsonString)
        }catch (e) {
            throw new Error('Wrong password')
        }
    }
}

ຕອນນີ້ພວກເຮົາເກັບຮັກສາລະຫັດເຂົ້າລະຫັດ ແລະລະຫັດຜ່ານເທົ່ານັ້ນ. ທຸກສິ່ງທຸກຢ່າງອື່ນແມ່ນຄິດໄລ່. ພວກ​ເຮົາ​ເຮັດ​ການ​ໂອນ​ກັບ​ລັດ​ທີ່​ຖືກ​ລັອກ​ໂດຍ​ການ​ເອົາ​ລະ​ຫັດ​ຜ່ານ​ຈາກ​ລັດ​. API ສາທາລະນະໃນປັດຈຸບັນມີວິທີການເລີ່ມຕົ້ນການເກັບຮັກສາ.

ຂຽນສໍາລັບການເຂົ້າລະຫັດ ຜົນປະໂຫຍດທີ່ໃຊ້ crypto-js:

import CryptoJS from 'crypto-js'

// Используется для осложнения подбора пароля перебором. На каждый вариант пароля злоумышленнику придется сделать 5000 хешей
function strengthenPassword(pass, rounds = 5000) {
    while (rounds-- > 0){
        pass = CryptoJS.SHA256(pass).toString()
    }
    return pass
}

export function encrypt(str, pass){
    const strongPass = strengthenPassword(pass);
    return CryptoJS.AES.encrypt(str, strongPass).toString()
}

export function decrypt(str, pass){
    const strongPass = strengthenPassword(pass)
    const decrypted = CryptoJS.AES.decrypt(str, strongPass);
    return decrypted.toString(CryptoJS.enc.Utf8)
}

ຕົວທ່ອງເວັບມີ API idle ໂດຍຜ່ານທີ່ທ່ານສາມາດຈອງເຫດການ - ການປ່ຽນແປງຂອງລັດ. ລັດ, ຕາມຄວາມເຫມາະສົມ, ອາດຈະເປັນ idle, active и locked. ສໍາລັບ idle ທ່ານສາມາດກໍານົດເວລາຫມົດເວລາ, ແລະຖືກລັອກແມ່ນຖືກກໍານົດເມື່ອ OS ຕົວຂອງມັນເອງຖືກບລັອກ. ພວກ​ເຮົາ​ຍັງ​ຈະ​ປ່ຽນ​ຕົວ​ເລືອກ​ສໍາ​ລັບ​ການ​ບັນ​ທຶກ​ເປັນ localStorage​:

import {reaction, toJS} from 'mobx';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";
import {loadState, saveState} from "./utils/localStorage";

const DEV_MODE = process.env.NODE_ENV !== 'production';
const IDLE_INTERVAL = 30;

setupApp();

function setupApp() {
    const initState = loadState();
    const app = new SignerApp(initState);

    if (DEV_MODE) {
        global.app = app;
    }

    // Теперь мы явно узываем поле, которому будет происходить доступ, reaction отработает нормально
    reaction(
        () => ({
            vault: app.store.vault
        }),
        saveState
    );

    // Таймаут бездействия, когда сработает событие
    extensionApi.idle.setDetectionInterval(IDLE_INTERVAL);
    // Если пользователь залочил экран или бездействовал в течение указанного интервала лочим приложение
    extensionApi.idle.onStateChanged.addListener(state => {
        if (['locked', 'idle'].indexOf(state) > -1) {
            app.lock()
        }
    });

    // Connect to other contexts
    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

ລະຫັດກ່ອນຂັ້ນຕອນນີ້ແມ່ນ ທີ່ນີ້.

ການເຮັດທຸລະ ກຳ

ດັ່ງນັ້ນ, ພວກເຮົາມາຮອດສິ່ງທີ່ສໍາຄັນທີ່ສຸດ: ການສ້າງແລະເຊັນການເຮັດທຸລະກໍາໃນ blockchain. ພວກເຮົາຈະໃຊ້ WAVES blockchain ແລະຫ້ອງສະຫມຸດ waves-ທຸລະກໍາ.

ທໍາອິດ, ໃຫ້ເຮົາຕື່ມໃສ່ລັດ array ຂອງຂໍ້ຄວາມທີ່ຈໍາເປັນຕ້ອງໄດ້ເຊັນ, ຫຼັງຈາກນັ້ນເພີ່ມວິທີການສໍາລັບການເພີ່ມຂໍ້ຄວາມໃຫມ່, ຢືນຢັນລາຍເຊັນ, ແລະການປະຕິເສດ:

import {action, observable, reaction} from 'mobx';
import uuid from 'uuid/v4';
import {signTx} from '@waves/waves-transactions'
import {setupDnode} from "./utils/setupDnode";
import {decrypt, encrypt} from "./utils/cryptoUtils";

export class SignerApp {

    ...

    @action
    newMessage(data, origin) {
        // Для каждого сообщения создаем метаданные с id, статусом, выременем создания и тд.
        const message = observable.object({
            id: uuid(), // Идентификатор, используюю uuid
            origin, // Origin будем впоследствии показывать в интерфейсе
            data, //
            status: 'new', // Статусов будет четыре: new, signed, rejected и failed
            timestamp: Date.now()
        });
        console.log(`new message: ${JSON.stringify(message, null, 2)}`);

        this.store.messages.push(message);

        // Возвращаем промис внутри которого mobx мониторит изменения сообщения. Как только статус поменяется мы зарезолвим его
        return new Promise((resolve, reject) => {
            reaction(
                () => message.status, //Будем обсервить статус сообщеня
                (status, reaction) => { // второй аргумент это ссылка на сам reaction, чтобы его можно было уничтожть внутри вызова
                    switch (status) {
                        case 'signed':
                            resolve(message.data);
                            break;
                        case 'rejected':
                            reject(new Error('User rejected message'));
                            break;
                        case 'failed':
                            reject(new Error(message.err.message));
                            break;
                        default:
                            return
                    }
                    reaction.dispose()
                }
            )
        })
    }
    @action
    approve(id, keyIndex = 0) {
        const message = this.store.messages.find(msg => msg.id === id);
        if (message == null) throw new Error(`No msg with id:${id}`);
        try {
            message.data = signTx(message.data, this.store.keys[keyIndex]);
            message.status = 'signed'
        } catch (e) {
            message.err = {
                stack: e.stack,
                message: e.message
            };
            message.status = 'failed'
            throw e
        }
    }
    @action
    reject(id) {
        const message = this.store.messages.find(msg => msg.id === id);
        if (message == null) throw new Error(`No msg with id:${id}`);
        message.status = 'rejected'
    }

    ...
}

ເມື່ອພວກເຮົາໄດ້ຮັບຂໍ້ຄວາມໃຫມ່, ພວກເຮົາເພີ່ມ metadata ກັບມັນ, ເຮັດ observable ແລະເພີ່ມໃສ່ store.messages.

ຖ້າເຈົ້າບໍ່ observable ດ້ວຍຕົນເອງ, ຫຼັງຈາກນັ້ນ mobx ຈະເຮັດມັນເອງເມື່ອເພີ່ມຂໍ້ຄວາມໃສ່ array. ຢ່າງໃດກໍ່ຕາມ, ມັນຈະສ້າງວັດຖຸໃຫມ່ທີ່ພວກເຮົາຈະບໍ່ມີເອກະສານອ້າງອີງ, ແຕ່ພວກເຮົາຈະຕ້ອງການມັນສໍາລັບຂັ້ນຕອນຕໍ່ໄປ.

ຕໍ່ໄປ, ພວກເຮົາກັບຄືນຄໍາສັນຍາທີ່ແກ້ໄຂເມື່ອສະຖານະການຂໍ້ຄວາມປ່ຽນແປງ. ສະຖານະໄດ້ຖືກຕິດຕາມໂດຍປະຕິກິລິຍາ, ເຊິ່ງຈະ "ຂ້າຕົວມັນເອງ" ເມື່ອສະຖານະການປ່ຽນແປງ.

ລະຫັດວິທີການ approve и reject ງ່າຍ​ດາຍ​ຫຼາຍ​: ພວກ​ເຮົາ​ພຽງ​ແຕ່​ປ່ຽນ​ສະ​ຖາ​ນະ​ພາບ​ຂອງ​ຂໍ້​ຄວາມ​, ຫຼັງ​ຈາກ​ການ​ເຊັນ​ມັນ​ຖ້າ​ຫາກ​ວ່າ​ຈໍາ​ເປັນ​.

ພວກເຮົາເອົາການອະນຸມັດ ແລະປະຕິເສດໃນ UI API, newMessage ໃນ API ຂອງໜ້າ:

export class SignerApp {
    ...
    popupApi() {
        return {
            addKey: async (key) => this.addKey(key),
            removeKey: async (index) => this.removeKey(index),

            lock: async () => this.lock(),
            unlock: async (password) => this.unlock(password),
            initVault: async (password) => this.initVault(password),

            approve: async (id, keyIndex) => this.approve(id, keyIndex),
            reject: async (id) => this.reject(id)
        }
    }

    pageApi(origin) {
        return {
            signTransaction: async (txParams) => this.newMessage(txParams, origin)
        }
    }

    ...
}

ຕອນນີ້ໃຫ້ລອງເຊັນສັນຍາກັບສ່ວນຂະຫຍາຍ:

ໂດຍທົ່ວໄປ, ທຸກສິ່ງທຸກຢ່າງແມ່ນກຽມພ້ອມ, ທັງຫມົດທີ່ຍັງຄົງຢູ່ ເພີ່ມ UI ງ່າຍໆ.

UI

ການໂຕ້ຕອບຕ້ອງການການເຂົ້າເຖິງສະຖານະຂອງແອັບພລິເຄຊັນ. ໃນດ້ານ UI ພວກເຮົາຈະເຮັດ observable state ແລະເພີ່ມຟັງຊັນໃຫ້ກັບ API ທີ່ຈະປ່ຽນສະຖານະນີ້. ໃຫ້ຕື່ມ observable ໄປຫາວັດຖຸ API ທີ່ໄດ້ຮັບຈາກພື້ນຫຼັງ:

import {observable} from 'mobx'
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {cbToPromise, setupDnode, transformMethods} from "./utils/setupDnode";
import {initApp} from "./ui/index";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupUi().catch(console.error);

async function setupUi() {
    // Подключаемся к порту, создаем из него стрим
    const backgroundPort = extensionApi.runtime.connect({name: 'popup'});
    const connectionStream = new PortStream(backgroundPort);

    // Создаем пустой observable для состояния background'a
    let backgroundState = observable.object({});
    const api = {
        //Отдаем бекграунду функцию, которая будет обновлять observable
        updateState: async state => {
            Object.assign(backgroundState, state)
        }
    };

    // Делаем RPC объект
    const dnode = setupDnode(connectionStream, api);
    const background = await new Promise(resolve => {
        dnode.once('remote', remoteApi => {
            resolve(transformMethods(cbToPromise, remoteApi))
        })
    });

    // Добавляем в background observable со стейтом
    background.state = backgroundState;

    if (DEV_MODE) {
        global.background = background;
    }

    // Запуск интерфейса
    await initApp(background)
}

ໃນ​ຕອນ​ທ້າຍ​ພວກ​ເຮົາ​ເລີ່ມ​ຕົ້ນ​ການ​ເຮັດ​ໃຫ້​ການ​ໂຕ້​ຕອບ​ຂອງ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​. ນີ້​ແມ່ນ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ react​. ຈຸດ​ປະ​ສົງ​ພື້ນ​ຖານ​ແມ່ນ​ພຽງ​ແຕ່​ຜ່ານ​ການ​ນໍາ​ໃຊ້ props​. ມັນຈະຖືກຕ້ອງ, ແນ່ນອນ, ເພື່ອເຮັດໃຫ້ການບໍລິການແຍກຕ່າງຫາກສໍາລັບວິທີການແລະຮ້ານສໍາລັບລັດ, ແຕ່ສໍາລັບຈຸດປະສົງຂອງບົດຄວາມນີ້, ນີ້ແມ່ນພຽງພໍ:

import {render} from 'react-dom'
import App from './App'
import React from "react";

// Инициализируем приложение с background объектом в качест ве props
export async function initApp(background){
    render(
        <App background={background}/>,
        document.getElementById('app-content')
    );
}

ດ້ວຍ mobx ມັນງ່າຍຫຼາຍທີ່ຈະເລີ່ມການສະແດງຜົນເມື່ອຂໍ້ມູນມີການປ່ຽນແປງ. ພວກເຮົາພຽງແຕ່ແຂວນເຄື່ອງອອກແບບນັກສັງເກດການຈາກຊຸດ mobx-react ຢູ່ໃນອົງປະກອບ, ແລະ render ຈະຖືກເອີ້ນໂດຍອັດຕະໂນມັດເມື່ອມີການສັງເກດການອ້າງອີງຈາກການປ່ຽນແປງອົງປະກອບ. ທ່ານບໍ່ຕ້ອງການ mapStateToProps ຫຼືເຊື່ອມຕໍ່ຄືກັບ redux. ທຸກຢ່າງເຮັດວຽກອອກຈາກກ່ອງ:

import React, {Component, Fragment} from 'react'
import {observer} from "mobx-react";
import Init from './components/Initialize'
import Keys from './components/Keys'
import Sign from './components/Sign'
import Unlock from './components/Unlock'

@observer // У Компонета с этим декоратом будет автоматически вызван метод render, если будут изменены observable на которые он ссылается
export default class App extends Component {

    // Правильно конечно вынести логику рендера страниц в роутинг и не использовать вложенные тернарные операторы,
    // и привязывать observable и методы background непосредственно к тем компонентам, которые их используют
    render() {
        const {keys, messages, initialized, locked} = this.props.background.state;
        const {lock, unlock, addKey, removeKey, initVault, deleteVault, approve, reject} = this.props.background;

        return <Fragment>
            {!initialized
                ?
                <Init onInit={initVault}/>
                :
                locked
                    ?
                    <Unlock onUnlock={unlock}/>
                    :
                    messages.length > 0
                        ?
                        <Sign keys={keys} message={messages[messages.length - 1]} onApprove={approve} onReject={reject}/>
                        :
                        <Keys keys={keys} onAdd={addKey} onRemove={removeKey}/>
            }
            <div>
                {!locked && <button onClick={() => lock()}>Lock App</button>}
                {initialized && <button onClick={() => deleteVault()}>Delete all keys and init</button>}
            </div>
        </Fragment>
    }
}

ອົງປະກອບທີ່ຍັງເຫຼືອສາມາດເບິ່ງໄດ້ໃນລະຫັດ ໃນໂຟນເດີ UI.

ໃນປັດຈຸບັນຢູ່ໃນຫ້ອງຮຽນຄໍາຮ້ອງສະຫມັກ, ທ່ານຈໍາເປັນຕ້ອງໄດ້ເລືອກລັດສໍາລັບ UI ແລະແຈ້ງ UI ເມື່ອມັນປ່ຽນແປງ. ເພື່ອເຮັດສິ່ງນີ້, ໃຫ້ເພີ່ມວິທີການ getState и reactionໂທ remote.updateState:

import {action, observable, reaction} from 'mobx';
import uuid from 'uuid/v4';
import {signTx} from '@waves/waves-transactions'
import {setupDnode} from "./utils/setupDnode";
import {decrypt, encrypt} from "./utils/cryptoUtils";

export class SignerApp {

    ...

    // public
    getState() {
        return {
            keys: this.store.keys,
            messages: this.store.newMessages,
            initialized: this.store.initialized,
            locked: this.store.locked
        }
    }

    ...

    //
    connectPopup(connectionStream) {
        const api = this.popupApi();
        const dnode = setupDnode(connectionStream, api);

        dnode.once('remote', (remote) => {
            // Создаем reaction на изменения стейта, который сделает вызовет удаленну процедуру и обновит стейт в ui процессе
            const updateStateReaction = reaction(
                () => this.getState(),
                (state) => remote.updateState(state),
                // Третьим аргументом можно передавать параметры. fireImmediatly значит что reaction выполниться первый раз сразу.
                // Это необходимо, чтобы получить начальное состояние. Delay позволяет установить debounce
                {fireImmediately: true, delay: 500}
            );
            // Удалим подписку при отключении клиента
            dnode.once('end', () => updateStateReaction.dispose())

        })
    }

    ...
}

ເມື່ອໄດ້ຮັບວັດຖຸ remote ສ້າງ reaction ເພື່ອປ່ຽນສະຖານະທີ່ເອີ້ນຟັງຊັນຢູ່ດ້ານ UI.

ການສໍາພັດສຸດທ້າຍແມ່ນການເພີ່ມການສະແດງຂໍ້ຄວາມໃຫມ່ໃນໄອຄອນສ່ວນຂະຫຍາຍ:

function setupApp() {
...

    // Reaction на выставление текста беджа.
    reaction(
        () => app.store.newMessages.length > 0 ? app.store.newMessages.length.toString() : '',
        text => extensionApi.browserAction.setBadgeText({text}),
        {fireImmediately: true}
    );

...
}

ດັ່ງນັ້ນ, ຄໍາຮ້ອງສະຫມັກແມ່ນກຽມພ້ອມ. ຫນ້າເວັບອາດຈະຮ້ອງຂໍລາຍເຊັນສໍາລັບການເຮັດທຸລະກໍາ:

ລະຫັດແມ່ນມີຢູ່ບ່ອນນີ້ ການເຊື່ອມຕໍ່.

ສະຫລຸບ

ຖ້າທ່ານໄດ້ອ່ານບົດຄວາມຈົນເຖິງທີ່ສຸດ, ແຕ່ຍັງມີຄໍາຖາມ, ທ່ານສາມາດຖາມພວກເຂົາໄດ້ທີ່ repositories ທີ່ມີການຂະຫຍາຍ. ຢູ່ທີ່ນັ້ນທ່ານຍັງຈະພົບເຫັນຄໍາຫມັ້ນສັນຍາສໍາລັບແຕ່ລະຂັ້ນຕອນທີ່ກໍານົດ.

ແລະຖ້າທ່ານສົນໃຈເບິ່ງລະຫັດສໍາລັບການຂະຫຍາຍຕົວຈິງ, ທ່ານສາມາດຊອກຫານີ້ ທີ່ນີ້.

ລະຫັດ, repository ແລະລາຍລະອຽດວຽກເຮັດງານທໍາຈາກ Siemarell

ແຫຼ່ງຂໍ້ມູນ: www.habr.com