/lightning-browser-extension

A Bitcoin Lightning Browser extension that connects to different wallet interfaces and brings deep lightning integration to the web

Primary LanguageTypeScriptMIT LicenseMIT

Lightning Web Extension

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 programmatically. 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.) and enable seamless UX of web payments and authentications.

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.)
  • Full WebLN send and receive payment flows (getInfo, sendPayment, fixed makeInvoice support)
  • LNURL-pay support
  • LNURL-auth support
  • Payment history with additional website metadata
  • LNURL-withdraw support
  • WebLN signMessage, verifyMessage support
  • WebLN dynamic makeInvoice support
  • Lsat support

STATUS: 🚀

Join the conversation

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

We also do a weekly call on Monday at 14:00 UTC - (15:00 CET/CAT - 10:00 EDT) on Jitsi

Browser Support

Alby supports

Installation

Add Alby to your Browser

Try out the most recent version of Alby (Nightly Releases)

  • Firefox Nightly - best install it as temporary add-on as discussed in the "Load extension into browser" section
  • 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)

Architecture idea

architecture

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 14 or later installed
  • Yarn v1 or v2 installed

Suppported but not required

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 the dist/production directory
  • yarn run package build the production packages in the dist/production 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 into 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 the extension’s dist directory: dist/development/chrome
    • To see the debug console check the inspect views in the extension details

  • Firefox

    • Load the Add-on via about:debugging => This Firefox as temporary Add-on. (about:debugging#/runtime/this-firefox)
    • Choose a .xpi file or the manifest.json file in the extension's dist directory: dist/development/firefox
    • 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.

To connect to a remote development LND node you can use a test account

Debugging

Most logs are written to the background script. Make sure to "inspect" the background script to see the console. Help for Chrome, Firefox

⌨️ Production package files

  • yarn run package builds the extension for all the browsers to dist/production directory respectively.

You can also use a Docker container and run the yarn commands within a container:

docker run --rm --volume="$(pwd):/app" --workdir="/app" -t -i node:lts "yarn install && yarn run package"

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.

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

⭐ Contributing

We welcome and appreciate new contributions.

We use the Development Project Board to plan the next ToDos. Best choose something from the ToDo Column. (If there is nothing for you, feel free to pick something from the backlog)

If you're a developer looking to help but not sure where to begin, check out the issues that have specifically been marked as being friendly to new contributors here.

Alby enforces Conventional Commits specification for adding human and machine readable meaning to commit messages, make sure to read and follow them.

If you're looking for a bigger challenge, before opening a pull request please create an issue or join our community chat to get feedback, discuss the best way to tackle the challenge, and to ensure that there's no duplication of work.

❔ 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).

What is WebLN?

WebLN is a library and set of specifications for lightning apps and client providers to facilitate communication between apps and users' lightning nodes in a secure way. It provides a programmatic, permissioned interface for letting applications ask users to send payments, generate invoices to receive payments, and much more. This documentation covers how to use WebLN in your Lightning-driven applications.

Is there a bounty program and can I contribute?

Yes. Thanks to generous donors, Alby is able to offer several bounties. You can find them on our Wiki page. If you want to support Alby's bounty program, please donate here. We would appreciate your contribution a lot! 🙏

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