TAAL Wallet Chrome extension

Table of Contents

• Intro
• Features
• Installation
  • Procedures
• Screenshots
  • NewTab
  • Popup
• Documents

Intro

This TAAL Wallet Chrome extensions using React and Typescript.

Features

• React 18
• Redux Toolkit
• BSV Javascript library
• TypeScript
• Webpack
• ESLint
• Prettier
• Chrome Extension Manifest Version 3

Installation

Procedures

1. Clone this repository.
2. Run yarn (check your node version >= 16)
3. Run yarn dev
4. Load Extension on Chrome
   1. Open - Chrome browser
   2. Access - chrome://extensions
   3. Check - Developer mode
   4. Find - Load unpacked extension
   5. Select - dist folder in this project (after dev or build)
5. If you want to build in production, Just run yarn build
6. To start a demo web client run yarn demo
7. To enable push messages run yarn server

Optional

1. Copy sample.env to .env and customize it by your needs

Screenshots

New Tab

Popup

Documents

• ChromeExtension

---

Communication

Long lived connection

On background.js

chrome.runtime.onConnectExternal.addListener(port => {
  console.log('Client connected', port);
  port.onMessage.addListener(msg => {
    console.log('onExternalMessage', msg);
  });
});

On web page

const port = chrome.runtime.connect(extensionId, { name: 'some-name' });
port.onMessage.addListener(console.log);
port.postMessage({ payload: 'anything' })

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

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

On web page

chrome.runtime.sendMessage(extensionId, { payload: 'anything' }, console.log)

On content script

chrome.runtime.sendMessage({ payload: 'anything' }, console.log);