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