Chromeflow: Claude를 위한 웹 UI 작업 자동화 Chrome 확장 프로그램
Chromeflow의 기능
Chromeflow는 Claude와 같은 AI 코딩 어시스턴트를 사용할 때 흔히 겪는 문제점을 해결합니다. Claude가 Stripe, Supabase, SendGrid와 같은 서비스에 대한 백엔드 코드를 생성하면, 일반적으로 웹 대시보드를 탐색하고 값을 복사하며 수동으로 설정을 구성해야 하는 지침으로 끝나 개발 흐름을 방해하게 됩니다.
이 도구는 그러한 수동 웹 UI 단계를 자동화합니다. Chrome 확장 프로그램과 MCP 서버 조합을 통해 Claude에게 실제 브라우저 제어 기능을 제공합니다.
주요 기능
- 브라우저에서 클릭할 대상을 강조 표시
- 알려진 값으로 필드를 자동으로 채움
- 저장 버튼을 직접 클릭
- API 키를 직접
.env파일에 기록 - 로그인 및 비밀번호 입력과 같은 인증 작업에만 수동 브라우저 상호작용 필요
설치 과정
설치는 두 단계로 이루어집니다:
- 프로젝트에서
npx chromeflow setup실행 - Chrome 웹 스토어에서 확장 프로그램 설치
기술적 세부사항
- Claude Code를 사용하여 구축됨
- 완전 무료 오픈소스
- 사이트: https://chromeflow.vercel.app/
제작자는 개발 워크플로우에 매일 사용하고 있다고 보고합니다.
📖 전체 소스 읽기: r/ClaudeAI
👀 See Also
AI 코딩 에이전트의 보안 스캐닝 기능은 배포를 자동으로 점검합니다.
한 개발자가 AI 코딩 에이전트가 배포 후 자동으로 노출된 비밀 정보, 열린 포트, 누락된 보안 헤더, 유출된 소스 코드와 같은 보안 문제를 스캔할 수 있도록 하는 스킬 파일을 만들었습니다. 스캔은 매 배포 후 실행되며 약 30초가 소요됩니다.
파일럿: 클로드 코드로 완전히 구축된 브라우저 자동화 도구
비개발자가 Claude Code를 사용하여 Pilot을 구축했습니다. 이는 접근성 트리 탐색을 통해 AI가 브라우저를 제어할 수 있게 해주는 Chrome 자동화 도구입니다. 이 도구는 클릭 가능한 요소에 번호를 할당하여 Claude가 화면 위치를 추측하는 대신 '5번 클릭'과 같은 명령을 내릴 수 있게 합니다.
Astryx: 150개 이상의 컴포넌트를 갖춘 메타의 오픈소스 디자인 시스템, 맞춤 설정 가능 및 AI 에이전트 대비 완료
메타의 Astryx 디자인 시스템이 오픈소스로 공개되었습니다. 150개 이상의 React/StyleX 컴포넌트, CLI 스캐폴딩, MCP 지원, 내부적으로 13,000개 이상의 앱에서 사용 중입니다. 현재 베타 버전입니다.
학습 키트: 코드베이스 온보딩 및 탐색을 위한 Claude 코드 플러그인
Learning-kit은 저장소를 분석하여 구조화된 학습 계획과 대화형 튜토리얼을 생성하는 무료 Claude Code 플러그인입니다. 변경 작업 전에 개발자들이 익숙하지 않은 코드베이스를 이해하도록 돕으며, 구성 가능한 강제 모드와 진행 상황 추적 기능을 제공합니다.