CSS Inspector Pro

About

🔍 CSS Inspector Pro — 웹 개발자를 위한 차세대 요소 인스펙터

크롬 DevTools보다 빠르게, 디자이너에게 공유하기 쉽게.
요소 위에 마우스만 올리면 모든 정보가 패널 한 장에 정리됩니다.

━━━━━━━━━━━━━━━━━━━━━━━━
■ 주요 기능
━━━━━━━━━━━━━━━━━━━━━━━━

🎯 요소 하이라이트
  마우스 hover로 파란 아웃라인 표시. 클릭하면 패널이 고정되어
  다른 요소와 비교하면서 작업할 수 있습니다.

📐 Box Model 시각화
  Margin(주황) / Padding(초록) / Content(파랑)을 색깔별 박스로
  화면 위에 직접 그려서 간격을 한눈에 측정합니다.

⎘ 원클릭 복사
  CSS 선택자, 개별 속성, 전체 스타일 블록을 버튼 하나로
  클립보드에 복사. 코드 리뷰·디자인 핸드오프 시간이 절반으로.

🔍 Computed 스타일 검색
  요소에 적용된 수백 개의 computed 속성을 알파벳 정렬하여
  실시간 필터로 빠르게 찾습니다.

⌨️ 단축키 지원
  ⌘+Shift+L (Mac) / Ctrl+Shift+L (Windows·Linux)로
  어느 페이지에서나 즉시 활성화/비활성화.

━━━━━━━━━━━━━━━━━━━━━━━━
■ 이런 분들께
━━━━━━━━━━━━━━━━━━━━━━━━

✓ 디자인 QA — 디자이너 시안과 실제 구현의 간격 차이 확인
✓ 프론트엔드 개발자 — 다른 사이트 UI 분석 및 학습
✓ 퍼블리셔 — CSS 디버깅과 빠른 속성 복사
✓ UX 리서처 — 경쟁사 UI 패턴 캡처 및 기록

━━━━━━━━━━━━━━━━━━━━━━━━
■ 개인정보 보호
━━━━━━━━━━━━━━━━━━━━━━━━

본 확장 프로그램은 외부 서버로 어떠한 데이터도 전송하지 않습니다.
모든 분석은 로컬 브라우저 내에서만 수행되며, 사용자가 활성화한
탭에서만 작동합니다(activeTab 권한).

━━━━━━━━━━━━━━━━━━━━━━━━
■ 권한 사용 목적
━━━━━━━━━━━━━━━━━━━━━━━━

• activeTab — 현재 활성 탭에 인스펙터 주입
• scripting — 요소 분석 스크립트 실행
• clipboardWrite — CSS 속성 클립보드 복사
• storage — 활성 상태 기억 (탭별 on/off)

━━━━━━━━━━━━━━━━━━━━━━━━
■ 변경 사항 (v2.0.0)
━━━━━━━━━━━━━━━━━━━━━━━━

• Manifest V3 마이그레이션 완료
• Spacing / Computed 탭 분리로 정보 밀도 개선
• 패널 고정(Pin) 모드 추가 — 비교 작업 편의성 향상
• 디자인 토큰을 GitHub 다크 테마 기반으로 통일