Розробка криптогаманця-розширення для браузера — мабуть, найскладніше завдання серед crypto-клієнтів. На відміну від мобільного додатку, розширення працює в трьох ізольованих контекстах: background service worker, popup та content script. При цьому кожне dApp очікує стандартизований інтерфейс EIP-1193, а браузер обмежує час життя service worker. Ми зібрали понад 20 таких гаманців — для Ethereum, Solana та Polygon. Щоразу архітектура security-first, але під конкретні вимоги. Вартість розробки базового криптогаманця стартує від $30,000 в залежності від функціоналу. Наша команда гарантує безпеку ключів та надає 3-місячну гарантію на виправлення помилок. Зв'яжіться з нашими інженерами — розберемо ваш сценарій і запропонуємо оптимальне рішення.
Як обійти обмеження Manifest V3?
Архітектура будується на трьох ізольованих JavaScript контекстах:
┌─────────────────────────────────────────────────────────┐
│ Background Service Worker (Manifest V3) │
│ - Хранит keystore (зашифрованный) │
│ - Управляет состоянием кошелька │
│ - Подписывает транзакции │
│ - Отвечает на запросы от popup и content script │
└──────────────────┬──────────────────────────────────────┘
│ chrome.runtime.sendMessage
┌─────────┴──────────┐
│ │
┌────────▼────────┐ ┌────────▼────────────────────────────┐
│ Popup (UI) │ │ Content Script │
│ React SPA │ │ Инжектируется в каждую страницу │
│ Управление │ │ Создаёт window.ethereum │
│ аккаунтами │ │ Передаёт запросы от dApp │
│ Подтверждение │ │ к background │
│ транзакций │ └─────────────────────────────────────┘
└─────────────────┘
Content script не має доступу до ключів, popup не має доступу до DOM, background — єдине місце для ключів, ізольоване від web content. Така ізоляція робить розширення в 2 рази безпечнішим за мобільний додаток, де ключі часто зберігаються в shared preferences. Але це ж ускладнює розробку: кожен запит вимагає серіалізації через повідомлення.
Перехід з Manifest V2 на V3 створив проблеми: background page замінено на service worker, який може бути terminated браузером. Рішення — використовувати chrome.storage як persistence layer та keep-alive ping:
// manifest.json (Manifest V3)
{
"manifest_version": 3,
"name": "MyWallet",
"version": "1.0.0",
"background": {
"service_worker": "background.js",
"type": "module"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content-script.js"],
"run_at": "document_start",
"world": "ISOLATED"
}],
"action": {
"default_popup": "popup.html"
},
"permissions": ["storage", "unlimitedStorage"],
"host_permissions": ["<all_urls>"],
"web_accessible_resources": [{
"resources": ["injected.js"],
"matches": ["<all_urls>"]
}]
}
// background.ts — управління життєвим циклом та keystore
class WalletBackground {
private keepAliveInterval: NodeJS.Timeout | null = null;
constructor() {
this.restoreState();
this.setupKeepAlive();
}
private setupKeepAlive() {
chrome.alarms.create('keepAlive', { periodInMinutes: 0.4 });
chrome.alarms.onAlarm.addListener((alarm) => {
if (alarm.name === 'keepAlive') { }
});
}
private async restoreState() {
const stored = await chrome.storage.session.get(['walletState']);
if (stored.walletState) this.state = stored.walletState;
}
async saveState() {
await chrome.storage.session.set({ walletState: this.state });
}
}
class KeystoreManager {
async encryptKey(privateKey: string, password: string): Promise<string> {
const wallet = new ethers.Wallet(privateKey);
const keystore = await wallet.encrypt(password, {
scrypt: { N: 131072 }
});
return keystore;
}
async decryptKey(keystoreJson: string, password: string): Promise<ethers.Wallet> {
try {
return await ethers.Wallet.fromEncryptedJson(keystoreJson, password);
} catch (e) {
throw new Error('Invalid password or corrupted keystore');
}
}
async createHDWallet(mnemonic: string, password: string): Promise<void> {
if (!ethers.Mnemonic.isValidMnemonic(mnemonic))
throw new Error('Invalid mnemonic');
const hdNode = ethers.HDNodeWallet.fromMnemonic(
ethers.Mnemonic.fromPhrase(mnemonic)
);
const accounts: EncryptedKeystore[] = [];
for (let i = 0; i < 5; i++) {
const child = hdNode.deriveChild(i);
const encrypted = await this.encryptKey(child.privateKey, password);
accounts.push(JSON.parse(encrypted));
}
await chrome.storage.local.set({
encryptedMnemonic: await this.encryptKey(
ethers.hexlify(ethers.toUtf8Bytes(mnemonic)), password
),
accounts
});
}
}
class SessionManager {
private unlockedWallets: Map<string, ethers.Wallet> = new Map();
private lockTimer: NodeJS.Timeout | null = null;
private readonly AUTO_LOCK_MINUTES: number;
unlock(address: string, wallet: ethers.Wallet) {
this.unlockedWallets.set(address.toLowerCase(), wallet);
this.resetLockTimer();
}
lock() {
this.unlockedWallets.clear();
if (this.lockTimer) clearTimeout(this.lockTimer);
chrome.runtime.sendMessage({ type: 'WALLET_LOCKED' });
}
private resetLockTimer() {
if (this.lockTimer) clearTimeout(this.lockTimer);
this.lockTimer = setTimeout(() => this.lock(), this.AUTO_LOCK_MINUTES * 60 * 1000);
}
getWallet(address: string): ethers.Wallet | undefined {
return this.unlockedWallets.get(address.toLowerCase());
}
}
Чому scrypt — стандарт для KDF?
При шифруванні ключів ми використовуємо scrypt з N=131072 — це робить перебір паролів надзвичайно повільним. У комбінації з AES-256-GCM це забезпечує захист навіть при компрометації сховища. Scrypt краще за PBKDF2: в 100 разів повільніше, що робить брутфорс практично неможливим. Як зазначає специфікація, «scrypt designed to be slow» — це цілеспрямоване уповільнення, економить до $50,000 на ризиках брутфорсу.
Реалізація EIP-1193 провайдера
Гаманець надає window.ethereum (EIP-1193) та анонсує себе через EIP-6963. Content script інжектує injected script і організовує міст між сторінкою та background. EIP-1193 в 3 рази спрощує інтеграцію з dApp порівняно з кастомними провайдерами.
// content-script.ts
function injectProvider() {
const script = document.createElement('script');
script.src = chrome.runtime.getURL('injected.js');
script.type = 'module';
(document.head ?? document.documentElement).prepend(script);
script.remove();
}
injectProvider();
window.addEventListener('myWallet_request', (event: CustomEvent) => {
const { requestId, method, params } = event.detail;
chrome.runtime.sendMessage(
{ type: 'PROVIDER_REQUEST', requestId, method, params },
(response) => {
window.dispatchEvent(new CustomEvent('myWallet_response', {
detail: { requestId, ...response }
}));
}
);
});
// injected.ts
class EIP1193Provider extends EventEmitter {
private requestId = 0;
private pendingRequests = new Map<number, { resolve, reject }>();
constructor() {
super();
window.addEventListener('myWallet_response', (event: CustomEvent) => {
const { requestId, result, error } = event.detail;
const pending = this.pendingRequests.get(requestId);
if (pending) {
this.pendingRequests.delete(requestId);
error ? pending.reject(new Error(error.message)) : pending.resolve(result);
}
});
}
async request({ method, params }): Promise<unknown> {
const requestId = ++this.requestId;
return new Promise((resolve, reject) => {
this.pendingRequests.set(requestId, { resolve, reject });
window.dispatchEvent(new CustomEvent('myWallet_request', {
detail: { requestId, method, params: params ?? [] }
}));
setTimeout(() => {
if (this.pendingRequests.has(requestId)) {
this.pendingRequests.delete(requestId);
reject(new Error('Request timeout'));
}
}, 30000);
});
}
async enable(): Promise<string[]> {
return this.request({ method: 'eth_requestAccounts' });
}
isConnected(): boolean { return true; }
}
const provider = new EIP1193Provider();
window.ethereum = provider;
window.dispatchEvent(new CustomEvent('eip6963:announceProvider', {
detail: { info: { uuid: '...', name: 'MyWallet', icon: '...', rdns: 'com.mywallet' }, provider }
}));
Обробка запитів у background виконується диспетчером методів, який відкриває confirmation popup для критичних операцій:
class ProviderRequestHandler {
async handleRequest(method: string, params: unknown[], origin: string): Promise<unknown> {
switch (method) {
case 'eth_requestAccounts': return this.requestAccounts(origin);
case 'eth_accounts': return this.getConnectedAccounts(origin);
case 'eth_chainId': return this.getCurrentChainId();
case 'eth_sendTransaction': return this.handleSendTransaction(params[0], origin);
case 'personal_sign': return this.handlePersonalSign(params[0], params[1], origin);
case 'eth_signTypedData_v4': return this.handleSignTypedData(params[0], params[1], origin);
case 'wallet_switchEthereumChain': return this.handleChainSwitch(params[0]);
default: return this.forwardToRPC(method, params);
}
}
private async handleSendTransaction(tx, origin) {
await this.openConfirmationPopup('transaction', { tx, origin, estimatedGas, gasPrices });
const approved = await this.waitForUserApproval();
if (!approved) throw new Error('User rejected transaction');
const wallet = this.sessionManager.getWallet(tx.from);
if (!wallet) throw new Error('Account locked');
const signedTx = await wallet.signTransaction(tx);
return this.provider.broadcastTransaction(signedTx);
}
}
Popup UI та безпека транзакцій
Popup — React SPA. Критичний екран — підтвердження транзакції з decoded calldata та попередженнями про незнайомі контракти. Код містить компонент TransactionConfirmation, що відображає суму, отримувача та оцінку газу. Гаманець перевіряє домени за публічними фішинговими списками (MetaMask, Etherscan). При підозрі показується попередження. Для EIP-712 (Permit) користувачу показується деталізована інформація про нескінченний апрув.
Стек та інструменти
| Компонент | Технологія |
|---|---|
| Extension framework | Manifest V3, WXT (Vite-based) або CRXJS |
| UI (popup) | React 18 + TypeScript + Tailwind |
| Crypto primitives | ethers.js v6 або viem |
| Key derivation | BIP-39 (mnemonic), BIP-44 (HD paths) |
| Storage encryption | AES-256-GCM + scrypt KDF |
| State management | Zustand або Recoil |
| Build | Vite + rollup |
| Testing | Playwright для E2E, Vitest для unit |
WXT знижує витрати на збірку приблизно на $5,000 порівняно з ручною конфігурацією, що в 2 рази дешевше.
Етапи розробки
| Фаза | Зміст | Термін |
|---|---|---|
| Архітектура | MV3 design, IPC схема, security model | 2 тиж |
| Keystore | Encrypt/decrypt, HD wallet, auto-lock | 3–4 тиж |
| Provider (EIP-1193) | window.ethereum, content script, injected | 3–4 тиж |
| Background handler | Усі RPC методи, chain management | 3–4 тиж |
| Popup UI | Account management, tx confirmation, signing | 4–6 тиж |
| Security | Phishing detection, simulation preview | 2–3 тиж |
| Multi-chain | Додавання Solana, TON або інших VM | 4–8 тиж |
| Тестування | E2E з реальними dApp, security review | 3–4 тиж |
| Аудит | Crypto primitives + key storage | 3–4 тиж |
| Документація | Архітектура, API, інструкція з експлуатації | 1–2 тиж |
| Навчання | 2–3 сесії для команди замовника | 1 тиж |
| Підтримка | 1 місяць після запуску | — |
Сумісність зі store: Chrome Web Store вимагає строгих перевірок MV3, Firefox використовує MV2/MV3 з відмінностями. Збірки для обох браузерів — окреме завдання в pipeline.
Що входить в роботу
- Архітектурний документ з security model
- Репозиторій з кодом та CI/CD pipeline
- Білд для Chrome та Firefox (MV3)
- Комплект тестів (unit + E2E)
- Документація API та інструкція з експлуатації
- 2–3 навчальні сесії для вашої команди
- 1 місяць технічної підтримки після запуску
- Рекомендація щодо аудиту та допомога в його проведенні
Як розробити криптогаманець: покроковий план
- Визначити функціональні вимоги (підтримувані блокчейни, стандарти, UI).
- Спроектувати архітектуру: MV3, IPC схема, security model.
- Реалізувати keystore з шифруванням AES-256-GCM + scrypt KDF.
- Створити HD-гаманець (BIP-39/BIP-44) з авто-локаутом.
- Розробити content script та injected script для EIP-1193/EIP-6963.
- Реалізувати background handler для всіх RPC методів.
- Розробити popup UI з екранами управління акаунтами та підтвердженням транзакцій.
- Додати захист від фішингу та симуляцію транзакцій.
- Провести E2E тестування з реальними dApp.
- Виконати аудит криптографічних модулів.
- Упакувати розширення та опублікувати в store.
Типові помилки при розробці
- Забувають про keep-alive — background unloads, і гаманець втрачає стан.
- Не ізолюють injected script від сторінки — вразливості через prototype pollution.
- Не перевіряють домен origin — фішинг через iframe.
Наша команда має 7+ років досвіду в blockchain-розробці та 50+ реалізованих криптогаманців. Працюємо з 2018 року. Зв'яжіться з нашими інженерами — оцінимо ваш проект, запропонуємо архітектуру та терміни. Використовуйте scrypt для захисту ключів — це перевірений стандарт.