45분 만에 Claude용 Chrome 확장 프로그램을 만들었습니다 (배운 점은 다음과 같습니다)

저자는 컨텍스트 제한 표시기가 없다는 점을 해결하기 위해 Claude.ai용 Chrome 확장 프로그램을 제작하여 실시간 토큰 수와 세션 총계를 표시했습니다. 이 확장 프로그램은 Manifest V3를 사용하며, 백그라운드 스크립트에 서비스 워커를 사용해야 합니다. 저자는 Claude.ai 인터페이스의 동적 특성을 해결하기 위해 MutationObserver를 사용했습니다. 입력 요소를 찾기 위해 클래스 이름 대신 속성 기반 선택자를 사용했습니다. 확장 프로그램은 단어 수에 1.3을 곱하는 공식을 사용하여 토큰 수를 근사합니다. 배지가 웹페이지에 삽입되어 입력 및 keyup 이벤트 시 업데이트됩니다. 매니페스트 파일은 확장 프로그램을 구성하고 권한을 부여합니다. 놀라운 어려움은 세션 토큰 총계를 계산하기 위해 메시지 전송을 추적하는 것이었습니다. 메시지가 전송될 때를 결정하기 위해 Enter 키 누름과 전송 버튼 클릭을 관찰합니다.