უსაფრთხო ბრაუზერის გაფართოების დაწერა

საერთო "კლიენტ-სერვერის" არქიტექტურისგან განსხვავებით, დეცენტრალიზებული აპლიკაციები ხასიათდება:

• არ არის საჭირო მონაცემთა ბაზის შენახვა მომხმარებლის შესვლებითა და პაროლებით. წვდომის ინფორმაცია ინახება ექსკლუზიურად თავად მომხმარებლების მიერ და მათი ავთენტურობის დადასტურება ხდება პროტოკოლის დონეზე.
• არ არის საჭირო სერვერის გამოყენება. აპლიკაციის ლოგიკა შეიძლება შესრულდეს ბლოკჩეინ ქსელში, სადაც შესაძლებელია საჭირო რაოდენობის მონაცემების შენახვა.

მომხმარებლის გასაღებებისთვის არის 2 შედარებით უსაფრთხო საცავი - ტექნიკის საფულეები და ბრაუზერის გაფართოებები. ტექნიკის საფულეები ძირითადად უკიდურესად უსაფრთხოა, მაგრამ რთული გამოსაყენებელი და შორს არის უფასო, მაგრამ ბრაუზერის გაფართოებები უსაფრთხოებისა და გამოყენების სიმარტივის შესანიშნავი კომბინაციაა და ასევე შეიძლება იყოს სრულიად უფასო საბოლოო მომხმარებლებისთვის.

ამ ყველაფრის გათვალისწინებით, ჩვენ გვინდოდა შეგვექმნა ყველაზე უსაფრთხო გაფართოება, რომელიც ამარტივებს დეცენტრალიზებული აპლიკაციების განვითარებას ტრანზაქციებთან და ხელმოწერებთან მუშაობის მარტივი API-ს მიწოდებით.
ამ გამოცდილების შესახებ ქვემოთ მოგიყვებით.

სტატია შეიცავს ნაბიჯ-ნაბიჯ ინსტრუქციებს, თუ როგორ უნდა დაწეროთ ბრაუზერის გაფართოება, კოდის მაგალითებით და ეკრანის ანაბეჭდებით. თქვენ შეგიძლიათ იპოვოთ ყველა კოდი საცავები. თითოეული ჩადენა ლოგიკურად შეესაბამება ამ სტატიის ნაწილს.

ბრაუზერის გაფართოებების მოკლე ისტორია

ბრაუზერის გაფართოებები დიდი ხანია არსებობს. ისინი გამოჩნდნენ Internet Explorer-ში 1999 წელს, Firefox-ში 2004 წელს. თუმცა, ძალიან დიდი ხნის განმავლობაში არ არსებობდა ერთი სტანდარტი გაფართოებისთვის.

შეიძლება ითქვას, რომ ის გაფართოებებთან ერთად გამოჩნდა Google Chrome-ის მეოთხე ვერსიაში. რა თქმა უნდა, მაშინ არ არსებობდა სპეციფიკაცია, მაგრამ ეს იყო Chrome API, რომელიც გახდა მისი საფუძველი: ბრაუზერის ბაზრის უმეტესი ნაწილი დაიპყრო და ჩაშენებული აპლიკაციების მაღაზია ჰქონდა, Chrome-მა რეალურად დააწესა სტანდარტი ბრაუზერის გაფართოებებისთვის.

Mozilla-ს ჰქონდა საკუთარი სტანდარტი, მაგრამ Chrome-ის გაფართოებების პოპულარობის გათვალისწინებით, კომპანიამ გადაწყვიტა შეექმნა თავსებადი API. 2015 წელს, Mozilla-ს ინიციატივით, მსოფლიო ქსელის კონსორციუმის (W3C) ფარგლებში შეიქმნა სპეციალური ჯგუფი, რომელიც მუშაობდა ბრაუზერის გაფართოების სპეციფიკაციებზე.

საფუძვლად იქნა მიღებული Chrome-ისთვის არსებული API გაფართოებები. მუშაობა განხორციელდა Microsoft-ის მხარდაჭერით (გუგლმა უარი თქვა სტანდარტის შემუშავებაში მონაწილეობაზე), რის შედეგადაც გამოჩნდა პროექტი სპეციფიკაციები.

