একটি নিরাপদ ব্রাউজার এক্সটেনশন লেখা

সাধারণ "ক্লায়েন্ট-সার্ভার" আর্কিটেকচারের বিপরীতে, বিকেন্দ্রীভূত অ্যাপ্লিকেশনগুলি দ্বারা চিহ্নিত করা হয়:

• ব্যবহারকারীর লগইন এবং পাসওয়ার্ড সহ একটি ডাটাবেস সংরক্ষণ করার প্রয়োজন নেই। অ্যাক্সেস তথ্য ব্যবহারকারীদের দ্বারা একচেটিয়াভাবে সংরক্ষণ করা হয়, এবং তাদের সত্যতা নিশ্চিতকরণ প্রোটোকল স্তরে ঘটে।
• সার্ভার ব্যবহার করার দরকার নেই। অ্যাপ্লিকেশন লজিক একটি ব্লকচেইন নেটওয়ার্কে কার্যকর করা যেতে পারে, যেখানে প্রয়োজনীয় পরিমাণ ডেটা সংরক্ষণ করা সম্ভব।

ব্যবহারকারী কীগুলির জন্য 2টি তুলনামূলকভাবে নিরাপদ স্টোরেজ রয়েছে - হার্ডওয়্যার ওয়ালেট এবং ব্রাউজার এক্সটেনশন। হার্ডওয়্যার ওয়ালেটগুলি বেশিরভাগই অত্যন্ত সুরক্ষিত, তবে ব্যবহার করা কঠিন এবং বিনামূল্যে থেকে অনেক দূরে, তবে ব্রাউজার এক্সটেনশনগুলি নিরাপত্তা এবং ব্যবহারের সহজতার নিখুঁত সমন্বয়, এবং শেষ ব্যবহারকারীদের জন্য সম্পূর্ণ বিনামূল্যেও হতে পারে৷

এই সমস্ত কিছু বিবেচনায় নিয়ে, আমরা লেনদেন এবং স্বাক্ষরের সাথে কাজ করার জন্য একটি সাধারণ API প্রদান করে বিকেন্দ্রীভূত অ্যাপ্লিকেশনগুলির বিকাশকে সহজতর করে সবচেয়ে সুরক্ষিত এক্সটেনশন তৈরি করতে চেয়েছিলাম।
আমরা নীচে এই অভিজ্ঞতা সম্পর্কে আপনাকে বলব।

নিবন্ধটিতে কোড উদাহরণ এবং স্ক্রিনশট সহ একটি ব্রাউজার এক্সটেনশন কীভাবে লিখতে হয় সে সম্পর্কে ধাপে ধাপে নির্দেশাবলী থাকবে। আপনি সব কোড খুঁজে পেতে পারেন সংগ্রহস্থল. প্রতিটি প্রতিশ্রুতি যৌক্তিকভাবে এই নিবন্ধের একটি বিভাগের সাথে মিলে যায়।

ব্রাউজার এক্সটেনশনের সংক্ষিপ্ত ইতিহাস

ব্রাউজার এক্সটেনশনগুলি দীর্ঘকাল ধরে রয়েছে। তারা 1999 সালে ইন্টারনেট এক্সপ্লোরারে, 2004 সালে ফায়ারফক্সে হাজির হয়েছিল। যাইহোক, খুব দীর্ঘ সময়ের জন্য এক্সটেনশনের জন্য কোন একক মান ছিল না।

আমরা বলতে পারি যে এটি গুগল ক্রোমের চতুর্থ সংস্করণে এক্সটেনশনের সাথে উপস্থিত হয়েছিল। অবশ্যই, তখন কোন স্পেসিফিকেশন ছিল না, কিন্তু এটি ছিল ক্রোম এপিআই যা এর ভিত্তি হয়ে উঠেছে: বেশিরভাগ ব্রাউজার বাজার জয় করে এবং একটি অন্তর্নির্মিত অ্যাপ্লিকেশন স্টোর থাকার পরে, ক্রোম আসলে ব্রাউজার এক্সটেনশনের জন্য মান নির্ধারণ করে।

মজিলার নিজস্ব মান ছিল, কিন্তু ক্রোম এক্সটেনশনের জনপ্রিয়তা দেখে কোম্পানি একটি সামঞ্জস্যপূর্ণ API তৈরি করার সিদ্ধান্ত নিয়েছে। 2015 সালে, মজিলার উদ্যোগে, ক্রস-ব্রাউজার এক্সটেনশন স্পেসিফিকেশনগুলিতে কাজ করার জন্য ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) এর মধ্যে একটি বিশেষ গ্রুপ তৈরি করা হয়েছিল।

