이제 Antigravity와 같은 AI 코딩 에이전트가 매우 정확하게 확장 프로그램 코드를 생성할 수 있습니다. 하지만 잠재력을 최대한 활용하고 고품질 결과를 얻으려면 적절한 컨텍스트와 도구를 제공해야 합니다.
이 가이드에서는 코딩 에이전트에서 적절한 도구를 설정하는 방법과 이러한 도구가 더 나은 확장 프로그램을 더 빠르게 빌드하는 데 어떻게 도움이 되는지 설명합니다.
확장 프로그램 개발을 위해 특별히 설계된 코딩 에이전트용 스킬을 만들었습니다. 이 스킬은 AI 코딩 에이전트에 웹 플랫폼 전문 지식, 권장사항, 최신 API 패턴을 제공하는 더 광범위한 이니셔티브인 Modern Web Guidance의 일부입니다.
하지만 확장 프로그램을 빌드하는 것은 첫 번째 단계일 뿐입니다. 코드가 예상대로 작동하는지 확인할 수 있도록 에이전트용 Chrome DevTools를 사용하면 AI 코딩 어시스턴트가 Chrome에서 직접 확장 프로그램을 디버그하고 DevTools 디버깅 기능과 성능 통계를 활용할 수 있습니다.
설정
Modern Web Guidance
스킬 팩을 사용하려면 선호하는 환경에 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를 설치할 때 확장 프로그램 스킬이 포함된 Modern Web Guidance 플러그인을 선택하거나 맞춤설정 > Google 플러그인으로 빌드 > Modern Web Guidance 를 통해 추가할 수 있습니다.
코딩 에이전트용 Chrome DevTools
에이전트용 Chrome DevTools를 플러그인, 확장 프로그램 또는 MCP 서버로 선택한 코딩 에이전트에 추가할 수 있습니다.
다음은 가장 인기 있는 에이전트 몇 가지에 관한 안내입니다.
Antigravity
- Antigravity IDE를 다운로드합니다 (Antigravity는 MCP 서버 구성을 수동으로 수정할 수 없으므로 권장되지 않음).
시작 시 또는 설정 > 맞춤설정의 Google로 빌드에서 Chrome DevTools를 사용 설정합니다. 이렇게 하면 Chrome DevTools 스킬만 설치되고 MCP 서버는 설치되지 않습니다.
시작 또는 맞춤설정 중에 Modern Web Guidance 및 Chrome DevTools를 사용 설정합니다. Chrome DevTools MCP 서버를 추가하려면 설정 > 맞춤설정으로 이동하여 MCP 서버 추가 버튼을 클릭하고 Chrome DevTools를 검색합니다.
MCP 서버 추가 창에서 Chrome DevTools를 검색합니다. 
Chrome DevTools MCP 서버를 설치합니다. 
맞춤설정에 나열된 Chrome DevTools MCP 서버 MCP 구성 열기 를 클릭하여 MCP 서버 구성을 엽니다. IDE에서 구성 파일을 보려면 설정을 닫아야 합니다.
설정에서 MCP 구성 열기 버튼을 찾습니다. 다음 두 가지 구성 매개변수를 추가합니다.
--categoryExtensions(확장 프로그램 도구를 사용 설정) 및--autoConnect(Chrome의 기본 제공 AI API를 사용하거나 로그인이 필요한 경우에 필요한 기존 Chrome 프로필에 연결 사용 설정).{ "mcpServers": { "chrome-devtools-mcp": { "args": [ "-y", "chrome-devtools-mcp@latest", "--categoryExtensions", "--autoConnect" ], "command": "npx" } } }원격 디버깅을 사용 설정하려면 Chrome을 열고
chrome://inspect/#remote-debugging으로 이동한 후 이 브라우저 인스턴스의 원격 디버깅 허용 을 선택합니다.
Chrome에서 이 브라우저 인스턴스의 원격 디버깅 허용 설정을 사용 설정합니다. Antigravity IDE를 다시 시작합니다.
새 작업공간을 만들고 테스트 프롬프트를 만듭니다. 'Hello World Chrome 확장 프로그램을 만듭니다. Chrome DevTools를 사용하여 테스트합니다.' 에이전트가 브라우저에서 확장 프로그램 테스트를 시작하면 Chrome에 원격 디버깅 권한을 요청하는 대화상자가 표시됩니다. 허용 을 선택합니다. 원격 디버깅 세션이 사용 설정되어 있는 동안 Chrome에 'Chrome이 현재 자동화된 테스트 소프트웨어에 의해 제어되고 있습니다.'라는 배너가 표시됩니다.
<figure>
<img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
<figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect
다른 에이전트
다른 에이전트 설정에 관한 안내는 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 웹 스토어에 제출하는 데 필요한 정보를 추적하여 배포를 더 쉽게 만듭니다.
Modern Web Guidance에는 성능, 접근성, 최신 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.
이 경우 에이전트는 데이터를 유지해야 한다는 것을 알고 있으므로 매니페스트 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.
결론
Modern Web Guidance 스킬과 에이전트용 Chrome DevTools를 결합하면 고품질 기능을 더 빠르게 빌드할 수 있을 뿐만 아니라 확장 프로그램이 안정적이고 Chrome 웹 스토어에 제출할 준비가 되었는지 확인할 수 있습니다.
다음 프로젝트에서 이러한 도구를 실험하여 초기 프로토타입부터 게시까지 확장 프로그램 개발을 간소화하는 방법을 알아보세요.