ფორმალურად, სპეციფიკაციას მხარს უჭერს Edge, Firefox და Opera (გაითვალისწინეთ, რომ Chrome არ არის ამ სიაში). სინამდვილეში, სტანდარტი დიდწილად თავსებადია Chrome-თან, რადგან ის რეალურად იწერება მისი გაფართოებების საფუძველზე. შეგიძლიათ მეტი წაიკითხოთ WebExtensions API-ის შესახებ აქ.

გაფართოების სტრუქტურა

ერთადერთი ფაილი, რომელიც საჭიროა გაფართოებისთვის, არის manifest (manifest.json). ის ასევე არის გაფართოების "შესვლის წერტილი".

მანიფესტი

სპეციფიკაციის მიხედვით, manifest ფაილი არის მოქმედი JSON ფაილი. მანიფესტის კლავიშების სრული აღწერა ინფორმაცია იმის შესახებ, თუ რომელი კლავიშებია მხარდაჭერილი, რომელ ბრაუზერში შეიძლება ნახოთ აქ.

გასაღებები, რომლებიც არ არის სპეციფიკაციაში „შეიძლება“ იგნორირებული იყოს (როგორც Chrome, ასევე Firefox აცნობებენ შეცდომებს, მაგრამ გაფართოებები აგრძელებენ მუშაობას).

და მინდა გავამახვილო ყურადღება რამდენიმე პუნქტზე.

1. ფონზე - ობიექტი, რომელიც მოიცავს შემდეგ ველებს:
   1. სკრიპტები — სკრიპტების მასივი, რომელიც შესრულდება ფონურ კონტექსტში (ამაზე ცოტა მოგვიანებით ვისაუბრებთ);
   2. გვერდზე — სკრიპტების ნაცვლად, რომლებიც შესრულდება ცარიელ გვერდზე, შეგიძლიათ მიუთითოთ html შინაარსით. ამ შემთხვევაში სკრიპტის ველი იგნორირებული იქნება და საჭირო იქნება სკრიპტების ჩასმა შინაარსის გვერდზე;
   3. არსებობს — ბინარული დროშა, თუ არ არის მითითებული, ბრაუზერი „მოკლავს“ ფონურ პროცესს, როცა ჩათვლის, რომ ის არაფერს აკეთებს და საჭიროების შემთხვევაში გადატვირთავს მას. წინააღმდეგ შემთხვევაში, გვერდი განიტვირთება მხოლოდ ბრაუზერის დახურვისას. არ არის მხარდაჭერილი Firefox-ში.
2. შინაარსი_სკრიპტები - ობიექტების მასივი, რომელიც საშუალებას გაძლევთ ჩატვირთოთ სხვადასხვა სკრიპტები სხვადასხვა ვებ გვერდებზე. თითოეული ობიექტი შეიცავს შემდეგ მნიშვნელოვან ველებს:
   1. მატჩები - ნიმუშის url, რომელიც განსაზღვრავს, შედის თუ არა კონკრეტული შინაარსის სკრიპტი.
   2. js — სკრიპტების სია, რომლებიც ჩაიტვირთება ამ მატჩში;
   3. exclude_matches - გამორიცხავს მოედნიდან match URL-ები, რომლებიც ემთხვევა ამ ველს.
3. გვერდი_მოქმედება - რეალურად არის ობიექტი, რომელიც პასუხისმგებელია ბრაუზერში მისამართების ზოლის გვერდით გამოსახულ ხატზე და მასთან ურთიერთქმედებაზე. ის ასევე საშუალებას გაძლევთ აჩვენოთ ამომხტარი ფანჯარა, რომელიც განისაზღვრება თქვენი საკუთარი HTML, CSS და JS გამოყენებით.
   1. default_popup — HTML ფაილის გზა ამომხტარი ინტერფეისით, შეიძლება შეიცავდეს CSS და JS.
