Show GN: Crop - 웹페이지 요소를 정확히 선택해 캡처하는 Chrome 확장

안녕하세요. 웹페이지에서 원하는 부분을 정확하게 캡처하기 위한 Chrome 확장 프로그램 Crop을 소개합니다.

Crop은 현재 보고 있는 페이지 위에 오버레이를 띄우고, DOM 요소를 마우스로 가리켜 선택하거나 직접 영역을 드래그해서 PNG로 복사/저장할 수 있게 해주는 도구입니다.

Firefox의 스크린샷 기능에서 요소를 정확히 선택하는 흐름이 편하다고 느꼈고, Chrome에서도 비슷한 방식으로 쓰고 싶어서 만들기 시작했습니다.

주요 기능

• 마우스 hover로 DOM 요소 하이라이트
• 클릭으로 요소 선택
• 드래그로 커스텀 영역 선택
• 선택 영역 이동 및 크기 조절
• 현재 viewport 캡처
• 전체 페이지 캡처
• viewport 밖으로 이어지는 선택 영역 스크롤 캡처
• PNG 클립보드 복사 또는 파일 저장

권한과 개인정보

브라우저 확장 프로그램이라 권한이 신경 쓰일 수 있어서 이 부분을 최대한 줄이려고 했습니다.

현재 사용하는 권한은 다음 정도입니다.

• activeTab: 사용자가 확장을 실행한 현재 탭에만 일시적으로 접근
• scripting: 현재 탭에 오버레이 스크립트 주입
• clipboardWrite: 생성한 PNG를 클립보드에 복사
• downloads: 생성한 PNG 저장

debugger, <all_urls> 같은 넓은 권한은 요청하지 않습니다.

스크린샷은 브라우저 안에서 로컬로 처리됩니다. 서버로 스크린샷이나 페이지 데이터를 업로드하지 않고, 텔레메트리도 넣지 않았습니다. 이미지는 사용자가 Copy 또는 Save를 눌렀을 때만 클립보드나 다운로드 파일로 나갑니다.

현재 한계

Chrome 확장 프로그램의 제약 때문에 아래 경우는 제한이 있습니다.

• chrome:// 페이지나 Chrome Web Store 같은 제한된 페이지에서는 실행되지 않습니다.
• cross-origin iframe 내부는 content script에서 검사할 수 없어 요소 선택이 제한됩니다.
• closed shadow DOM 내부도 접근할 수 없습니다.
• 전체 페이지 캡처는 현재 top-level document 기준으로 동작합니다.
• 매우 큰 페이지는 브라우저 canvas 제한 때문에 PNG가 downscale될 수 있습니다.
• lazy loading, animation, sticky header/footer가 많은 페이지에서는 full-page stitch 결과가 완벽하지 않을 수 있습니다.

구현 관련

Chrome Manifest V3 기반으로 만들었습니다.

페이지 위에 content script를 주입하고, Shadow DOM 기반 오버레이에서 선택/리사이즈/캡처 흐름을 처리합니다. 전체 페이지나 viewport 밖 영역은 chrome.tabs.captureVisibleTab()과 스크롤 stitching을 조합해서 캡처합니다.

Firefox Screenshots 쪽에서 참고/적용한 일부 코드는 MPL-2.0 고지를 유지했고, 새로 작성한 프로젝트 코드는 MIT 라이선스로 배포하려고 정리해 두었습니다. Mozilla/Firefox와 공식 제휴되거나 보증받은 프로젝트는 아닙니다.

링크

Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…

GitHub:
https://github.com/postmelee/crop

문서 작성, 버그 리포트, UI 리뷰처럼 웹페이지 캡처를 자주 하시는 분들이 써보시고 불편한 점이나 개선 아이디어를 남겨주시면 감사하겠습니다.