Bookmarklet UI Library - Demo & Testing

🎯 Features

Shadow DOM isolation - no CSS conflicts with host page
Modern, minimal design with smooth animations
Draggable windows with title bars
Non-blocking notifications with auto-dismiss
Custom styled dialogs (alert, confirm, prompt)
Color picker component with clipboard integration
Promise-based API for async operations
All CSS embedded - single file, zero dependencies
Lightweight and optimized for bookmarklets

💬 Dialogs

Replace browser's native alert(), confirm(), and prompt() with beautiful custom dialogs.

                // Alert

                await BookmarkletUI.alert('This is a custom alert!', 'Alert Title');

                // Confirm

                const result = await BookmarkletUI.confirm('Are you sure?', 'Confirm');

                // Prompt

                const input = await BookmarkletUI.prompt('Enter your name:', 'John Doe');

🪟 Windows

Create draggable windows with custom content. Perfect for displaying information or complex UIs.

                const win = new BookmarkletUI.Window({

                  title: 'My Window',

                  content: '<p>Window content</p>',

                  width: '400px',

                  draggable: true

                });

                win.appendTo(document.body);

🔔 Notifications

Non-blocking toast notifications that auto-dismiss. Perfect for status messages.

BookmarkletUI.Utils.notify('Operation successful!', 'success', 3000);

🎨 Color Picker

Interactive color picker with copy-to-clipboard functionality.

                const picker = new BookmarkletUI.ColorPicker({

                  title: 'Choose Color',

                  defaultColor: '#667eea',

                  showCopyButton: true,

                  onSelect: (color) => console.log('Selected:', color)

                });

                picker.appendTo(document.body);

🔧 Utilities

Helper functions for common tasks.

                // Copy text

                BookmarkletUI.Utils.copyToClipboard('Hello World');

                // Show info grid

                BookmarkletUI.Utils.showInfo('Page Info', {

                  'Title': document.title,

                  'URL': location.href

                });

📋 Integration Example

Example of how to integrate into a bookmarklet:

                javascript:(function() {

                  try {

                    // Embed the BookmarkletUI library code here

                    const BookmarkletUI = (function() { /* ... library code ... */ })();

                    // Use it in your bookmarklet

                    (async () => {

                      const name = await BookmarkletUI.prompt('Enter your name:');

                      if (name) {

                        await BookmarkletUI.alert(`Hello, ${name}!`);

                      }

                    })();

                  } catch (err) {

                    console.error('Bookmarklet error:', err);

                  }

                })();