Multi-Measure Extension

A Chrome extension for measuring and analyzing web page elements with precision.

Features

• 📏 Instantly measure dimensions of any element on a webpage
• 🧩 Visualize box model (margin, padding, borders)
• 📊 Show distances between elements
• 🔄 Toggle measure mode with a single click
• ⌨️ Keyboard shortcuts for easy operation
• 📋 Automatically copy TSX code snippets for measured elements

Installation

Manual Installation

1. Download or clone this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" (toggle in the top-right corner)
4. Click "Load unpacked" and select the extension directory
5. The extension icon should appear in your toolbar

Usage

1. Click the extension icon in your toolbar to toggle measure mode on/off
2. Hover over elements to see their dimensions
3. Click on elements to:
   • Create persistent measurement overlays
   • Automatically copy TSX code snippets to clipboard
   • Set reference points for distance measurements
4. Press Esc once to clear all measurements
5. Press Esc twice quickly to deactivate measure mode

Keyboard Shortcuts

• Esc (single press): Clear all current measurements
• Esc (double press): Turn off measure mode completely

Technical Details

This extension works by:

• Injecting overlays to visualize element dimensions
• Calculating margin, padding, and positioning of elements
• Tracking distances between clicked elements
• Generating TSX code snippets based on the DOM structure

Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - See LICENSE file for details.

Author

Ehtz

---

Made with ❤️ for web developers and designers