ক্রোমের জন্য বিদ্যমান API এক্সটেনশনগুলিকে ভিত্তি হিসাবে নেওয়া হয়েছিল৷ কাজটি মাইক্রোসফ্টের সমর্থনে পরিচালিত হয়েছিল (গুগল স্ট্যান্ডার্ডের বিকাশে অংশ নিতে অস্বীকার করেছিল), এবং ফলস্বরূপ একটি খসড়া উপস্থিত হয়েছিল বিশেষ উল্লেখ.

আনুষ্ঠানিকভাবে, স্পেসিফিকেশন এজ, ফায়ারফক্স এবং অপেরা দ্বারা সমর্থিত (মনে রাখবেন যে Chrome এই তালিকায় নেই)। কিন্তু আসলে, স্ট্যান্ডার্ডটি মূলত ক্রোমের সাথে সামঞ্জস্যপূর্ণ, যেহেতু এটি আসলে এর এক্সটেনশনের উপর ভিত্তি করে লেখা হয়েছে। আপনি WebExtensions API সম্পর্কে আরও পড়তে পারেন এখানে.

এক্সটেনশন কাঠামো

এক্সটেনশনের জন্য প্রয়োজনীয় একমাত্র ফাইলটি হল ম্যানিফেস্ট (manifest.json)। এটি সম্প্রসারণের "এন্ট্রি পয়েন্ট"ও।

ম্যানিফেস্টো

স্পেসিফিকেশন অনুযায়ী, ম্যানিফেস্ট ফাইলটি একটি বৈধ JSON ফাইল। কোন ব্রাউজারে দেখা যাবে কোন কী সমর্থিত সে সম্পর্কে তথ্য সহ ম্যানিফেস্ট কীগুলির একটি সম্পূর্ণ বিবরণ৷ এখানে.

যে কীগুলি স্পেসিফিকেশনে নেই সেগুলিকে উপেক্ষা করা যেতে পারে (ক্রোম এবং ফায়ারফক্স উভয়ই ত্রুটির প্রতিবেদন করে, তবে এক্সটেনশনগুলি কাজ করতে থাকে)।

এবং আমি কিছু পয়েন্ট মনোযোগ আকর্ষণ করতে চাই.

1. পটভূমি - একটি বস্তু যা নিম্নলিখিত ক্ষেত্রগুলি অন্তর্ভুক্ত করে:
   1. স্ক্রিপ্ট — স্ক্রিপ্টগুলির একটি অ্যারে যা পটভূমি প্রসঙ্গে কার্যকর করা হবে (আমরা এই বিষয়ে একটু পরে কথা বলব);
   2. পৃষ্ঠা - স্ক্রিপ্টগুলির পরিবর্তে যা একটি খালি পৃষ্ঠায় কার্যকর করা হবে, আপনি বিষয়বস্তুর সাথে html উল্লেখ করতে পারেন। এই ক্ষেত্রে, স্ক্রিপ্ট ক্ষেত্রটি উপেক্ষা করা হবে, এবং স্ক্রিপ্টগুলিকে বিষয়বস্তু পৃষ্ঠায় সন্নিবেশ করাতে হবে;
   3. জিদ করা — একটি বাইনারি পতাকা, যদি নির্দিষ্ট না করা হয়, ব্রাউজারটি পটভূমি প্রক্রিয়াটিকে "হত্যা" করবে যখন এটি বিবেচনা করবে যে এটি কিছু করছে না এবং প্রয়োজনে এটি পুনরায় চালু করবে। অন্যথায়, ব্রাউজার বন্ধ হলেই পৃষ্ঠাটি আনলোড করা হবে। ফায়ারফক্সে সমর্থিত নয়।
2. content_scripts — বস্তুর একটি অ্যারে যা আপনাকে বিভিন্ন ওয়েব পেজে বিভিন্ন স্ক্রিপ্ট লোড করতে দেয়। প্রতিটি বস্তুর নিম্নলিখিত গুরুত্বপূর্ণ ক্ষেত্র রয়েছে:
   1. ম্যাচ - প্যাটার্ন ইউআরএল, যা একটি নির্দিষ্ট বিষয়বস্তু স্ক্রিপ্ট অন্তর্ভুক্ত করা হবে কি না তা নির্ধারণ করে।
   2. js — এই ম্যাচে লোড করা হবে এমন স্ক্রিপ্টগুলির একটি তালিকা;
   3. বাদ দিন - ক্ষেত্র থেকে বাদ match এই ক্ষেত্রের সাথে মেলে এমন URL
