npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

webblackbox

v0.2.0

Published

Browser-side lite capture SDK for recording, exporting, and embedding WebBlackbox sessions.

Readme


The browser-side lite capture SDK for WebBlackbox. Embed session recording directly in your web application — no Chrome extension required. Captures user interactions, console logs, network requests, DOM mutations, storage operations, screenshots, and more, then exports portable .webblackbox archives compatible with the full WebBlackbox Player.

Installation

npm install webblackbox

Quick Start

import { WebBlackboxLiteSdk } from "webblackbox/lite-sdk";

const sdk = new WebBlackboxLiteSdk({
  showIndicator: true,
  storage: "memory"
});

await sdk.start();

// ... user interacts with the page ...

const exported = await sdk.export({ stopCapture: true });
sdk.downloadArchive(exported);
await sdk.dispose();

What's Included

| Export | Description | | --------------------------------- | ----------------------------------------------------------------------------------------- | | WebBlackboxLiteSdk | Main SDK class — start/stop/flush/export .webblackbox archives in-page | | LiteCaptureAgent | Reusable capture agent for input, DOM/storage snapshots, screenshots, and injected bridge | | installInjectedLiteCaptureHooks | Runtime hooks for console/network/storage/error interception | | materializeLiteRawEvent | Shared lite raw-event materialization pipeline |

Entry Points

import { WebBlackboxLiteSdk } from "webblackbox/lite-sdk";
import { LiteCaptureAgent } from "webblackbox/lite-capture-agent";
import { installInjectedLiteCaptureHooks } from "webblackbox/injected-hooks";
import { materializeLiteRawEvent } from "webblackbox/lite-materializer";

Optional IndexedDB Cache Encryption

When using storage: "indexeddb", you can provide pipelineStorageEncryptionKey to encrypt cached chunk/blob payload bytes at rest.

import { derivePipelineStorageKey } from "@webblackbox/pipeline";
import { WebBlackboxLiteSdk } from "webblackbox/lite-sdk";

const derived = await derivePipelineStorageKey("cache-passphrase");

const sdk = new WebBlackboxLiteSdk({
  storage: "indexeddb",
  pipelineStorageEncryptionKey: derived.key
});

Persist derived.salt + derived.iterations using your own key-management policy if you need to reopen the same encrypted cache.

Default Safety Tuning

WebBlackboxLiteSdk applies lite-focused runtime defaults to reduce long-session freezes and archive bloat:

| Setting | Default | Why | | ------------------------ | ------- | --------------------------------------------------- | | freezeOnError | true | Capture uncaught JS exceptions/rejections | | freezeOnNetworkFailure | false | Avoid noisy freezes from transient network issues | | freezeOnLongTaskSpike | false | Avoid freezes from expected long tasks | | mousemoveHz | 14 | Lower frequency than full mode (20 Hz) | | scrollHz | 10 | Lower frequency than full mode (15 Hz) | | domFlushMs | 160 | Longer flush interval than full mode (100 ms) | | bodyCaptureMaxBytes | 0 | Disabled — keeps lite sessions page-thread friendly |

Override any of these through options.config.

Export Policy Defaults

| Setting | Default | | -------------------- | ---------- | | includeScreenshots | true | | maxArchiveBytes | 100 MB | | recentWindowMs | 20 minutes |

Extension Reuse

The Chrome extension (apps/extension) reuses this package in lite capture mode:

  • Content scriptwebblackbox/lite-capture-agent
  • Injected scriptwebblackbox/injected-hooks

This keeps capture logic centralized and shared across the SDK and extension lite mode.

Testing

# Unit & integration tests
pnpm --filter webblackbox test

# End-to-end full-chain verification (extension → export → player)
pnpm --filter @webblackbox/extension e2e:fullchain:lite
pnpm --filter @webblackbox/extension e2e:fullchain:lite:reload
pnpm --filter @webblackbox/extension e2e:fullchain:full

License

MIT