TL;DR 크롤러 크롬 확장 프로그램 빌더

Chrome 확장 프로그램(Manifest V3) "TL;DR Crawler"를 빌드합니다. 이 확장 프로그램은 일반 웹 페이지에서 작동합니다. 기능 설명 툴바 아이콘을 클릭하면: 선으로 그린 거미가 현재 페이지에 나타나며, 커서를 따라다니고(스크롤 중에도) 그 위를 지나가는 텍스트를 읽고 플로팅 패널에 간단한 TL;DR을 만듭니다. 아이콘을 다시 클릭하면: 모든 것이 사라지고 페이지는 이전과 정확히 동일해집니다. 1. 토글 - background.js: chrome.action.onClicked가 chrome.scripting.executeScript로 content.js를 주입합니다. - content.js는 전역 플래그를 확인합니다. 크롤러가 이미 실행 중이면 종료하고 정리합니다. 그렇지 않으면 시작합니다. 탭당 인스턴스는 하나만 유지됩니다. 2. 텍스트 찾기 - 주요 읽을 수 있는 영역을 찾습니다: <article> 또는 <main>을 우선하고, 그 외에는 단락 텍스트가 가장 많은 요소를 사용합니다. nav, header, footer, aside, 메뉴, 양식, 코드, 광고 및 숨겨진 요소는 건너뜁니다. - 텍스트 블록(p, li, blockquote, h2-h4)을 수집하고 문장으로 분할합니다. 각 문장을 DOM Range로 저장합니다(문장은 링크와 굵은 텍스트에 걸칠 수 있으므로 요소로 감싸지 마십시오). - 디바운스된 MutationObserver(1초)로 영역을 감시하여 나중에 로드되는 텍스트(무한 스크롤, 지연 콘텐츠)를 포착합니다. 3. 핵심 문장 선택 - 각 문장 점수 계산: 숫자 +2, %, $, €, million, billion +2; first, record, launch, announce, new, only, biggest, fastest, warns, raises, cuts 같은 단어 +1.5; 대문자 이름당 +0.3(최대 +2); 40자 미만 또는 260자 초과 시 -2. - 상위 25%를 핵심 문장으로 표시(최소 5개, 최대 80개), 대부분의 단락에 하나씩 분포되도록 합니다. - 요약, 각각 최대 9단어: - API 키가 설정된 경우: 모든 핵심 문장을 ONE 요청으로 Claude에 보내고 짧고 평이한 요약의 JSON 배열을 요청합니다(최대 9단어, 숫자와 이름은 정확히 유지, 과장 금지). 새 텍스트가 나타나면 배치로 다시 요청합니다. - 키가 없는 경우: 대체 요약 = 필러 시작 단어(and, but, however, also, according to)를 제거하고 단어 경계에서 "…"로 자른 문장입니다. 4. 거미 - 문서 루트의 Shadow DOM 호스트에는 전체 화면 고정 <canvas>(pointer-events: none, z-index 2147483646)와 패널이 포함됩니다. - 외형: 작은 둥근 사각형 몸체, 타원형 배, 두 개의 흰 눈이 있는 머리, 윤곽선은 #5ab8ff. 8개의 다리는 3px 파란색 선과 분홍색(#ff4f7a) 관절 점, 각각 두 개의 세그먼트가 있는 역운동학, 무릎은 바깥쪽으로 구부러짐. - 보행: 두 개의 교대 다리 그룹. 발은 이상적인 위치에서 약 80px 떨어져 있고 다른 그룹이 지면에 닿았을 때만 스텝을 밟습니다. 스텝은 0.13초 동안 지속되며 약간의 들어 올림이 있고, 걷는 방향으로 약간 앞에 착지합니다. - 이동: 대상 = 커서 위치 + 스크롤, 스크롤 중에도 따라다닙니다. 최대 약 420px/s, 부드러운 가속, 커서에서 약 40px 떨어진 곳에서 멈추고, 방향으로 부드럽게 회전합니다. 커서가 8초 동안 유휴 상태이면 뷰포트 주위를 배회합니다. - requestAnimationFrame과 고정 1/120초 물리 스텝. devicePixelRatio 및 창 크기 조정을 지원합니다. 5. 크롤링 - 80ms마다 그리고 발이 착지할 때마다 document.caretRangeFromPoint로 거미 아래의 텍스트를 찾습니다(확장 프로그램 자체 요소는 무시). - 해당 지점이 아직 발견되지 않은 핵심 문장 내부에 있으면: CSS Custom Highlight API(::highlight(tldr-found) with a soft yellow background)로 강조 표시하고 해당 요약을 패널에 추가합니다. - 발이 일반 단어에 착지하면: 약 25% 확률로 해당 단어만 글리치합니다. 해당 단어만 span으로 감쌉니다(단일 텍스트 노드이므로 안전함) 무작위 효과 하나를 적용합니다: 고정폭 글꼴, 파란색 윤곽선, 파란색 강조, 약간의 회전, 넓은 자간, 흐림 또는 대문자. 단어당 최대 2개 효과. 모든 변경 사항을 기록하여 실행 취소할 수 있게 합니다. 6. 패널 - 오른쪽 상단, 헤더로 드래그 가능, Shadow DOM 내부에 있어 사이트 CSS의 영향을 받지 않습니다. - 어두운(#16181c) 테마, 노란색(#ffd166) 모노 타이틀 "TL;DR", "발견됨 / 전체" 카운터, 분홍색 진행 표시줄, 기사 순서의 번호 목록. 새 항목은 노란색으로 깜박이고 목록은 자동으로 스크롤됩니다. 목록은 최대 높이 내에서 스크롤됩니다. - 버튼: "TL;DR 복사"(클립보드에 일반 텍스트), "다시 시작"(강조 표시, 글리치 및 목록 지우기), "닫기"(전체 종료). - 키가 설정된 경우 "Claude로 TL;DR 작성" 추가: 발견된 모든 문장을 보내고 사실만 사용하여 숫자를 그대로 유지한 짧은 3줄을 반환합니다. "생각 중..." 상태를 표시한 다음 목록 아래에 답변을 표시합니다. 7. API 키 - options.html: 사용자의 Anthropic API 키와 모델 이름 필드, chrome.storage.local에 저장. - 모든 API 호출은 background.js를 통해 fetch로 https://api.anthropic.com에 전달, 헤더는 x-api-key, anthropic-version: 2023-06-01 및 content-type: application/json. - 오류는 조용히 처리: 호출이 실패하면 대체 요약을 유지하고 작은 "AI 사용 불가" 메모를 표시합니다. 8. 품질 규칙 - 사이트의 스크롤, 클릭, 링크 또는 텍스트 선택을 절대 방해하지 마십시오. - 종료 시 전체 정리: 캔버스, 패널, 강조 표시, 래핑된 단어 span, 인라인 스타일, 리스너, 옵저버, 타이머. - prefers-reduced-motion: 글리치 없음, 느린 걷기. - 순수 JavaScript, 라이브러리 없음. 파일: manifest.json, background.js, content.js, options.html, options.js, 아이콘(16, 48, 128). - 권한: activeTab, scripting, storage. 호스트 권한: https://api.anthropic.com/*. 마지막에 설치 단계를 제공합니다: chrome://extensions를 열고, 개발자 모드를 활성화하고, "압축 해제된 확장 프로그램을 로드합니다"를 클릭하고, 폴더를 선택한 다음, 옵션을 열고 API 키를 붙여넣습니다.