3. পৃষ্ঠা_ক্রিয়া - আসলে একটি বস্তু যা ব্রাউজারে ঠিকানা বারের পাশে প্রদর্শিত আইকনের জন্য দায়ী এবং এটির সাথে মিথস্ক্রিয়া। এটি আপনাকে একটি পপআপ উইন্ডো প্রদর্শন করার অনুমতি দেয়, যা আপনার নিজস্ব HTML, CSS এবং JS ব্যবহার করে সংজ্ঞায়িত করা হয়।
   1. ডিফল্ট_পপআপ — পপআপ ইন্টারফেস সহ HTML ফাইলের পাথ, CSS এবং JS থাকতে পারে।
4. অনুমতি — এক্সটেনশন অধিকার পরিচালনার জন্য একটি অ্যারে। 3 প্রকারের অধিকার রয়েছে, যা বিস্তারিতভাবে বর্ণনা করা হয়েছে এখানে
5. ওয়েব_অ্যাক্সেসযোগ্য_সম্পদ — এক্সটেনশন সম্পদ যা একটি ওয়েব পৃষ্ঠা অনুরোধ করতে পারে, উদাহরণস্বরূপ, ছবি, JS, CSS, HTML ফাইল।
6. বাহ্যিকভাবে_সংযোগযোগ্য — এখানে আপনি স্পষ্টভাবে অন্যান্য এক্সটেনশনের ID এবং ওয়েব পৃষ্ঠাগুলির ডোমেনগুলি নির্দিষ্ট করতে পারেন যেখান থেকে আপনি সংযোগ করতে পারেন৷ একটি ডোমেইন দ্বিতীয় স্তর বা উচ্চতর হতে পারে। ফায়ারফক্সে কাজ করে না।

মৃত্যুদন্ড প্রসঙ্গ

এক্সটেনশনটিতে তিনটি কোড এক্সিকিউশন প্রসঙ্গ রয়েছে, অর্থাৎ, ব্রাউজার API-এ অ্যাক্সেসের বিভিন্ন স্তর সহ অ্যাপ্লিকেশনটিতে তিনটি অংশ রয়েছে।

এক্সটেনশন প্রসঙ্গ

বেশিরভাগ API এখানে উপলব্ধ। এই প্রেক্ষাপটে তারা "লাইভ":

1. পটভূমি পাতা - এক্সটেনশনের "ব্যাকএন্ড" অংশ। ফাইলটি "ব্যাকগ্রাউন্ড" কী ব্যবহার করে ম্যানিফেস্টে নির্দিষ্ট করা হয়েছে।
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 এ লোড করা যেতে পারে এবং নিশ্চিত করুন যে এটি কাজ করে।

এটি যাচাই করতে, আপনি কোডটি নিতে পারেন এখানে থেকে. আমরা যা করেছি তা ছাড়াও, লিঙ্কটি ওয়েবপ্যাক ব্যবহার করে প্রকল্পের সমাবেশ কনফিগার করেছে। ব্রাউজারে একটি অ্যাপ্লিকেশন যুক্ত করতে, chrome://extensions-এ আপনাকে লোড আনপ্যাক করা এবং সংশ্লিষ্ট এক্সটেনশন সহ ফোল্ডার নির্বাচন করতে হবে - আমাদের ক্ষেত্রে dist.

এখন আমাদের এক্সটেনশন ইনস্টল এবং কাজ করছে। আপনি নিম্নরূপ বিভিন্ন প্রসঙ্গের জন্য বিকাশকারী সরঞ্জামগুলি চালাতে পারেন:

পপআপ ->

কন্টেন্ট স্ক্রিপ্ট কনসোলে অ্যাক্সেস সেই পৃষ্ঠার কনসোলের মাধ্যমে করা হয় যেখানে এটি চালু করা হয়েছে।

বার্তা বিনিময়

সুতরাং, আমাদের দুটি যোগাযোগের চ্যানেল স্থাপন করতে হবে: ইনপেজ <-> ব্যাকগ্রাউন্ড এবং পপআপ <-> ব্যাকগ্রাউন্ড। আপনি অবশ্যই পোর্টে বার্তা পাঠাতে পারেন এবং আপনার নিজস্ব প্রোটোকল উদ্ভাবন করতে পারেন, তবে আমি মেটামাস্ক ওপেন সোর্স প্রকল্পে যে পদ্ধতিটি দেখেছি তা পছন্দ করি।

