이제 Antigravity와 같은 AI 코딩 에이전트가 매우 정확하게 확장 프로그램 코드를 생성할 수 있습니다. 하지만 AI의 잠재력을 최대한 활용하고 고품질 결과를 얻으려면 적절한 컨텍스트와 도구를 제공해야 합니다.
이 가이드에서는 코딩 에이전트에서 올바른 도구를 설정하는 방법과 이러한 도구가 더 나은 확장 프로그램을 더 빠르게 빌드하는 데 어떻게 도움이 되는지 설명합니다.
확장 프로그램 개발을 위해 특별히 설계된 코딩 에이전트용 스킬이 만들어졌습니다. 이 기능은 AI 코딩 에이전트에게 웹 플랫폼 전문 지식, 권장사항, 최신 API 패턴을 제공하는 광범위한 이니셔티브인 최신 웹 가이드의 일부입니다.
하지만 확장 프로그램을 빌드하는 것은 첫 번째 단계일 뿐입니다. 코드가 예상대로 작동하는지 확인할 수 있도록 에이전트용 Chrome DevTools를 사용하면 AI 코딩 어시스턴트가 Chrome에서 직접 확장 프로그램을 디버그하고 DevTools 디버깅 기능과 성능 통계를 활용할 수 있습니다.
설정
최신 웹 가이드
스킬 팩을 사용하려면 원하는 환경에 Modern Web Guidance를 설치하고 확장 프로그램 스킬을 추가하세요. 다음은 인기 있는 도구에 관한 안내입니다.
CLI
대부분의 코딩 에이전트 (Gemini CLI, Claude Code, Codex 포함)는 Chrome팀에서 빌드한 modern-web-guidance CLI를 통해 설치하는 것이 좋습니다. modern-web-guidance CLI를 통해 기능을 설치하면 기능이 자동으로 최신 상태로 유지됩니다.
npx modern-web-guidance@latest install --choose
이렇게 하면 선호도에 따라 스킬을 설치하는 대화형 마법사가 실행됩니다. 옵션이 표시되면 코딩 에이전트를 선택하고 chrome-extensions와 modern-web-guidance를 모두 선택합니다.
Antigravity
Antigravity를 설치할 때 확장 프로그램 기능이 포함된 최신 웹 안내 플러그인을 선택하거나 맞춤설정 > Google 플러그인으로 빌드 > 최신 웹 안내를 통해 추가할 수 있습니다.
코딩 에이전트를 위한 Chrome DevTools
원하는 코딩 에이전트에 에이전트용 Chrome DevTools를 플러그인, 확장 프로그램 또는 MCP 서버로 추가할 수 있습니다.
다음은 가장 인기 있는 에이전트의 안내입니다.
Antigravity
Chrome DevTools MCP 서버를 사용하려면 Antigravity 문서에 따라 커스텀 MCP 서버를 설치하세요. MCP 서버 구성에 다음을 추가합니다.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
다른 에이전트
다른 에이전트 설정에 관한 안내는 Chrome DevTools MCP GitHub의 문서를 참고하세요.
CHROMEWEBSTORE.md 상담사 안내
확장 프로그램을 게시할 때 중요한 부분은 개발자 대시보드를 작성하는 것입니다. 이 문제를 해결하기 위해 기능은 코딩 에이전트가 코드에서 요청된 각 권한의 근거를 비롯한 필요한 정보를 추적하는 CHROMEWEBSTORE.md 파일을 만들고 유지관리하도록 합니다.
'이걸 게시해 줘' 또는 '이 확장 프로그램을 스토어에 준비해 줘'와 같은 문구를 사용하면 기능이 트리거되지만, 에이전트형 워크플로를 간소화하려면 에이전트의 시스템 안내 (예: Antigravity의 경우 ~/.gemini/GEMINI.md, Claude의 경우 ~/.claude/CLAUDE.md)에 다음을 추가하세요.
Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.
코딩 에이전트로 확장 프로그램 빌드 및 테스트
Modern Web Guidance에 포함된 확장 프로그램 기능은 상담사에게 다음과 같은 세 가지 주요 방식으로 도움을 줍니다.
- 최신 API 지식: 사용 중인 모델이 학습된 후에 출시되었을 수 있는 최신 API에 대해 상담사에게 알려줍니다.
- 권장사항: 상담사가 Chrome 확장 프로그램을 빌드하면서 Google팀이 수년간 습득한 모든 권장사항에 액세스할 수 있습니다.
- 제출 준비: 확장 프로그램을 Chrome 웹 스토어에 제출하는 데 필요한 정보를 추적하여 배포를 간소화합니다.
최신 웹 가이드에는 성능, 접근성, 최신 API와 같이 우수한 사용자 환경을 제공하는 데 필요한 모든 것을 다루는 기술도 포함되어 있습니다. 예를 들어 내장된 AI API 기능은 AI 코딩 에이전트가 항상 최신 버전의 API를 사용하며 이러한 API를 사용하는 명시적 아키텍처 규칙 및 하드웨어 제약 조건에 관한 추가 정보를 사용하여 모델 다운로드를 효율적으로 관리하고, 보안에 집중하고, 그레이스풀 폴백 전략을 지원하도록 합니다.
또한 이 기능은 에이전트가 코드에서 요청된 각 권한에 대한 근거를 비롯해 게시하는 데 필요한 정보를 추적하는 데도 도움이 됩니다. 예를 들어 코딩 에이전트에게 측면 패널 API를 사용하여 확장 프로그램을 빌드하고 Chrome 웹 스토어에 게시해 달라고 요청하면 에이전트는 sidePanel 권한이 필요하다는 것을 인식합니다. 그러면 근거가 포함된 CHROMEWEBSTORE.md 파일이 생성됩니다. 제출할 준비가 되면 이 근거를 검토하고 필요한 경우 조정하여 개발자 대시보드에 바로 복사할 수 있습니다.
에이전트를 위한 Chrome DevTools를 사용하면 AI 코딩 어시스턴트가 실행 중인 Chrome 인스턴스에서 확장 프로그램을 설치하고 디버그할 수 있습니다. 구체적으로 다음 작업을 할 수 있습니다.
- 확장 프로그램을 설치 및 제거합니다.
- 설치된 모든 확장 프로그램을 나열하고 다시 로드합니다.
- 확장 프로그램 작업을 트리거합니다.
- 확장 프로그램의 모든 표시 경로 (팝업, 측면 패널, 서비스 워커)를 검사합니다.
다음은 프롬프트와 실제로 작동하는 방식을 보여주는 동영상입니다.
Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.
이 경우 에이전트는 데이터를 유지해야 한다는 것을 알고 있으므로 Manifest V3 파일을 만들고 storage 권한을 요청해야 합니다. 이제 에이전트가 채팅 인터페이스를 벗어나지 않고도 확장 프로그램을 빌드하고, 설치하고, 실행을 지켜보고, 안정성을 확인할 수 있습니다.
간단한 프롬프트 예시입니다. 다양한 프롬프트 기법에 대해 자세히 알아보고 사용 사례에 가장 적합한 기법을 찾으려면 프롬프트 엔지니어링에 관한 가이드를 참고하세요.
CHROMEWEBSTORE.md로 배포를 간소화하는 프롬프트 예시
확장 프로그램 기능을 설치하고 에이전트에 안내를 추가하면 대부분의 작업이 완료되지만, 프롬프트에서 구체적으로 지정하면 개발 단계에서 더 나은 결과를 얻을 수 있습니다. 다음은 에이전트에게 CHROMEWEBSTORE.md 파일을 만들고, 업데이트하고, 유지하도록 요청하는 방법에 관한 간단한 가이드입니다.
- 처음 게시: 확장 프로그램의 기능이 완료되었으며 초기 스토어 등록정보를 생성하려는 경우
Prepare the extension for publication on the Chrome Web Store.
- 권한 및 근거 업데이트: Chrome 웹 스토어에서는 단일 목적 정책을 시행하며
manifest.json에서 요청된 모든 권한에 대해 세부적인 근거를 요구합니다.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- 스토어 거부 처리: 검토 과정에서 확장 프로그램이 거부되거나 플래그가 지정된 경우 거부 이유를 상담사에게 직접 제공하고 규정 준수 메타데이터를 업데이트해 달라고 요청할 수 있습니다.
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.
결론
최신 웹 가이드 기술과 상담사를 위한 Chrome DevTools를 결합하면 고품질 기능을 더 빠르게 빌드할 수 있을 뿐만 아니라 확장 프로그램이 안정적이고 Chrome 웹 스토어에 제출할 준비가 되었는지도 확인할 수 있습니다.
다음 프로젝트에서 이러한 도구를 실험하여 초기 프로토타입부터 게시까지 확장 프로그램 개발을 간소화하는 방법을 알아보세요.