Thanks to visit codestin.com
Credit goes to github.com

Skip to content

theabbie/ChaosTab

Repository files navigation

Chaos Tab

Chaos Tab Screenshot

Transform your new tab into a mesmerizing double pendulum physics simulation with powerful productivity tools. Watch chaos theory unfold in real-time while managing your notes, tasks, bookmarks, custom widgets, and image gallery—all in one beautiful interface.

Features

Visual Experience

  • 🕐 Elegant Clock Display - Beautiful 12-hour clock with AM/PM in Orbitron font
  • 🌟 Subtle Hover Effects - Clock brightens on hover with smooth transitions
  • 🎨 Beautiful Trace Visualization - Watch the chaotic path unfold with customizable trail effects
  • 📊 Live Angular Graph - Real-time visualization of angular momentum
  • 🌙 Dark Theme - Minimalist zinc-themed UI with glassmorphic controls

Physics Simulation

  • 🎯 Real Double Pendulum - Accurate Hamiltonian mechanics simulation using Runge-Kutta integration
  • 🖱️ Interactive Controls - Drag and drop the pendulum bobs to set custom initial conditions
  • 📱 Fully Responsive - Optimized for all screen sizes with touch support
  • Smooth Performance - Optimized rendering with intelligent state management

Productivity Tray

  • 📝 Rich Text Notes - Lightweight WYSIWYG editor with formatting toolbar powered by Pell
  • Smart To-Do List - Priority levels, filters, completion tracking, and quick add
  • 🔖 Bookmarks Manager - Search and access all your bookmarks instantly
  • 🎨 Custom Widgets - Create your own HTML/CSS/JS widgets with drag, resize, and minimize
  • 🖼️ Image Gallery - Save images from any webpage with right-click context menu
  • 🎯 Context Menu Integration - Right-click any text, link, or image to save to Chaos Tab
  • 💫 Collapsible Tray - Slides up from bottom, stays out of the way until needed
  • 🌐 Online Indicator - Real-time connection status with glowing indicator

Customization & Settings

  • ⚙️ Collapsible Settings Panel - Clean interface that stays hidden until needed
  • 🎛️ Adjustable Parameters - Control mass, speed, and gravity in real-time
  • 🎭 Visual Options - Toggle trace, graph, smoothing, and pendulum visibility
  • ⌨️ Keyboard Shortcuts - Spacebar to pause/resume animation

State Persistence & Sync

  • 💾 Cross-Tab Synchronization - All tabs show identical pendulum motion in perfect sync
  • 🔄 Session Persistence - Your configuration persists across browser restarts
  • 📐 Responsive State - Positions scale perfectly across different window sizes
  • Smart Auto-Save - Efficient state saving that doesn't impact performance
  • 🌐 Cloud Sync - All notes, todos, and settings sync across devices automatically

Technical

  • Lightweight - Only 32KB total size
  • 🔒 Privacy-First - Zero data collection, everything runs locally
  • 🎯 Smart Permissions - Only uses storage, bookmarks, and context menus
  • 📦 Manifest V3 - Built with the latest Chrome extension standards

Installation

From Chrome Web Store

Install Chaos Tab - One-click install from the official Chrome Web Store

Manual Installation (Developer Mode)

  1. Download or clone this repository
    git clone https://github.com/theabbie/ChaosTab.git
  2. Open Chrome and navigate to chrome://extensions/
  3. Enable "Developer mode" in the top right corner
  4. Click "Load unpacked"
  5. Select the ChaosTab folder
  6. Open a new tab to experience the chaos!

Usage

Basic Controls

  • Drag the bobs - Click and drag any pendulum bob to set initial position
  • Spacebar - Pause/resume the simulation
  • Settings Panel - Click the gear icon (⚙) to access pendulum controls
  • Bottom Tray - Click the bottom toggle to access notes, todos, and bookmarks

Pendulum Settings Panel

Visual Toggles:

  • Show Trace - Display the path traced by the lower bob
  • Show Graph - Display angular momentum graph
  • Persist Trace - Keep longer trace history (10000 vs 500 points)
  • Smoothen Trace - Apply bezier curve smoothing to the trace
  • Gravity - Enable/disable gravitational force
  • Show Pendulum - Toggle pendulum visibility (trace only mode)

Parameter Controls:

  • Upper Mass - Adjust the mass of the first bob
  • Lower Mass - Adjust the mass of the second bob
  • Speed - Control simulation speed

Actions:

  • Pause/Resume - Stop or continue the animation
  • Reset - Return to default configuration

Productivity Tray

📝 Notes Tab:

  • Rich text editor with formatting toolbar
  • Bold, italic, underline, strikethrough
  • Headings, lists, quotes, code blocks
  • Keyboard shortcuts (Ctrl+B, Ctrl+I, etc.)
  • Mobile-friendly touch interface
  • Auto-saves as you type
  • Syncs across all devices