4. უფლებები — მასივი გაფართოების უფლებების მართვისთვის. არსებობს 3 სახის უფლება, რომლებიც დეტალურად არის აღწერილი აქ
5. ვებ_ხელმისაწვდომი_რესურსები — გაფართოების რესურსები, რომლებიც შეიძლება მოითხოვოს ვებ გვერდზე, მაგალითად, სურათები, JS, CSS, HTML ფაილები.
6. გარე_დაკავშირებადი — აქ შეგიძლიათ პირდაპირ მიუთითოთ ვებ გვერდების სხვა გაფართოებების და დომენების ID, რომლებიდანაც შეგიძლიათ დაკავშირება. დომენი შეიძლება იყოს მეორე დონის ან უფრო მაღალი. Firefox-ში არ მუშაობს.

შესრულების კონტექსტი

გაფართოებას აქვს სამი კოდის შესრულების კონტექსტი, ანუ აპლიკაცია შედგება სამი ნაწილისგან, ბრაუზერის API-ზე წვდომის სხვადასხვა დონით.

გაფართოების კონტექსტი

API-ის უმეტესობა აქ არის ხელმისაწვდომი. ამ კონტექსტში ისინი "ცხოვრობენ":

1. ფონის გვერდი — გაფართოების „backend“ ნაწილი. ფაილი მითითებულია მანიფესტში ღილაკის „ფონის“ გამოყენებით.
2. ამომხტარი გვერდი — ამომხტარი გვერდი, რომელიც ჩნდება გაფართოების ხატულაზე დაწკაპუნებისას. მანიფესტში browser_action -> default_popup.
3. მორგებული გვერდი — გაფართოების გვერდი, „ცხოვრება“ ხედის ცალკე ჩანართში chrome-extension://<id_расширения>/customPage.html.

ეს კონტექსტი არსებობს ბრაუზერის ფანჯრებისა და ჩანართებისგან დამოუკიდებლად. ფონის გვერდი არსებობს ერთ ეგზემპლარად და ყოველთვის მუშაობს (გამონაკლისია მოვლენის გვერდი, როდესაც ფონის სკრიპტი გაშვებულია მოვლენის მიერ და "კვდება" მისი შესრულების შემდეგ). ამომხტარი გვერდი არსებობს, როდესაც ამომხტარი ფანჯარა ღიაა და მორგებული გვერდი — სანამ მასთან ჩანართი ღიაა. ამ კონტექსტიდან სხვა ჩანართებზე და მათ შინაარსზე წვდომა არ არის.

კონტენტის სკრიპტის კონტექსტი

შინაარსის სკრიპტის ფაილი იხსნება ბრაუზერის თითოეულ ჩანართთან ერთად. მას აქვს წვდომა გაფართოების API-ის ნაწილზე და ვებ გვერდის DOM ხეზე. ეს არის შინაარსის სკრიპტები, რომლებიც პასუხისმგებელნი არიან გვერდთან ურთიერთქმედებისთვის. გაფართოებები, რომლებიც მანიპულირებენ DOM ხეზე, ამას აკეთებენ შინაარსის სკრიპტებში - მაგალითად, რეკლამის ბლოკერებში ან მთარგმნელებში. ასევე, კონტენტის სკრიპტს შეუძლია გვერდთან კომუნიკაცია სტანდარტის საშუალებით postMessage.

ვებ გვერდის კონტექსტი

ეს არის თავად ვებ გვერდი. მას არაფერი აქვს საერთო გაფართოებასთან და არ აქვს წვდომა იქ, გარდა იმ შემთხვევებისა, როდესაც ამ გვერდის დომენი აშკარად არ არის მითითებული მანიფესტში (დაწვრილებით ამის შესახებ ქვემოთ).

შეტყობინება

აპლიკაციის სხვადასხვა ნაწილმა უნდა გაცვალოს შეტყობინებები ერთმანეთთან. ამისთვის არის 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 საჭიროა ყველა დომენზე და მხოლოდ კონკრეტული შეიძლება იყოს მითითებული მანიფესტში. შედეგად, დიაგრამა ასე გამოიყურება:

