FreePages - Blockchain HTML Renderer

A Firefox/Chrome extension that connects to Polkadot networks using Smoldot light client and renders HTML pages stored in system.remark extrinsics.

Features

• Uses Smoldot light client to connect to Polkadot, Paseo, and Westend networks
• Renders HTML content from blockchain remark calls
• No centralized backend required
• Works with both Firefox and Chrome

Building

Install dependencies:

npm install

Build for Firefox:

npm run build:firefox

Build for Chrome:

npm run build:chrome

The built extension will be in the ./dist directory.

Loading the Extension

Firefox

1. Open Firefox and navigate to about:debugging#/runtime/this-firefox
2. Click "Load Temporary Add-on"
3. Navigate to the dist directory and select manifest.json

Chrome

1. Open Chrome and navigate to chrome://extensions/
2. Enable "Developer mode" in the top right
3. Click "Load unpacked"
4. Select the dist directory

Usage

Once installed, you can view HTML content from blockchain remarks by navigating to:

chrome-extension://<extension-id>/viewer.html#/<chain>/<block>/<extrinsicIndex>

Or for Firefox:

moz-extension://<extension-id>/viewer.html#/<chain>/<block>/<extrinsicIndex>

URL Format

#/<chain>/<blockNumberOrHash>/<extrinsicIndex>

• chain: polkadot, paseo, westend, westend-asset-hub, or any custom chain name you've added
• blockNumberOrHash: Block number (e.g., 9898203) or block hash (e.g., 0x123...)
• extrinsicIndex: Index of the extrinsic in the block (e.g., 3)

Using a Local/Custom Chain

You have two options for connecting to a local node:

Option 1: Direct WebSocket Connection (Recommended for Local Development)

Connect directly to your local node via WebSocket URL:

1. Upload HTML to your local node:

   node cli.mjs -w ws://localhost:8000 -f example.html

2. View it in the extension using the WebSocket URL format:

   viewer.html#/ws://localhost:8000/<block>/<extrinsic-index>
   

   Example: viewer.html#/ws://localhost:8000/123/2

This connects directly to your local node and doesn't require a chain spec file.

Option 2: Light Client with Chain Spec

Use Smoldot light client with a custom chain spec:

1. Fetch the chain spec from your node:

   node cli.mjs fetch-spec -w ws://localhost:9944 -n local

2. This saves the chain spec to chains/local.json

3. Rebuild the extension:

   npm run build:firefox  # or build:chrome

4. Reload the extension in your browser

5. Use it in the viewer:

   viewer.html#/local/<block>/<extrinsic-index>
   

Note: This option requires the node to support the sync_state_genSyncSpec RPC method.

Example

viewer.html#/westend/9898203/3

This will:

1. Connect to the Westend network via Smoldot
2. Fetch block 9898203
3. Extract extrinsic at index 3
4. Decode the remark data as HTML
5. Render it in an iframe

Protocol Handler (Firefox)

Firefox supports protocol handlers. You can use URLs like:

web+polkadot://<chain>/<block>/<extrinsicIndex>

This will automatically open the viewer in the extension.

Architecture

• viewer.ts/viewer.html: Main UI that connects to blockchain and renders HTML
• bg.ts: Firefox background script running Smoldot light client
• sw.ts: Chrome service worker running Smoldot light client
• chains/: Contains chain specifications for Polkadot, Paseo, and Westend

Security

The viewer renders HTML in a sandboxed iframe with restricted CSP to prevent malicious code execution.

Development

Watch mode for development:

npm run dev

This will rebuild on file changes. You'll need to reload the extension in your browser after changes.