✅ To-Do List Tab:

  • Add tasks with Enter or + button
  • Click checkbox to mark complete
  • Click priority badge to cycle (Low → Medium → High)
  • Filter by status: All, Active, Completed
  • Filter by priority level
  • Right-click any text on any webpage → "Add to To-Do List"
  • Right-click any link on any webpage → "Add Link to To-Do List"
  • Auto-detects and linkifies URLs
  • Delete tasks with trash icon
  • Syncs across all devices

🎨 Widgets Tab:

  • Create custom widgets with HTML, CSS, and JavaScript
  • Syntax highlighting for code editor (Prism.js)
  • Drag widgets anywhere on screen
  • Resize with corner/edge handles
  • Snap to grid layout (80px cells)
  • Minimize widgets to hide from view
  • Edit widget code anytime
  • Delete widgets with confirmation
  • Shadow DOM isolation for safe rendering
  • All widgets sync across devices

🖼️ Gallery Tab:

  • Right-click any image on any webpage → "Save to Chaos Gallery"
  • Images saved with source URL and page title
  • Grid layout with hover actions
  • View full-size image in modal
  • Copy image URL to clipboard
  • Delete individual images
  • Clear all images at once
  • Stores images locally in browser storage
  • Shows when image was saved (relative time)

🔖 Bookmarks Tab:

  • View all Chrome bookmarks in one place
  • Fast search by title or URL
  • Beautiful favicon display
  • Click to open in new tab
  • Auto-updates when bookmarks change

State Persistence & Synchronization

All your settings, pendulum configuration, notes, todos, widgets, and preferences are automatically saved and synchronized across all tabs and devices in real-time. When you open multiple tabs, they all display the exact same pendulum state in perfect synchronization. Your configuration persists across browser sessions and adapts perfectly to different window sizes.

How It Works

The double pendulum is one of the simplest systems that exhibits chaotic behavior. Despite having only two moving parts, its motion is highly sensitive to initial conditions - a hallmark of chaos theory.

This extension uses:

  • Hamiltonian Mechanics for accurate energy-conserving physics
  • Runge-Kutta Integration (RK4) for numerical stability
  • SVG Rendering for smooth, scalable graphics
  • Chrome Storage API for cross-tab state synchronization
  • Pell Editor for lightweight rich text editing (only 5KB!)
  • GridStack.js for drag-and-drop widget grid layout
  • Prism.js for syntax highlighting in code editor
  • Lucide Icons for modern, clean iconography
  • Shadow DOM for isolated widget rendering

Development

Tech Stack

  • Pure JavaScript (no frameworks)
  • SVG for graphics rendering
  • Chrome Extension Manifest V3
  • Chrome Storage API for persistence
  • Pell - Lightweight WYSIWYG editor (5KB)
  • GridStack.js - Responsive grid layout with drag & resize
  • Prism.js - Syntax highlighting for code
  • Lucide - Beautiful icon library

Permissions

  • chrome_url_overrides - Replace the new tab page
  • storage - Save pendulum state, notes, todos, widgets, and preferences
  • bookmarks - Access and display your Chrome bookmarks
  • contextMenus - Add right-click menu options for quick todo creation

External Dependencies

The extension requires external libraries to be downloaded locally. Create an external/ directory and download the following files:

mkdir -p external
cd external

# GridStack.js
curl -sL https://unpkg.com/[email protected]/dist/gridstack.min.css -o gridstack.min.css
curl -sL https://unpkg.com/[email protected]/dist/gridstack-all.js -o gridstack-all.js

# Prism.js
curl -sL https://unpkg.com/[email protected]/themes/prism-tomorrow.css -o prism-tomorrow.css
curl -sL https://unpkg.com/[email protected]/prism.js -o prism.js
curl -sL https://unpkg.com/[email protected]/components/prism-markup.js -o prism-markup.js
curl -sL https://unpkg.com/[email protected]/components/prism-css.js -o prism-css.js
curl -sL https://unpkg.com/[email protected]/components/prism-javascript.js -o prism-javascript.js

# Lucide Icons
curl -sL https://unpkg.com/lucide@latest/dist/umd/lucide.min.js -o lucide.min.js

# Pell Editor
curl -sL https://unpkg.com/[email protected]/dist/pell.min.js -o pell.min.js

Required files in external/ directory:

  • gridstack.min.css
  • gridstack-all.js
  • prism-tomorrow.css
  • prism.js
  • prism-markup.js
  • prism-css.js
  • prism-javascript.js
  • lucide.min.js
  • pell.min.js

Building

After downloading external dependencies, create a distribution package:

zip -r chaos-tab-v1.0.0.zip manifest.json newtab.html newtab.js background.js tray.js notes.js todos.js bookmarks.js widgets.js gallery.js icons/ external/ -x "*.DS_Store"

Privacy

Chaos Tab is completely privacy-focused:

  • ✅ No data collection
  • ✅ No external requests
  • ✅ No analytics or tracking
  • ✅ All computation happens locally
  • ✅ State stored only in your browser's local storage

Contributing

Contributions are welcome! Feel free to:

  • Report bugs
  • Suggest features
  • Submit pull requests

Credits

Author

Created by Abhishek Choudhary

License

MIT License - see LICENSE file for details