იქნება სხვა სცენარი - inpage, რომელსაც გვერდზე შევიტანთ. ის იმუშავებს თავის კონტექსტში და უზრუნველყოფს API-ს გაფართოებასთან მუშაობისთვის.

დაწყება

ბრაუზერის გაფართოების ყველა კოდი ხელმისაწვდომია მისამართზე GitHub. აღწერის დროს იქნება ბმულები ვალდებულებებზე.

დავიწყოთ მანიფესტით:

{
  // Имя и описание, версия. Все это будет видно в браузере в 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.

ახლა ჩვენი გაფართოება დაინსტალირებულია და მუშაობს. თქვენ შეგიძლიათ აწარმოოთ დეველოპერის ინსტრუმენტები სხვადასხვა კონტექსტში შემდეგნაირად:

ამომხტარი ფანჯარა ->

კონტენტის სკრიპტის კონსოლზე წვდომა ხორციელდება თავად გვერდის კონსოლის მეშვეობით, რომელზეც ის გაშვებულია.

შეტყობინება

ასე რომ, ჩვენ უნდა დავამყაროთ ორი საკომუნიკაციო არხი: inpage <-> background და popup <-> background. თქვენ, რა თქმა უნდა, შეგიძლიათ უბრალოდ გაგზავნოთ შეტყობინებები პორტში და გამოიგონოთ თქვენი საკუთარი პროტოკოლი, მაგრამ მე მირჩევნია მიდგომა, რომელიც ვნახე მეტამასკის ღია კოდის პროექტში.

ეს არის ბრაუზერის გაფართოება 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;
    }
}

შემდეგ ჩვენ ვქმნით კავშირს შინაარსის სკრიპტში:

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. ჩვენ ვქმნით ორ ნაკადს. ერთი - გვერდისკენ, პოსტმესიჯის თავზე. ამისთვის ვიყენებთ ამას ეს პაკეტი მეტამასკის შემქმნელებისგან. მეორე ნაკადი არის ფონზე მიღებული პორტი 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;
}

Ჩვენ მზად ვართ დისტანციური პროცედურის ზარი (RPC) ცალკე API გვერდისა და UI-სთვის. ახალი გვერდის ფონთან დაკავშირებისას ჩვენ ვხედავთ ამას:

ცარიელი API და წარმოშობა. გვერდის მხარეს, ჩვენ შეგვიძლია ვუწოდოთ hello ფუნქცია ასე:

თანამედროვე 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 და ნაკადის მიდგომა საკმაოდ მოქნილი ჩანს: ჩვენ შეგვიძლია გამოვიყენოთ ორთქლის მულტიპლექსირება და შევქმნათ რამდენიმე განსხვავებული API სხვადასხვა ამოცანებისთვის. პრინციპში, dnode შეიძლება გამოყენებულ იქნას ნებისმიერ ადგილას, მთავარია ტრანსპორტის გადატანა nodejs ნაკადის სახით.

ალტერნატივა არის JSON ფორმატი, რომელიც ახორციელებს JSON RPC 2 პროტოკოლს. თუმცა, ის მუშაობს სპეციფიკურ ტრანსპორტებთან (TCP და HTTP(S)), რაც ჩვენს შემთხვევაში არ გამოიყენება.

შიდა მდგომარეობა და ადგილობრივი შენახვა

ჩვენ დაგვჭირდება აპლიკაციის შიდა მდგომარეობის შენახვა - მინიმუმ ხელმოწერის გასაღებები. ჩვენ საკმაოდ მარტივად შეგვიძლია დავამატოთ მდგომარეობა აპლიკაციას და მისი შეცვლის მეთოდები ამომხტარ 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)
        }
    }

    ...

} 

ფონზე, ჩვენ ყველაფერს მოვახვევთ ფუნქციას და ჩავწერთ აპლიკაციის ობიექტს ფანჯარაში, რათა შევძლოთ მასთან მუშაობა კონსოლიდან:

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 კონსოლიდან და ვნახოთ, რა მოხდა სახელმწიფოსთან:

