browser-extension-developer
WXT로 크로스 브라우저 확장 프로그램 구축
브라우저 확장 프로그램 프로젝트는 종종 크로스 브라우저 호환성과 적절한 국제화 설정에서 어려움을 겪습니다. 이 스킬은 적절한 i18n 구조와 함께 Chrome, Firefox, Edge를 지원하는 WXT 기반 확장 프로그램 개발을 위한 명확한 가이드를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"browser-extension-developer" 사용 중입니다. How do I structure a WXT browser extension project?
예상 결과:
- background.ts 및 content.ts 파일을 위해 browser/entrypoints/ 생성
- i18n 파일은 browser/public/_locales/[language]/messages.json에 배치
- browser/wxt.config.ts에서 WXT 구성
- 빌드된 확장은 browser/.output/chrome-mv3 및 firefox-mv2로 출력
"browser-extension-developer" 사용 중입니다. Add Spanish locale to my extension
예상 결과:
- browser/public/_locales/es/ 폴더 생성
- appDescription 및 openWithRepomix 키를 포함한 messages.json 추가
- npm run build-all를 실행하여 로케일 재생성
- 호환성을 위해 Chrome 및 Firefox에서 테스트
"browser-extension-developer" 사용 중입니다. What commands do I use for Firefox development?
예상 결과:
- 핫 리로드와 함께 실시간 개발을 위해 npm run dev:firefox 사용
- Firefox는 Chrome이 사용하는 MV3 대신 MV2 매니페스트 사용
- Firefox 스토어 제출을 위해 빌드하려면 npm run build:firefox 실행
- Firefox 전용 API에 대해 폴리필이 필요할 수 있음
보안 감사
안전This skill contains only documentation files with no executable code, network calls, or filesystem access. The static analysis flagged markdown code fences and JSON content as security issues, but evaluation confirms these are false positives. SKILL.md provides guidance for WXT-based browser extension development.
위험 요인
⚙️ 외부 명령어 (11)
🌐 네트워크 접근 (1)
📁 파일 시스템 액세스 (2)
품질 점수
만들 수 있는 것
크로스 브라우저 워크플로 설정
Chrome, Firefox, Edge 호환성을 위한 적절한 엔트리포인트를 가진 WXT 기반 확장 프로그램 프로젝트 구성
다국어 지원 관리
문서화된 i18n 구조와 필수 메시지 키를 따라 새로운 언어 로케일 추가
빌드 프로세스 표준화
브라우저 확장 프로그램 프로젝트에 대해 팀 전체에서 일관된 개발 및 빌드 명령어 확립
이 프롬프트를 사용해 보세요
WXT 확장을 위한 browser/ 디렉토리 구조와 background 스크립트, content 스크립트, 구성 파일을 배치할 위치 설명
확장에 새로운 언어 로케일을 추가하는 방법과 필요한 폴더 구조 및 메시지 키를 보여줘
Chrome, Firefox, Edge용 확장을 빌드하는 명령어와 알아두어야 할 주요 차이점이 뭐야?
WXT 기반 브라우저 확장 프로그램을 개발, 테스트, 린팅하기 위한 필수 npm 명령어 목록
모범 사례
- background 및 content 스크립트 책임을 명확하게 분리 유지
- 새 메시지 키 추가 시 모든 로케일 파일 업데이트
- 개발 중 Chrome과 Firefox 모두에서 테스트
피하기
- .output 디렉토리의 파일을 직접 수정
- 호환성 확인 없이 브라우저 전용 API 사용
- 필수 키가 누락된 불완전한 로케일 파일 추가