Lightning Web Extension

STATUS: alpha

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

The extension provides deep Lightning 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. It focusses on the web-payments process and does not try to be a full node UI with advanced channel-management or similar features.

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 implementations and supports custodial and non-custodial setups.

Some Features

• Custom budgets/allowances for websites to allow payment streams/auto-payments
• Multiple accounts and support for different node backends (lnd, etc.)
• WebLN getInfo, sendPayment, makeInvoice support
• LNURL-pay support
• LNURL-auth support
• Payment history with additional website metadata
• LNURL-withdraw support
• WebLN signMessage, verifyMessage support
• Lsat support

Join the conversation

We have a channel on the bitcoin.design Slack community. Come and join us! #lightning-browser-extension

Download Nightly releases

• Firefox Nightly
• Chrome Nightly - Go to chrome://extensions/, enable "Developer mode" (top right) and drag& drop the file

(Note: You might need to reconfigure your wallet after installing new versions)

Browser Support

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

Architecture idea

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
heavily inspired by the super amazing work of the Joule extension

License

MIT