მდგომარეობა უნდა იყოს მდგრადი, რათა კლავიშები არ დაიკარგოს გადატვირთვისას.

ჩვენ ვინახავთ მას 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 აკონტროლებს ველებზე წვდომას. გამოიყენება ბიბლიოთეკის მიერ შექმნილი პროქსი ობიექტების შემგროვებლები და სეტერები.

სამოქმედო დეკორატორები ემსახურება ორ მიზანს:

1. მკაცრ რეჟიმში enforceActions დროშით, mobx კრძალავს მდგომარეობის პირდაპირ შეცვლას. მკაცრ პირობებში მუშაობა კარგ პრაქტიკად ითვლება.
2. მაშინაც კი, თუ ფუნქცია რამდენჯერმე ცვლის მდგომარეობას - მაგალითად, ჩვენ ვცვლით რამდენიმე ველს კოდის რამდენიმე სტრიქონში - დამკვირვებლებს ეცნობებათ მხოლოდ მისი დასრულების შემდეგ. ეს განსაკუთრებით მნიშვნელოვანია ფრონტენტისთვის, სადაც მდგომარეობის არასაჭირო განახლებები იწვევს ელემენტების არასაჭირო რენდერირებას. ჩვენს შემთხვევაში არც პირველი და არც მეორე არ არის განსაკუთრებით აქტუალური, მაგრამ ჩვენ მივყვებით საუკეთესო პრაქტიკას. ჩვეულებრივია დეკორატორების მიმაგრება ყველა ფუნქციაზე, რომელიც ცვლის დაკვირვებული ველების მდგომარეობას.

ფონზე დავამატებთ ინიციალიზაციას და მდგომარეობის შენახვას 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, მაშინ ისევ არაფერი მოხდებოდა, ვინაიდან მასივის ელემენტების დამატების/მოხსნისას მასზე მითითება არ შეიცვლება.

Mobx მოქმედებს როგორც სელექტორი პირველად და აკონტროლებს მხოლოდ დაკვირვებად ობიექტებს, რომლებზეც ჩვენ მივიღეთ წვდომა. ეს კეთდება პროქსი მიმღებების მეშვეობით. აქედან გამომდინარე, აქ გამოიყენება ჩაშენებული ფუნქცია toJS. ის აბრუნებს ახალ ობიექტს ყველა პროქსი ჩანაცვლებული ორიგინალური ველებით. შესრულების დროს ის კითხულობს ობიექტის ყველა ველს - შესაბამისად, მიმღებები ამოქმედდება.

ამომხტარ კონსოლში კვლავ დავამატებთ რამდენიმე კლავიშს. ამჯერად ისინი ასევე აღმოჩნდნენ localStorage-ში:

როდესაც ფონის გვერდი ხელახლა იტვირთება, ინფორმაცია ადგილზე რჩება.

ამ მომენტამდე აპლიკაციის ყველა კოდის ნახვა შესაძლებელია აქ.

პირადი გასაღებების უსაფრთხო შენახვა

პირადი გასაღებების მკაფიო ტექსტში შენახვა უსაფრთხოა: ყოველთვის არის შანსი, რომ გაგიტეხონ, მოიპოვოთ წვდომა თქვენს კომპიუტერზე და ა.შ. ამიტომ, localStorage-ში ჩვენ ვინახავთ გასაღებებს პაროლით დაშიფრული ფორმით.

მეტი უსაფრთხოებისთვის აპლიკაციას დავამატებთ ჩაკეტილ მდგომარეობას, რომელშიც საერთოდ არ იქნება წვდომა გასაღებებზე. ჩვენ ავტომატურად გადავიტანთ გაფართოებას ჩაკეტილ მდგომარეობაში დროის ამოწურვის გამო.

Mobx საშუალებას გაძლევთ შეინახოთ მონაცემების მხოლოდ მინიმალური ნაკრები, დანარჩენი კი ავტომატურად გამოითვლება მასზე დაყრდნობით. ეს არის ეგრეთ წოდებული გამოთვლილი თვისებები. მათი შედარება შესაძლებელია მონაცემთა ბაზების ხედებთან:

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-ს ახლა აქვს მეხსიერების ინიციალიზაციის მეთოდი.

