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)
- 확장 프로그램 빌드:
bun install && bun run build
- 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/*)을 사용하여 확장 프로그램이 실행될 웹사이트를 설정하세요.
개발 (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가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기1