에이전트용 Chrome DevTools를 사용하면 에이전트가 MCP 서버를 사용하여 브라우저 세션을 시작하고 Chrome 확장 프로그램을 설치하거나 Chrome 확장 프로그램과 상호작용할 수 있습니다. 이를 통해 코딩 에이전트가 확장 프로그램 수명 주기(설치, 다시 로드, 액션 트리거)를 제어할 수 있습니다.
압축 해제된 확장 프로그램을 수동으로 로드하고, 코드를 변경할 때마다 확장 프로그램 관리 페이지에서 다시 로드 버튼을 클릭하고, 확장 프로그램을 수동으로 트리거하여 테스트하는 대신 AI 에이전트가 전체 프로세스를 자율적으로 관리하도록 지시하세요. 이렇게 하면 정적 코드 생성과 실시간 확장 프로그램 테스트 간의 격차가 해소됩니다.
확장 프로그램 도구를 사용하여 다음 작업을 할 수 있습니다.
- 확장 프로그램 설치: 로컬 디렉터리 경로에서 압축 해제된 Chrome 확장 프로그램을 설치합니다.
- 확장 프로그램 나열: 이름, ID, 버전, 사용 설정 상태를 비롯한 설치된 모든 Chrome 확장 프로그램 목록을 가져옵니다.
- 확장 프로그램 다시 로드: ID별로 압축 해제된 Chrome 확장 프로그램을 다시 로드하여 코드 변경사항을 즉시 적용합니다.
- 액션 트리거: 메뉴 열기 또는 백그라운드 스크립트 액션 실행과 같은 ID별로 확장 프로그램의 기본 액션을 트리거합니다 (API 문서의 chrome.action 참고).
- 확장 프로그램 제거: ID별로 브라우저 세션에서 Chrome 확장 프로그램을 삭제합니다.
기본 요건
확장 프로그램 도구를 사용하기 전에 다음이 있는지 확인하세요.
- 실험용 플래그: 확장 프로그램 카테고리는 에이전트용 DevTools에서 기본적으로 활성화되어 있지 않습니다. MCP 서버를 구성
해야 합니다.
--categoryExtensions플래그로 - 압축 해제된 확장 프로그램:
install_extension과 같은 도구에는 압축 해제된 확장 프로그램 폴더의 절대 경로가 필요하므로 로컬 개발에 적합합니다.
Chrome 확장 프로그램 도구의 사용 사례
버그를 개발하고 수정하는 동안 에이전트가 확장 프로그램 수명 주기를 관리하도록 지시합니다.
참고: 에이전트 실행 단계는 잠재적 동작의 예입니다. 에이전트가 다르게 작동할 수 있습니다.
확장 프로그램을 빠르게 반복하고 다시 로드
파일을 변경할 때마다 확장 프로그램을 수동으로 다시 로드하면 개발 속도가 느려집니다. 에이전트가 코드 수정사항을 적용하고 확장 프로그램을 즉시 다시 로드하여 수동 개입 없이 새로운 동작을 확인하도록 지시합니다.
프롬프트 예시:
일반적인 접근 방식을 사용할 수 있습니다.
Verify the extension has access to the active tab.
또는 더 자세히 설명할 수도 있습니다.
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
에이전트 실행 예시: 에이전트가 파일 시스템에서 manifest.json 파일을 수정합니다. 그런 다음 제공된 ID를 사용하여 reload_extension 도구를 호출합니다.
마지막으로 trigger_extension_action 도구를 호출하여 확장 프로그램을 활성화하고 콘솔에 권한 오류가 발생하지 않는지 확인합니다.
타겟 페이지에서 확장 프로그램의 기본 액션 테스트
콘텐츠 스크립트 또는 확장 프로그램 액션이 특정 웹사이트와 상호작용하는 방식을 테스트해야 하는 경우가 많습니다. 에이전트가 사이트로 이동하고, 확장 프로그램을 설치하고, 확장 프로그램을 트리거하도록 지시하여 이 프로세스를 자동화합니다.
프롬프트 예시:
일반적인 접근 방식을 사용할 수 있습니다.
Test my extension on example.com and verify it works correctly.
또는 더 자세히 설명할 수도 있습니다.
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
에이전트 실행 예시: 에이전트가 navigate_page를 사용하여 타겟 URL로 이동합니다. 그런 다음 제공된 절대 경로와 함께 install_extension을 사용합니다. 확장 프로그램이 로드되면 trigger_extension_action을 실행하여 사용자 클릭을 시뮬레이션합니다. 마지막으로 list_console_messages를 사용하여 콘텐츠 스크립트가 실행되고 예상 출력이 생성되었는지 확인합니다.
설치된 확장 프로그램 확인 및 정리
자동화된 테스트 중에 확장 프로그램이 올바른 버전으로 올바르게 로드되었는지 확인하거나 다음 테스트를 위해 깨끗한 상태를 유지하기 위해 확장 프로그램을 삭제해야 할 수 있습니다.
프롬프트 예시:
Uninstall 'My Test Extension' from the browser.
에이전트 실행 예시: 에이전트가 list_extensions 도구를 사용하여 설치된 확장 프로그램 목록과 메타데이터를 가져옵니다. 출력을 파싱하여 '내 테스트 확장 프로그램'과 연결된 ID를 식별합니다. 그런 다음 해당 ID와 함께 uninstall_extension 도구를 사용하여 브라우저에서 안전하게 삭제합니다.
새 확장 프로그램 만들기 및 테스트
새 Chrome 확장 프로그램을 처음부터 시작하려면 일반적으로 상용구 파일을 만들고 압축 해제된 디렉터리를 브라우저에 수동으로 로드하여 테스트해야 합니다. 에이전트가 초기 코드를 생성하고, 확장 프로그램을 로드하고, 기본 기능을 엔드 투 엔드로 한 번에 확인하도록 지시하여 이 수동 설정을 건너뜁니다.
프롬프트 예시:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
에이전트 실행 예시: 에이전트가 기본 Manifest V3 manifest.json과 chrome.action.onClicked 이벤트를 수신 대기하는 백그라운드 서비스 워커를 만듭니다. 그런 다음 테스트 페이지로 이동하고 install_extension을 호출하고 trigger_extension_action을 사용하여 사용자 클릭을 시뮬레이션합니다. 마지막으로 DOM을 검사하거나 스크린샷을 찍어 배경이 회색으로 바뀌었는지 확인하여 상용구가 작동하는지 확인합니다.