Lightning Web Extension

STATUS: experimental

A general browser extension to bring the Bitcoin Lightning network to the browser

The extension provides deep Lighting Network integration for websites (for payments and authentication flows).

The goal is to write a minimal web extension to allow browsers to interact with the Lightning Network.

The extension implements the WebLN standard as the interface that allows websites to connect to Lightning Network nodes (to request payments, invoices, signatures, login, etc.)

The extension can connect to different node implementation and supports custodial and non-custodial setups. E.g.:

• Remote LND
• Local native companion apps (e.g. zaphq or native wallet apps)
• LNBits
• LNDHub
• ...

Architecture idea

General Ideas

• Focus on the web-payment process, no channel-management or similar
• Support to connect multiple wallets (LND, C-Lightning, local wallet UIs (e.g. Zap), custodial (e.g. lnbits), native embedded wallet)
• LNURL-pay support
• LNURL-auth support
• Lsat support

Browser Support

49 & later ✔	52 & later ✔	36 & later ✔	79 & later ✔	Latest ✔	Latest ✔	Latest ✔

Project Structure

./lightning-browser-extension
├── src                     # Source Code
│   ├── app                     # React UI App
│   ├── extension               # Browser Extension
│   ├── common                  # Helpers and utilities used by both the React App and the Browser Extension
├── static                  # Static Resources
│   ├── assets                  # Images, logos, etc
│   └── views                   # Static HTML files
├── doc                     # Documentation (guidelines, architecture docs, etc)
├── dist                    # Build
│   └── development             # Developer Builds (not to be shared)
│   └── production              # Production Builds
└

🚀 Quick Start

Ensure you have

• Node.js 10 or later installed
• Yarn v1 or v2 installed

Then run the following:

• yarn install to install dependencies.
• yarn run dev:chrome to start the development server for chrome extension
• yarn run dev:firefox to start the development server for firefox addon
• yarn run dev:opera to start the development server for opera extension
• yarn run build:chrome to build chrome extension
• yarn run build:firefox to build firefox addon
• yarn run build:opera to build opera extension
• yarn run build builds and packs extensions all at once to extension/ directory

Development

• yarn install to install dependencies

• To watch file changes in development

  • Chrome
    • yarn run dev:chrome
  • Firefox
    • yarn run dev:firefox
  • Opera
    • yarn run dev:opera

• Load extension in browser

• Chrome

  • Go to the browser address bar and type chrome://extensions
  • Check the Developer Mode button to enable it.
  • Click on the Load Unpacked Extension… button.
  • Select your extension’s extracted directory.

• Firefox

  • Load the Add-on via about:debugging => This Firefox as temporary Add-on. (about:debugging#/runtime/this-firfox)
  • Choose the manifest.json file in the extracted directory
  • debugging details
  • To see the debug console click "inspect" on the list of temporary extensions (about:debugging#/runtime/this-firefox)

• Opera

  • Load the extension via opera:extensions
  • Check the Developer Mode and load as unpacked from extension’s extracted directory.

** Use the development LND account**

To connect to a remote development LND node you can use a test account Configure BOB in the extension and pay ALICE on https://regtest-alice.herokuapp.com/

Production

• yarn run build builds the extension for all the browsers to extension/BROWSER directory respectively.

Note: By default the manifest.json is set with version 0.0.0. The webpack loader will update the version in the build with that of the package.json version. In order to release a new version, update version in package.json and run script.

If you don't want to use package.json version, you can disable the option here.

Native Companions

For native connections the extension passes each call to a native application (using native messaging). The native application does all the user interaction and connections to the lightning wallet.

Currently there is one prototype of a native companion app which can connect to LND: lnd-native-companion

FAQs

Why not use Joule?

Joule is a full interface to manage a LND node. It only supports one LND account.
Our goal is NOT to write a full UI for a Lightning Network node with all the channel management features, but instead to only focus on what is necessary for the web (for payment and authentication flows). We believe there are already way better management UIs. Also we focus on supporting multipe different node backends (non-custodial and custodial).

Thanks

Based on the web extension starter kit: /abhijithvijayan/web-extension-starter
heaviy inspired by the amazon work of the Joule extension

License

MIT