...
RC
Home
Self Summary
Projects
RC Products
RC
Chrome Extension

GridAlign

GridAlign is a premium Chrome extension for developers, designers, and QA testers to overlay precision layout grids, inspect alignment issues, and generate corrective CSS fixes directly on live websites.
Project info
view live

key links

View GridAlign Code Basic

key info

Project Title

GridAlign

category

Chrome Extension

project status

Completed

Role

Full Development, UI/UX Design & Extension Engineering

Tools & Technologies

Chrome Extension Manifest V3, JavaScript, HTML5, CSS3, Shadow DOM, Chrome Storage API, Chrome Commands API, Content Scripts, Service Worker, Clipboard API, Codex

Timeline

1 Day

Project Overview

GridAlign is a professional browser-based layout auditing tool built to help frontend developers and designers identify spacing, grid, and alignment issues directly inside any live webpage. The extension injects customizable visual grid systems over existing websites without affecting the original page layout or styling.

The project was designed as a high-end developer utility with a dark SaaS-inspired control panel, real-time grid customization, keyboard shortcuts, and an advanced Auto-Snap analysis engine. Users can switch between Bootstrap, Tailwind, Material Adaptive, 8pt Product Grid, Golden Ratio, and Rule of Thirds presets to validate different design systems instantly.

A major focus of the project was safe webpage injection. GridAlign uses an isolated Shadow DOM container with strict reset styling under #gridalign-engine-root, preventing website CSS from leaking into the extension UI and preventing the extension from breaking the target website.

The flagship Auto-Snap v2 engine scans live webpage containers, calculates pixel drift from theoretical grid lines, ranks misalignment severity, highlights affected elements, and generates precise CSS fixes that can be copied directly to the clipboard. This turns visual layout QA into a faster, more measurable workflow.

Key Features:
  • Premium Chrome Extension Architecture: Built using Manifest V3 with a background service worker, popup control panel, content script engine, and secure local storage.
  • Custom Grid Overlay Engine: Supports Bootstrap, Tailwind, Material Adaptive, 8pt Product Grid, Golden Ratio, and Rule of Thirds presets.
  • Real-Time Grid Controls: Users can adjust column count, gutter width, outer margins, color hue, opacity, and baseline rhythm instantly.
  • Isolated Shadow DOM Injection: All overlays and tooltips are rendered inside #gridalign-engine-root with reset styles to prevent CSS conflicts.
  • Smart-X Hover Inspector: Displays live pixel distance from hovered webpage elements to the nearest active grid lines.
  • Auto-Snap Misalignment Engine: Scans live DOM containers and detects layout drift within a configurable pixel threshold.
  • Severity-Based Anomaly Ranking: Flags layout issues as low, medium, or high severity based on distance, element size, and structural importance.
  • In-Page Pro Toolbar: Adds quick controls for scan, next/previous anomaly navigation, report copy, and bulk CSS fix export.
  • Corrective CSS Export: Generates precision CSS overrides with a one-click copy workflow.
  • Domain Profiles: Saves grid settings per website or client project using Chrome local storage.
  • Performance-Oriented Rendering: Uses fixed-position, hardware-accelerated layers with requestAnimationFrame, ResizeObserver, and MutationObserver.

Challenges Faced

  • Preventing Website Style Conflicts: Injected extension UI needed to remain visually stable across unpredictable websites with different CSS resets, frameworks, and z-index systems.
  • Accurate Grid Math Across Viewports: The overlay engine had to support responsive breakpoints, custom gutters, side margins, and multiple grid systems while staying pixel-accurate.
  • Building a Safe DOM Analyzer: The Auto-Snap engine needed to scan meaningful layout containers without overloading complex pages or flagging irrelevant small elements.
  • Maintaining Performance: The extension had to render overlays and anomaly highlights smoothly on live pages without slowing scrolling or interaction.
  • Clipboard and Tooltip Handling: Corrective CSS export needed to work reliably from content scripts while keeping tooltips interactive and non-invasive.
  • State Synchronization: Popup controls, hotkeys, content scripts, and domain profiles all needed to stay in sync across active browser tabs.

Solutions Implemented

  • Built a Shadow DOM Overlay Engine: Created a fully isolated extension root using #gridalign-engine-root, all: initial, fixed positioning, and high z-index layering.
  • Engineered Responsive Grid Calculations: Added preset-specific grid logic for Bootstrap, Tailwind, Material, 8pt systems, Golden Ratio, and Rule of Thirds.
  • Created Auto-Snap v2 Analysis Logic: Scanned structural elements, calculated edge deltas, ranked severity, and generated actionable CSS fixes.
  • Optimized Rendering Pipeline: Used requestAnimationFrame for visual updates, MutationObserver for dynamic page changes, and ResizeObserver for layout recalculation.
  • Added Pro-Level UX Controls: Designed a polished dark popup UI and an in-page toolbar for fast developer workflows.
  • Implemented Local Profile Storage: Used Chrome Storage API to save and restore grid settings per domain.
  • Added Developer Export Tools: Built copy-to-clipboard workflows for individual fixes, bulk fixes, and Markdown audit reports.

media gallery

Scroll to Top