제가 브라우저용 Claude AI 사이드바 확장 프로그램을 만들었습니다 — 방법

Source: Dev.to

Overview

저는 문서, 기사, 연구 논문을 읽는 데 많은 시간을 보냅니다. 읽고 있는 내용을 Claude에게 물어보려면 탭을 계속 전환해야 했는데, 이게 흐름을 끊어버렸습니다. 그래서 모든 웹페이지에 Claude‑기반 사이드바를 삽입하는 Chrome 확장 프로그램을 만들었습니다.

Features

• Summarize – 한 번 클릭으로 전체 페이지를 요약합니다.
• Key points – 가장 중요한 정보를 핵심 포인트 형태로 추출합니다.
• Explain selection – 텍스트를 강조 표시하면 설명을 제공합니다.
• Improve selection – 작성한 텍스트를 강조 표시하면 재작성된 버전을 제공합니다.
• Chat – 페이지 내용을 컨텍스트로 삼아 전체 대화형 모드를 사용할 수 있습니다.
• Toggle – Alt+A 로 어디서든 사이드바를 열고 닫을 수 있습니다.

Technical Details

• Manifest V3 Chrome 확장 프로그램.
• UI 격리를 위한 Shadow DOM (호스트 페이지와 스타일 충돌 없음).
• Claude API 호출을 담당하는 Service worker 백그라운드 스크립트.
• 직접 API 호출을 위한 anthropic-dangerous-direct-browser-access 헤더.
• 빠른 응답을 위해 Claude Haiku, 더 긴 출력이 필요할 때는 Claude Sonnet 사용.
• 브라우저 확장 프로그램에서 Claude API를 직접 호출하면 anthropic-dangerous-direct-browser-access: true 헤더를 추가하지 않을 경우 CORS 오류가 발생합니다(문서를 찾아보면 해당 헤더가 필요하다는 것을 알 수 있습니다).

Packaging

직접 빌드하는 대신 $9에 확장 프로그램을 제공하고 있습니다:
Nexio AI Extension on Gumroad

ZIP 파일에는 전체 소스 코드가 포함되어 있어 언팩된 확장 프로그램으로 로드하거나 학습용으로 활용할 수 있습니다.

Support

구현에 관한 질문이 있으면 댓글로 언제든 답변해 드리겠습니다!