Lumina 🌟

A professional, lightweight, and reliable Chrome extension for web highlighting that ensures important information is never lost

中文版 | English

✨ Core Features

🖍️ Smart Highlighting

• 4 Colors: Yellow, green, blue, and pink to meet different categorization needs
• Rich Text Support: Perfectly handles complex formats including cross-node, bold, italic, etc.
• Instant Feedback: Color toolbar appears immediately after text selection with smooth, natural interaction

🔄 Persistent Storage

• Auto-Restore: Automatically restores all highlights after page refresh, supports SPA dynamic content
• Unlimited Storage: Based on Chrome Storage API with no capacity limits
• Smart Retry: Automatic retry mechanism for dynamically loaded content

🎯 Precise Control

• Page Rules: Supports three modes: enable all, selective enable, and disable all
• URL Matching: Flexible allow/block lists for precise highlight control
• Default Color: Customizable default highlight color

📊 Efficient Management

• Tree View: Hierarchical display by domain → path → highlight, clear structure
• Real-time Search: Quickly locate target highlight content
• Convenient Operations: Click highlighted text to modify color or delete

🚀 Quick Start

Installation

1. Clone the repository

   git clone https://github.com/yourusername/Lumina.git
   cd Lumina

2. Load the extension

   • Open Chrome and visit chrome://extensions/
   • Enable "Developer mode" in the top right
   • Click "Load unpacked"
   • Select the project root directory

Usage

Create Highlight

1. Select text on any webpage
2. Choose a color from the toolbar that appears
3. Highlight is immediately applied and automatically saved

Manage Highlights

• Change Color: Click highlighted text → Select new color
• Delete Highlight: Click highlighted text → Click delete button
• View All: Click extension icon to open management panel

Configure Page Rules

1. Right-click extension icon → Select "Options"
2. Choose enable mode:
   • All Pages: Enable highlighting on all web pages
   • Selective: Control via allow/block lists
   • Disable All: Turn off highlighting feature
3. Set default color (optional)

🛠️ Technical Architecture

Core Algorithm: Segment Wrapping Method

Adopts safe DOM manipulation strategy to ensure stable and reliable highlighting:

1. Traverse all text nodes within the selection range
2. Use splitText() for precise text segmentation
3. Wrap highlighted parts with <span>
4. Multiple spans share the same highlightId

Technical Advantages

• ✅ Zero DOM Pollution: Does not damage original page structure
• ✅ Format Preservation: Completely preserves original text format (bold, italic, etc.)
• ✅ Cross-Node Support: Seamlessly handles rich text scenarios
• ✅ Reliable Restoration: Smart retry mechanism adapts to dynamic content

Tech Stack

• Manifest V3: Uses the latest Chrome extension standard
• Vanilla JavaScript: No external dependencies, lightweight and efficient
• Chrome Storage API: Local persistent storage
• Jest + JSDOM: Complete unit and integration tests

📁 Project Structure

Lumina/
├── manifest.json          # Extension configuration
├── background/
│   └── background.js      # Background service script
├── content/
│   ├── content.js         # Content script (core logic)
│   └── content.css        # Highlight styles
├── popup/
│   ├── popup.html         # Management panel UI
│   ├── popup.js          # Management panel logic
│   └── popup.css          # Management panel styles
├── options/
│   ├── options.html       # Settings page
│   └── options.js         # Settings logic
├── utils/
│   ├── storage.js         # Storage module (Chrome Storage)
│   ├── highlight.js       # Highlight core algorithm
│   └── i18n.js            # Internationalization module
├── assets/icons/          # Icon resources
└── tests/                 # Test files
    ├── storage.test.js    # Storage module tests
    ├── highlight.test.js  # Highlight algorithm tests
    └── integration.test.js # Integration tests

🧪 Testing

The project includes comprehensive automated tests to ensure stability:

# Install dependencies
pnpm install

# Run tests
pnpm test

# View coverage
pnpm test:coverage

Test Coverage:

• ✅ Storage module (URL normalization, CRUD operations, page rules)
• ✅ Highlight algorithm (create, delete, color change, overlap detection)
• ✅ Integration flow (select text, create highlight, restore, delete)

🎨 Interface Preview

💡 Tip: The actual experience is even better, we recommend installing and trying it

Highlight Toolbar

After selecting text, a color selection toolbar appears at the selected position, supporting quick switching between 4 colors.

Highlight Menu

Click on highlighted text to pop up an action menu for quick color modification or deletion.

Management Panel

Click the extension icon to open a tree-view management panel with search and quick navigation support.

🔧 Configuration Options

Page Rule Modes

• All Pages (all): Enable highlighting on all web pages
• Selective (selective): Control via allow/block lists
  • Block list has higher priority than allow list
  • Supports URL prefix matching
• Disable All (none): Turn off highlighting feature

Default Color

You can select a default highlight color in settings: yellow, green, blue, or pink.

📝 Development Roadmap

• Core highlighting functionality
• Rich text support
• Auto-restore mechanism
• Page rule configuration
• Tree view management
• Search functionality
• Complete test coverage
• Internationalization (i18n)
• Chrome Web Store release
• Dark theme support
• Keyboard shortcuts

🤝 Contributing

Issues and Pull Requests are welcome!

📄 License

MIT License

🙏 Acknowledgments

Thanks to all developers who have contributed to this project.

---

Lumina - Never lose important information ✨