본문으로 건너뛰기

© 2026 Molayo

HN요약2026. 05. 20. 01:18

Show HN: Hover – 모든 웹페이지에서 IDE 스타일의 호버(Hover) 문서 확인하기

요약

Hover는 웹페이지 상의 코드에 마우스를 올리면 IDE와 유사한 방식으로 문서를 즉시 확인할 수 있게 해주는 브라우저 확장 프로그램입니다. 문서 사이트뿐만 아니라 ChatGPT, Claude와 같은 AI 채팅 앱에서도 작동하며, OpenRouter 또는 커스텀 OpenAI 엔드포인트를 통해 API를 설정할 수 있습니다.

핵심 포인트

  • 웹페이지 내 코드에 호버 시 IDE 스타일의 문서 확인 기능 제공
  • OpenRouter 및 커스텀 OpenAI 엔드포인트를 통한 API 연동 지원
  • 특정 URL 패턴을 지정하여 확장 프로그램이 작동할 웹사이트 설정 가능
  • Bun을 사용한 빌드 및 개발 환경 구축

Hover

모든 웹페이지의 코드 위에 마우스를 올리면(Hover) 문서를 확인할 수 있습니다. 당신의 IDE처럼, 하지만 어디에서나 사용할 수 있습니다.

문서 사이트와 ChatGPT 및 Claude와 같은 AI 채팅 앱에서 작동합니다.

<p align="center"> <img src="docs/demo0.gif" alt="Demo"> </p> <p align="center"> <img src="docs/demo1.gif" alt="Demo 2"> </p>

설치 (Installation)

  1. 확장 프로그램 빌드:
bun install && bun run build
  1. Chrome에 로드: chrome://extensions로 이동 → 개발자 모드 (Developer Mode) 활성화 → 압축해제된 확장 프로그램을 로드 (Load Unpacked)dist_chrome 폴더 선택

설정 (Setup)

1. API 구성

확장 프로그램 아이콘을 클릭하고 **설정 (Settings)**으로 이동하여 OpenRouter API 키를 추가하거나, 호환 가능한 커스텀 OpenAI 클라이언트 엔드포인트 (Endpoint)를 구성하세요.

OpenRouter

<img src="docs/openrouter-settings.png" alt="OpenRouter Settings">

커스텀 엔드포인트 (Custom Endpoint)

<img src="docs/custom-endpoint-settings.png" alt="Custom Endpoint Settings">

2. 웹사이트 구성

URL 패턴(예: *://*.github.com/*)을 사용하여 확장 프로그램이 실행될 웹사이트를 설정하세요.

<img src="docs/website-settings.png" alt="Website Settings">

개발 (Development)

bun run dev      # 개발 서버 (Dev server)
bun run build    # 프로덕션 빌드 (Production build) 및 린트 (lint)
bun run lint     # 린트 (Lint)
...

선택 사항: 개발 빌드에 API 키를 포함하려면 .env 파일을 생성하세요:

VITE_OPEN_ROUTER_API_KEY=your-key

테스트 (Testing)

평가 도구는 scripts/README.md를 참조하세요.

알려진 문제 및 향후 개선 사항 (Known Issues & Future Improvements)

알려진 문제 및 계획된 개선 사항 목록은 TASKS.md를 참조하세요.

개인정보 보호 (Privacy)

데이터 처리에 대한 자세한 내용은 PRIVACY.md를 참조하세요.

라이선스 (License)

MIT

AI 자동 생성 콘텐츠

본 콘텐츠는 HN Design Systems의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0