Zero-install DevBar via bookmarklet + CDN

[ytspar]

Summary

Enable DevBar to be injected into any web page without code changes, using a bookmarklet that loads DevBar from a CDN.

Motivation

Currently, DevBar requires adding code to your application:

import { initGlobalDevBar } from '@ytspar/devbar';
initGlobalDevBar();

For quick debugging sessions or testing on sites you don't control, a bookmarklet approach would be much faster.

Proposed Solution

1. CDN-hosted DevBar bundle

• Publish a standalone UMD/IIFE bundle to CDN (unpkg, jsdelivr)
• Bundle includes all DevBar functionality
• URL: https://unpkg.com/@ytspar/devbar/dist/devbar.global.js

2. Bookmarklet

A bookmarklet that users can add to their browser bookmarks bar:

javascript:(function(){
  var s=document.createElement('script');
  s.src='https://unpkg.com/@ytspar/devbar/dist/devbar.global.js';
  s.onload=function(){window.initGlobalDevBar()};
  document.body.appendChild(s);
})()

3. Zero-install Sweetlink server

npx @ytspar/sweetlink
# Starts WebSocket server on port 9223 (or auto-detected port)

User Flow

1. Start server: npx @ytspar/sweetlink (in terminal)
2. Click bookmarklet: DevBar appears in browser
3. Use tools: Screenshots, DOM queries, console logs, etc.

Degraded Mode (no server)

When Sweetlink server isn't running:

• ✅ Screenshot to clipboard (still works)
• ✅ Outline view (local only)
• ✅ Schema extraction (local only)
• ❌ Screenshot to file (requires server)
• ❌ Console log capture (requires server)
• ❌ CLI commands (requires server)

Implementation Tasks

• Create IIFE/UMD build target for DevBar
• Configure build to output dist/devbar.global.js
• Add CDN documentation to README
• Create bookmarklet generator page (optional)
• Ensure npx @ytspar/sweetlink works standalone
• Add graceful degradation messaging in DevBar

Related

• Vite plugin: sweetlink() - zero-config for Vite apps
• Auto-start: import '@ytspar/sweetlink/auto' - zero-config for Node apps
• This feature completes the "zero-config" story for any website

---

Labels: enhancement, good first issue