এটি Ethereum নেটওয়ার্কের সাথে কাজ করার জন্য একটি ব্রাউজার এক্সটেনশন। এতে, অ্যাপ্লিকেশনের বিভিন্ন অংশ dnode লাইব্রেরি ব্যবহার করে RPC এর মাধ্যমে যোগাযোগ করে। এটি আপনাকে খুব দ্রুত এবং সুবিধাজনকভাবে একটি বিনিময় সংগঠিত করার অনুমতি দেয় যদি আপনি এটিকে একটি পরিবহন হিসাবে একটি নোডেজ স্ট্রিম প্রদান করেন (অর্থাৎ একটি বস্তু যা একই ইন্টারফেস প্রয়োগ করে):

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

এখানে এবং নীচে, গ্লোবাল ক্রোম অবজেক্টের পরিবর্তে, আমরা এক্সটেনশনএপিআই ব্যবহার করি, যা Google এর ব্রাউজারে এবং অন্যদের ব্রাউজারে Chrome অ্যাক্সেস করে। এটি ক্রস-ব্রাউজার সামঞ্জস্যের জন্য করা হয়েছে, তবে এই নিবন্ধটির উদ্দেশ্যে কেউ কেবল '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 স্ট্রিমগুলির সাথে কাজ করে, এবং আমরা একটি পোর্ট পাই, একটি অ্যাডাপ্টার ক্লাস প্রয়োজন। এটি পঠনযোগ্য-স্ট্রিম লাইব্রেরি ব্যবহার করে তৈরি করা হয়েছে, যা ব্রাউজারে নোডজ স্ট্রীম প্রয়োগ করে:

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-এ স্ক্রিপ্টটি ইনজেক্ট করুন। স্ক্রিপ্টটি ডাউনলোড করুন (এটি ম্যানিফেস্টে অ্যাক্সেসের অনুমতি দেওয়া হয়েছিল) এবং একটি ট্যাগ তৈরি করুন৷ 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);
    }
}

এখন আমরা ইনপেজে একটি এপিআই অবজেক্ট তৈরি করি এবং এটিকে বিশ্বব্যাপী সেট করি:

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

আমরা প্রস্তুত পৃষ্ঠা এবং UI এর জন্য পৃথক API সহ দূরবর্তী পদ্ধতি কল (RPC). পটভূমিতে একটি নতুন পৃষ্ঠা সংযোগ করার সময় আমরা এটি দেখতে পারি:

খালি API এবং মূল। পৃষ্ঠার পাশে, আমরা হ্যালো ফাংশনটিকে এভাবে কল করতে পারি:

আধুনিক JS-এ কলব্যাক ফাংশনগুলির সাথে কাজ করা খারাপ আচরণ, তাই আসুন একটি dnode তৈরি করতে একটি ছোট সাহায্যকারী লিখি যা আপনাকে একটি API অবজেক্টকে ইউটিলে পাস করতে দেয়।

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 কনসোল থেকে কয়েকটি কী যোগ করি এবং রাজ্যের সাথে কী ঘটে তা দেখুন:

রাষ্ট্রকে ক্রমাগত করা দরকার যাতে পুনরায় চালু করার সময় কীগুলি হারিয়ে না যায়।

আমরা প্রতিটি পরিবর্তনের সাথে এটিকে ওভাররাইট করে স্থানীয় স্টোরেজ এ সংরক্ষণ করব। পরবর্তীকালে, এটিতে অ্যাক্সেস 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. এমনকি যদি একটি ফাংশন বেশ কয়েকবার স্থিতি পরিবর্তন করে - উদাহরণস্বরূপ, আমরা কোডের কয়েকটি লাইনে বেশ কয়েকটি ক্ষেত্র পরিবর্তন করি - পর্যবেক্ষকদের শুধুমাত্র যখন এটি সম্পূর্ণ হয় তখনই অবহিত করা হয়। এটি ফ্রন্টএন্ডের জন্য বিশেষভাবে গুরুত্বপূর্ণ, যেখানে অপ্রয়োজনীয় স্টেট আপডেটগুলি উপাদানগুলির অপ্রয়োজনীয় রেন্ডারিংয়ের দিকে পরিচালিত করে। আমাদের ক্ষেত্রে, প্রথম বা দ্বিতীয়টি বিশেষভাবে প্রাসঙ্গিক নয়, তবে আমরা সেরা অনুশীলনগুলি অনুসরণ করব৷ পরিলক্ষিত ক্ষেত্রগুলির অবস্থা পরিবর্তন করে এমন সমস্ত ফাংশনের সাথে সজ্জাসংশ্লিষ্টদের সংযুক্ত করার প্রথাগত।

ব্যাকগ্রাউন্ডে আমরা স্থানীয় স্টোরেজে স্টেটকে প্রারম্ভিকতা এবং সেভ করব:

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. একটি হ্যান্ডলার যা প্রতিবার পরিবর্তন করার সময় এই ডেটা সহ কল ​​করা হবে।

