r/vibecoding•8일 전•16•6
웹사이트의 실제 연결 상태를 보여주는 오픈 소스 크롬 확장 프로그램을 Vibe coding으로 만들었음
Vibe coded a open source Chrome extension that shows what websites are actually connecting to
핵심 요약
웹사이트의 외부 연결 및 추적기를 시각화해주는 오픈 소스 크롬 확장 프로그램 'OutTrace' 개발.
- 기능 시각화 — 웹사이트의 외부 도메인 및 서비스 연결을 그래프로 보여줌
- 변경 사항 추적 — 서비스 추가/제거를 감지하고 시간 경과에 따른 사이트 변화를 비교함
- 개인정보 보호 — 모든 데이터는 브라우저에 로컬로 저장되며 계정 생성 불필요
- 개발 배경 — DevTools를 매번 뒤지는 게 귀찮아서 Vibe coding으로 직접 구현함
좀 만지작거리다가 드디어 크롬 웹스토어에 올렸다.
이름은 OutTrace야. 아무 사이트에서나 켜면 그 페이지가 어떤 서드파티 도메인이나 서비스랑 통신하는지, 트래커까지 싹 다 보여줌.
추가한 기능들은 이래:
- 연결 상태를 보여주는 시각적 그래프
- 스캔 기록 저장해서 사이트 변화를 시간대별로 비교 가능
- 새로 생기거나 없어진 서비스 감지
- 사이트 모니터링
- 모든 데이터는 브라우저 로컬에 저장
- 계정 생성 필요 없음
매번 개발자 도구 뒤지기 귀찮아서, 웹페이지 뒤에서 무슨 일이 일어나는지 한눈에 보면 재밌겠다 싶어서 만든 거임.
거의 '바이브 코딩'으로 뚝딱 만들었는데 어쩌다 보니 출시까지 해버렸네 ㅋㅋ
https://chromewebstore.google.com/detail/outtrace/eedjncgcdepjbmpapihoigdbdfobmdmc
https://github.com/Schmiedey/OutTrace
더 추가했으면 하는 기능 있으면 알려줘.
