DarkWatt

DarkWatt is a browser extension that helps you track the energy comsumption of your screen. It captures a down-scaled screenshot of the current tab (locally of course), computes the average luminance, and adds it with CPU usage statistics by the browser. The resulting data is persisted locally so you can find the sites that are the most battery-friendly.

Features

• Real-time measurement of page luminance (in nits).
• Cross-browser packaging (Chromium & Firefox Nightly).
• Core pixel maths implemented in Rust + WebAssembly.

Browser Support & Limitations

Firefox support is planned.

Installation

Prerequisites

• latest Chrome or Chromium Dev channel
• If you plan to build from source:
  • Rust ≥ 1.70
  • wasm-pack
  • A Bash-compatible shell (for build.sh)

1. Download a pre-built release (recommended)

Pre-built .zip packages are attached to every GitHub release.

1. Download the archive matching your browser.
2. Unzip it somewhere.
3. Open chrome://extensions.
4. Enable "Developer mode" and click "Load unpacked".
5. Select the extracted build/ directory.

2. Build from source

# Clone and build the project
$ git clone https://github.com/Luca1905/darkwatt.git
$ cd darkwatt
$ ./build.sh       # compiles the WASM crate and creates the extension bundles

The script outputs one ready-to-load directories:

• build/ – load this in Chromium based browsers.

Usage

1. Load the extension as described above.
2. Pin the DarkWatt icon to the toolbar.
3. Browse as usual; open the popup anytime to see live luminance and accumulated energy data for the current website.

Development

# Run Rust unit tests
$ cargo test -p wasm-mod

# Build only the WASM crate
$ wasm-pack build wasm_mod --dev --target web --out-dir ../extension/js/wasm --out-name wasm_mod

Press the reload button on chrome://extensions to pick up the changes.

Testing

cargo test -p wasm-mod

Project Structure

.
├── extension/          # WebExtension source (JS/HTML/CSS)
│   ├── js/             # background & popup scripts
│   └── assets/         # icons & images
├── wasm_mod/           # Rust crate compiled to WebAssembly
├── build.sh            # helper script to build and package the extension
└── media/              # project visuals (logo, screenshots)

License

DarkWatt is released under the MIT License – see the LICENSE file for full text.

Roadmap: from zero to a working DarkWatt demo

• git repo

• set up wasm and extension structure

• manifest

• working demo

• UI scaffhold

• Luminenance logic

• tests

• integrate into js, test using mock data

• screenshot current tab and draw to smaller canvas

• implement background service for handling luma data

  • create a dxdb in background
  • set up message connections to get and save luma data
  • implement savings logic
    • heuristic function for light mode page into dark mode page
    • heuristic function for detecting light e.g. dark mode page
      • cache seen sites, known parameter
      • render onChange
    • calculating energy saving from nits saved.
    • get display size for energy calculation

• store data in dxdb, expose to popup

  • use chrome storage instead
    • move data querying from storage directly to UI

• remove annoying errors on installation

  • error when on chrome://
  • exceeding MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND

• set up proper testing environment | example , karma

Popup:

• get data from background

• render data in UI

  • render most current data
  • render total tracked sites
  • render savings
  • listen to storage API changes | see here

• settings page for custom values

• analytics page

• enable sample on demand

• port background to web_sys using wasm

• firefox integration

• deploy

• fix assumptions (config)

  • assumed screen max brightness

DX:

• make messaging typesafe | example

BUGS:

• content script: youtube not detected as light
• popup: chart x-axis wrong, too much data
• ui: chart not loading new changes
• Error handling response: TypeError: Cannot destructure property 'data' of 'object null' as it is null.
• Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
• Permission error in devtools, chrome://, fix in tab utils file.