Grid Overlay Tool Chrome Extension

A professional Chrome extension that adds customizable grid overlays to any webpage for design alignment checking.

Author: Endrit Shabani
Repository: https://github.com/endrits079/layout-grid-chrome-extension

Features

• Three Grid Types:

  • Spacing Grid: Uniform spacing grid for layout alignment (default: 10px)
  • Columns Only: Vertical column guides
  • Full Grid: Both rows and columns

• Customizable Settings:

  • Adjustable grid spacing (5-200px)
  • Custom column/row counts (1-50)
  • Color picker with visual indicator
  • Opacity control (0.1-1.0)

• Professional Features:

  • Works on already-open tabs (dynamic script injection)
  • Persistent settings across sessions
  • Modern, accessible popup interface
  • High performance grid rendering
  • Responsive design support

Installation

From Chrome Web Store (Recommended)

1. Visit the Chrome Web Store
2. Search for "Grid Overlay Tool"
3. Click "Add to Chrome"
4. The extension icon will appear in your toolbar

Manual Installation (Developer)

1. Download or clone this repository
2. Open Chrome and go to chrome://extensions/
3. Enable "Developer mode" in the top right
4. Click "Load unpacked" and select the extension folder
5. The Grid Overlay Tool icon will appear in your toolbar

Usage

1. Click the Grid Overlay Tool icon in your toolbar
2. Choose your preferred grid type (Spacing Grid is default)
3. Adjust spacing, color, and opacity as needed
4. Click "Apply Settings" to update the grid
5. Click "Toggle Grid" to show/hide the overlay

Technical Details

• Manifest Version: 3
• Permissions: activeTab, storage, scripting
• Content Security: No external resources, fully self-contained
• Performance: Uses CSS Grid

License

This project is licensed under the MIT License - see the LICENSE file for details.

What this means:

✅ You are free to:

• Use this extension for any purpose (personal, commercial, educational)
• Modify the source code to fit your needs
• Distribute and share the extension
• Create derivative works
• Use in commercial projects
• Sell or include in paid products

Requirements:

• Include the original copyright notice and license text in any distribution
• Credit the original author when redistributing

The MIT License is permissive and business-friendly, making this extension suitable for all use cases.

Contributing

Feel free to submit issues, feature requests, or pull requests. All contributions will be subject to the same license terms.

Support

If you find this tool useful for your development workflow, please consider:

• Starring the repository
• Sharing with other developers
• Contributing improvements

---

Note: This extension is provided "as is" without warranty. Use at your own risk.