Architecture

List of tech stack used

TAAL Wallet Chrome extension is built using React and Typescript.
Features
​React 18​
​Redux Toolkit​
​BSV Javascript library​
​TypeScript​
​Webpack​
​ESLint​
​Prettier​
​Chrome Extension Manifest Version 3​
Chrome Extension Documentation
​ChromeExtension​
Communication
Long lived connection
In background.js
chrome.runtime.onConnectExternal.addListener(port => {
 console.log('Client connected', port);
 port.onMessage.addListener(msg => {
 console.log('onExternalMessage', msg);
 });
});
In web page
const port = chrome.runtime.connect(extensionId, { name: 'some-name' });
port.onMessage.addListener(console.log);
port.postMessage({ payload: 'anything' })
In content script
const port = chrome.runtime.connect({ name: 'some-name' });
port.postMessage({ payload: 'anything' });
port.onMessage.addListener(msg => {
 console.log('onMessage', msg);
});
One time communication (web -> background.js)
In background.js
chrome.runtime.onMessageExternal.addListener((payload, data, cb) => {
 console.log('onMessageExternal', { payload, data });
 if (typeof cb === 'function') {
 cb('response from background.js');
 }
 return true;
});
In web page
chrome.runtime.sendMessage(extensionId, { payload: 'anything' }, console.log)
In content script
chrome.runtime.sendMessage({ payload: 'anything' }, console.log);

Introduction

Terminology

Last modified 8mo ago