Kibisis Web Extension

The wallet for your lifestyle.

This is the Kibisis web extension built in React, TypeScript and Webpack.

---

Table of contents

• 1. Overview
• 2. Usage
• 2. Development
  • 3.1. Requirements
  • 3.2. Setup
  • 3.3. Install local browsers
    • 3.3.1. Chrome
    • 3.3.2. Firefox
  • 3.4. Run
• 4. Appendix
  • 4.1. Useful commands
  • 4.2. Demo application
  • 4.3. Manifest permissions
• 5. How to contribute
• 6. License

🔭 1. Overview

1.1. Terminology

• Client: These are all external resources to the provider, except the middleware. These include webpages and other extensions.
• Middleware: Also known as content scripts. These resources automatically injected into the webpage and have limited access to both the web extension APIs and the webpage's DOM.
• Provider: This is the web extension and includes both the extension's service workers and pages/pop-ups. These have full access to the web extension APIs and communicate to clients via the middleware.

🪄 2. Usage

Refer to the documentation for information on how to use Kibisis.

^{Back to top ^}

🛠 3. Development

3.1. Requirements

• Install Node v20.9.0+
• Install pnpm v10.3.0+
• Install jq (optional - if you are installing the local Chrome browser)

^{Back to top ^}

3.2. Setup

1. Install the dependencies:

$ pnpm install

⚠️ NOTE: a post install script will run that creates a .env file.

2. In the newly created .env file, replace the environment values with the desired values.

^{Back to top ^}

3.3. Install local browsers (optional)

If you are want to run a standalone browser for development, you can install developer versions of Chrome and Firefox. If these are installed, these will be used as the installation of the temporary extensions that are built in step 3.4.

⚠️ NOTE: the following commands can be run again to re-download and install the latest version. Your saved profile and extension settings will not be affected as they are stored in a separate directory in .<chrome|firefox>_profile/.

^{Back to top ^}

3.3.1. Chrome

1. Simply run:

pnpm install:chrome

️ NOTE: the binary will be installed to .chrome/.

^{Back to top ^}

3.3.2. Firefox

1. Simply run:

pnpm install:firefox

⚠️ NOTE: the binary will be installed to .firefox/.

^{Back to top ^}

3.4. Run

• To run simply use:

$ pnpm start:<chrome|firefox>

⚠️ NOTE: this command will bundle the TypeScript source code and extension assets into the .<chrome|firefox>_build/ directory and depending on your intended target (you can choose 'chrome' or 'firefox') the corresponding browser will start up with the unpacked extension as a temporary extension.

^{Back to top ^}

📑 4. Appendix

4.1. Useful commands

Command	Description
pnpm build:chrome	Bundles the source code and Chrome specific assets into the .chrome_build/ directory.
pnpm build:edge	Bundles the source code and Microsoft Edge specific assets into the .edge_build/ directory.
pnpm build:firefox	Bundles the source code and Firefox specific assets into the .firefox_build/ directory.
pnpm build:opera	Bundles the source code and Firefox specific assets into the .opera_build/ directory.
pnpm install:chrome	Installs/updates the latest version of Chrome For Testing browser to the project root. This removes the existing version if it exists.
pnpm install:firefox	Installs/updates the latest version of Firefox Developer Edition browser to the project root. This removes the existing version if it exists.
pnpm package:chrome	Packages the contents of the .chrome_build/ directory into a kibisis-chrome-{version}.zip file, ready for submission.
pnpm package:edge	Packages the contents of the .edge_build/ directory into a kibisis-edge-{version}.zip file, ready for submission.
pnpm package:firefox	Packages the contents of the .firefox_build/ directory into a kibisis-firefox-{version}.zip file, ready for submission.
pnpm package:opera	Packages the contents of the .opera_build/ directory into a kibisis-opera-{version}.zip file, ready for submission.
pnpm prettier	Runs prettier with the same configuration that is run on the pre-commit hooks.
pnpm start:chrome	Bundles the source code & the add-on assets, starts the local Chrome For Testing Developer edition with the add-on installed. This will watch for changes in the source code and reload the extension.
pnpm start:edge	Bundles the source code & the add-on assets. This will watch for changes in the source code and reload the extension.
pnpm start:firefox	Bundles the source code & the add-on assets, starts the local Firefox Developer edition with the add-on installed. This will watch for changes in the source code and reload the extension.
pnpm start:opera	Bundles the source code & the add-on assets. This will watch for changes in the source code and reload the extension.
pnpm start:dapp-example	Starts the example dApp at http://localhost:8080
pnpm test	Runs unit tests.
pnpm test:coverage	Runs unit tests with coverage.

^{Back to top ^}

4.2. Demo application

You can test Kibisis' features by going to https://kibis-is.github.io/web-extension.

^{Back to top ^}

4.3. Manifest permissions

Value	Version	Justification
<all_urls>	2	When the extension attempts to scan the QR code of a WalletConnect dapp, the tabs.captureVisibleTab() function is used.
activeTab	3	As above, the extension requires access to the tabs.captureVisibleTab().
alarms	3	A user can switch on a password lock. This feature utilizes the Alarms API as a timeout to lock the extension behind a password.
storage	2 and 3	The storage API is used to maintain the state of the extension. It saves encrypted private keys, settings and the lists of AVM assets.
unlimitedStorage	2 and 3	As an n number of accounts/private keys are saved to storage, users that have a lot of accounts will most likely exceed the storage limit.

^{Back to top ^}

👏 5. How to contribute

Please read the contributing guide to learn about the development process.

^{Back to top ^}

📄 6. License

Please refer to the COPYING file.

^{Back to top ^}