დაწერილია დაშიფვრისთვის კომუნალური პროგრამები კრიპტო-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, active и locked. უმოქმედობისთვის შეგიძლიათ დააყენოთ ვადის ამოწურვა, ხოლო ჩაკეტილი დაყენებულია, როდესაც თავად 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)
        }
    }
}

კოდი ამ ნაბიჯის წინ არის აქ.

გარიგებები

ასე რომ, ჩვენ მივდივართ ყველაზე მნიშვნელოვან საკითხამდე: ტრანზაქციების შექმნასა და ხელმოწერაზე ბლოკჩეინზე. ჩვენ გამოვიყენებთ WAVES ბლოკჩეინს და ბიბლიოთეკას ტალღები-გარიგებები.

ჯერ, მოდით, სახელმწიფოს დავამატოთ შეტყობინებების მასივი, რომლებიც ხელმოწერილია, შემდეგ დავამატოთ ახალი შეტყობინების დამატების, ხელმოწერის დადასტურებისა და უარის თქმის მეთოდები:

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'
    }

    ...
}

როდესაც ვიღებთ ახალ შეტყობინებას, ჩვენ ვამატებთ მას მეტამონაცემებს, გააკეთეთ observable და დაამატეთ store.messages.

თუ არა observable ხელით, მაშინ mobx ამას თავად გააკეთებს მასივში შეტყობინებების დამატებისას. თუმცა, ის შექმნის ახალ ობიექტს, რომელზეც არ გვექნება მითითება, მაგრამ დაგვჭირდება შემდეგი ნაბიჯისთვის.

შემდეგი, ჩვენ ვაბრუნებთ დაპირებას, რომელიც წყდება შეტყობინების სტატუსის შეცვლისას. სტატუსს აკონტროლებს რეაქცია, რომელიც სტატუსის შეცვლისას „იკლავს თავს“.

მეთოდის კოდი approve и reject ძალიან მარტივია: ჩვენ უბრალოდ ვცვლით შეტყობინების სტატუსს, საჭიროების შემთხვევაში, ხელმოწერის შემდეგ.

ჩვენ ვათავსებთ Approve-ს და უარყოფას 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 მხარეს ჩვენ გავაკეთებთ observable მდგომარეობა და დაამატეთ ფუნქცია 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)
}

დასასრულს ვიწყებთ აპლიკაციის ინტერფეისის რენდერირებას. ეს არის რეაქტიული აპლიკაცია. ფონის ობიექტი უბრალოდ გადაეცემა რეკვიზიტების გამოყენებით. სწორი იქნებოდა, რა თქმა უნდა, მეთოდებისთვის ცალკე სერვისის გაკეთება და სახელმწიფოსთვის მაღაზია, მაგრამ ამ სტატიის მიზნებისთვის ეს საკმარისია:

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-რეაქტი კომპონენტზე და რენდერი ავტომატურად გამოიძახება, როდესაც კომპონენტის მიერ მითითებულ რომელიმე დაკვირვება შეიცვლება. თქვენ არ გჭირდებათ 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}
    );

...
}

ასე რომ, განაცხადი მზად არის. ვებგვერდებმა შეიძლება მოითხოვონ ხელმოწერა ტრანზაქციებზე:

კოდი ხელმისაწვდომია აქ ლინკები.

დასკვნა

თუ თქვენ წაიკითხეთ სტატია ბოლომდე, მაგრამ მაინც გაქვთ შეკითხვები, შეგიძლიათ დაუსვათ ისინი მისამართზე საცავები გაფართოებით. იქ ასევე ნახავთ ვალდებულებებს თითოეული დანიშნულ საფეხურზე.

და თუ გაინტერესებთ ფაქტობრივი გაფართოების კოდის ნახვა, შეგიძლიათ იპოვოთ ეს აქ.

კოდი, საცავი და სამუშაოს აღწერა დან სიმარელი

წყარო: www.habr.com