🌐 Webmeister#

Browser automation and development tools for Aesthetic Computer subsites.

Structure#

webmeister/
├── lib/                    # Shared utilities
│   ├── external-chrome.mjs # Chrome on host machine via SSH + CDP
│   └── web.mjs            # VS Code Simple Browser CDP wrapper
├── sites/                  # Site-specific dev tools
│   └── kidlisp.com/
│       └── dev.mjs        # KidLisp.com development server
└── *.mjs                  # General utilities

External Chrome Development#

For testing with browser extensions (Temple wallet, etc.), use external Chrome:

Setup (One-time)#

1. Create a Chrome profile called "AestheticDev" with your extensions:

   • Temple Wallet
   • Any other dev tools

2. The profile will be used automatically when starting Chrome via webmeister.

Usage#

# Open kidlisp.com in external Chrome and watch console
node webmeister/sites/kidlisp.com/dev.mjs watch

# Just open the page
node webmeister/sites/kidlisp.com/dev.mjs open

# Reload the page
node webmeister/sites/kidlisp.com/dev.mjs reload

# Check wallet state
node webmeister/sites/kidlisp.com/dev.mjs wallet

# Evaluate JS
node webmeister/sites/kidlisp.com/dev.mjs eval "window.beacon"

How it works#

1. SSH into the Mac host (jas@host.docker.internal)
2. Start Chrome with --remote-debugging-port=9222 and the AestheticDev profile
3. Connect via CDP WebSocket through the SSH tunnel
4. Control and monitor the page

VS Code Simple Browser#

For quick testing without extensions, use VS Code's Simple Browser:

# Watch VS Code Simple Browser CDP
node webmeister/kidlisp-dev.mjs

Adding New Sites#

Create a new directory under sites/ with a dev.mjs:

mkdir -p webmeister/sites/my-site.com
# Copy and modify from kidlisp.com/dev.mjs

Machine Configuration#

SSH host is read from aesthetic-computer-vault/machines.json:

• jeffrey-macbook: jas@host.docker.internal
• mac-mini: jas@192.168.12.27