রেডক্সের বিপরীতে, যেখানে আমরা স্পষ্টভাবে একটি যুক্তি হিসাবে স্টেট গ্রহণ করি, mobx মনে রাখে যে আমরা নির্বাচকের ভিতরে কোন পর্যবেক্ষণযোগ্যগুলি অ্যাক্সেস করি এবং শুধুমাত্র হ্যান্ডলারকে কল করে যখন তারা পরিবর্তন করে।

এটা বোঝা গুরুত্বপূর্ণ যে ঠিক কিভাবে mobx সিদ্ধান্ত নেয় কোন পর্যবেক্ষণযোগ্য আমরা সাবস্ক্রাইব করব। যদি আমি এই মত কোড একটি নির্বাচক লিখেছিলাম() => app.store, তাহলে প্রতিক্রিয়া কখনই বলা হবে না, যেহেতু স্টোরেজ নিজেই পর্যবেক্ষণযোগ্য নয়, শুধুমাত্র এর ক্ষেত্রগুলি।

যদি এভাবে লিখতাম () => app.store.keys, তারপর আবার কিছুই ঘটবে না, যেহেতু অ্যারে উপাদানগুলি যোগ/সরানোর সময়, এটির রেফারেন্স পরিবর্তন হবে না।

Mobx প্রথমবারের মতো একজন নির্বাচক হিসেবে কাজ করে এবং শুধুমাত্র আমরা অ্যাক্সেস করেছি এমন পর্যবেক্ষণের ট্র্যাক রাখে। এটি প্রক্সি গেটারের মাধ্যমে করা হয়। তাই এখানে বিল্ট-ইন ফাংশন ব্যবহার করা হয়েছে toJS. এটি মূল ক্ষেত্রগুলির সাথে প্রতিস্থাপিত সমস্ত প্রক্সি সহ একটি নতুন বস্তু প্রদান করে। কার্যকর করার সময়, এটি বস্তুর সমস্ত ক্ষেত্র পড়ে - তাই গেটারগুলি ট্রিগার হয়।

পপআপ কনসোলে আমরা আবার কয়েকটি কী যোগ করব। এই সময় তারা স্থানীয় স্টোরেজ এও শেষ হয়েছে:

যখন ব্যাকগ্রাউন্ড পৃষ্ঠাটি পুনরায় লোড করা হয়, তথ্যটি জায়গায় থাকে।

এই বিন্দু পর্যন্ত সমস্ত অ্যাপ্লিকেশন কোড দেখা যাবে এখানে.

ব্যক্তিগত কীগুলির সুরক্ষিত সঞ্চয়স্থান

স্পষ্ট পাঠ্যে ব্যক্তিগত কীগুলি সংরক্ষণ করা অনিরাপদ: সবসময় একটি সম্ভাবনা থাকে যে আপনি হ্যাক হবেন, আপনার কম্পিউটারে অ্যাক্সেস পাবেন এবং আরও অনেক কিছু। অতএব, লোকাল স্টোরেজ-এ আমরা কীগুলি একটি পাসওয়ার্ড-এনক্রিপ্ট করা আকারে সংরক্ষণ করব।

বৃহত্তর নিরাপত্তার জন্য, আমরা অ্যাপ্লিকেশনটিতে একটি লক করা অবস্থা যোগ করব, যেখানে চাবিগুলিতে কোনও অ্যাক্সেস থাকবে না। সময়সীমার কারণে আমরা স্বয়ংক্রিয়ভাবে এক্সটেনশনটিকে লক করা অবস্থায় স্থানান্তর করব।

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-এ এখন স্টোরেজ শুরু করার জন্য একটি পদ্ধতি রয়েছে।

এনক্রিপশনের জন্য লেখা ক্রিপ্টো-জেএস ব্যবহার করে ইউটিলিটি:

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 নিজেই ব্লক হয়ে গেলে লক সেট করা হয়। আমরা স্থানীয় স্টোরেজে সংরক্ষণ করার জন্য নির্বাচককেও পরিবর্তন করব:

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 খুব সহজ: প্রয়োজনে স্বাক্ষর করার পরে আমরা কেবল বার্তাটির স্থিতি পরিবর্তন করি।

আমরা UI API-এ অনুমোদন এবং প্রত্যাখ্যান, পৃষ্ঠা API-এ newMessage রাখি:

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 স্টেট করুন এবং এপিআইতে একটি ফাংশন যোগ করুন যা এই অবস্থা পরিবর্তন করবে। এর যোগ করা যাক 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