# Architecture

TAAL Wallet Chrome extension is built using React and Typescript.

## **Features**

* [React 18](https://reactjs.org/)
* [Redux Toolkit](https://redux-toolkit.js.org/)
* [BSV Javascript library](https://github.com/moneybutton/bsv)
* [TypeScript](https://www.typescriptlang.org/)
* [Webpack](https://webpack.js.org/)
* [ESLint](https://eslint.org/)
* [Prettier](https://prettier.io/)
* [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)

## Chrome Extension Documentation

* [ChromeExtension](https://developer.chrome.com/docs/extensions/mv3/)

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