AI 크롬 확장 프로그램 만들기 - Manifest V3와 AI 연동

브라우저를 켤 때마다 반복하는 지루한 작업을 AI가 대신해 주면 좋겠다는 생각은 누구나 한 번쯤 해봤을 것입니다. 크롬 확장 프로그램에 AI를 붙이면 그 바람을 꽤 현실적으로 구현할 수 있습니다.

2026년 현재, 크롬 확장 프로그램 개발 환경은 Manifest V3 중심으로 재편되었습니다. AI 모델을 직접 연결해 생산성을 올리는 확장 프로그램을 만드는 방법도 그 흐름 위에 있습니다. 이 글은 최신 Manifest V3 구조 위에서 Claude나 GPT 같은 클라우드 AI를 연결하는 방법과, 현실적으로 부딪히는 한계를 정리합니다.

표: Manifest V3와 Manifest V2 주요 변경점 및 AI 연동 관련 비교

Manifest V3, 무엇이 달라졌는가

Manifest V3는 크롬 확장 프로그램의 보안, 성능, 개인 정보 보호를 강화하기 위해 도입된 구조입니다. 기존 Manifest V2는 지원이 종료되어, 신규 확장 프로그램은 모두 Manifest V3를 따라야 합니다. 개발자에게는 새로운 방식에 익숙해져야 하는 부담이지만, 사용자에게는 더 안전한 환경이 됩니다.

가장 눈에 띄는 변화는 백그라운드 스크립트가 '서비스 워커'로 바뀐 점입니다. 서비스 워커는 이벤트가 있을 때만 켜지는 방식이라 사용량을 줄이고 성능을 높입니다. AI API 호출이나 복잡한 연산을 처리할 때 이 서비스 워커가 중심 역할을 합니다.

또한 외부에서 호스팅되는 코드나 인라인 스크립트 사용이 제한됩니다. 모든 코드는 확장 프로그램 패키지 안에 들어 있어야 합니다. 보안에는 좋지만, AI 모델 갱신이나 외부 라이브러리 관리에는 더 신중해야 합니다.

강력한 AI 모델을 브라우저에 심는 방법

확장 프로그램에 AI 기능을 넣는 핵심은 클라우드 기반 AI API를 연결하는 것입니다. 현재 널리 쓰이는 Claude나 GPT API는 텍스트 생성, 요약, 번역, 분석을 제공합니다. 이를 붙이면 브라우저 안에서 AI 기능을 바로 쓸 수 있습니다.

예를 들어 웹 페이지 내용을 즉시 요약하거나, 문단을 다른 언어로 번역하고, 웹 폼을 분석해 자동으로 채우는 일까지 구현할 수 있습니다. 이 과정에서 서비스 워커가 AI API 호출을 담당합니다. 사용자가 아이콘을 클릭하거나 단축키를 누르면 서비스 워커가 요청을 받아 API에 데이터를 보내고, 응답을 다시 UI에 띄우는 구조입니다.

// service-worker.js (예시)
chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.action === "summarizePage") {
    const pageContent = await getPageContent(); // 현재 페이지 콘텐츠 가져오는 함수
    try {
      const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer YOUR_API_KEY`
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [{ role: "user", content: `다음 텍스트를 요약해줘: ${pageContent}` }]
        })
      });
      const data = await response.json();
      sendResponse({ summary: data.choices[0].message.content });
    } catch (error) {
      console.error("Error calling AI API:", error);
      sendResponse({ error: "AI 요약 중 오류가 발생했습니다." });
    }
    return true; // 비동기 응답을 위해 true 반환
  }
});

위 코드는 서비스 워커에서 GPT API로 페이지 내용을 요약하는 간단한 예시입니다. 실제로는 API 키 보안, 에러 처리, UI 업데이트를 함께 고려해야 합니다.

Chrome Built-in AI (Gemini Nano)의 현실적인 위치

구글은 온디바이스 AI 모델인 Gemini Nano를 크롬에 내장하려 하고 있습니다. 이상적으로는 확장 프로그램이 Gemini Nano를 직접 써서 클라우드 API 없이 AI 기능을 돌리는 것입니다. 그러나 2026년 시점에서 Gemini Nano는 주로 구글 자체 서비스나 일부 기기(예: 픽셀폰)에 최적화되어 있고, 확장 프로그램 개발자가 일반적인 API 형태로 접근하기에는 제약이 많습니다.

현재 Gemini Nano가 제공하는 기능은 텍스트 선택 시 요약 같은 브라우저 내장 기능에 제한되는 경향이 있습니다. 개발자가 확장 프로그램 안에서 추론 엔진을 직접 제어하고 커스터마이징하는 건 아직 어렵습니다. 그래서 대부분의 AI 기반 확장 프로그램은 여전히 Claude나 GPT 같은 클라우드 API를 쓰는 것이 일반적입니다. 온디바이스 AI의 흐름을 지켜보되, 지금 만들려면 클라우드 API 연동에 집중하는 게 실용적입니다.

AI 코딩 도구로 개발 속도 올리기

AI 코딩 도구는 확장 프로그램 개발 과정을 크게 줄여 줍니다. Cursor나 Claude Code는 자연어 프롬프트만으로 코드 초안을 만들거나 기존 코드를 분석해 개선점을 제안하고 버그를 잡아 줍니다.

예시 시나리오로, 매일 경쟁사 사이트 여러 곳에서 특정 키워드를 뽑고 관련 문장을 요약해야 하는 업무를 가정해 보겠습니다. Cursor에 "Manifest V3 기반 확장 프로그램을 만들어줘. 웹 페이지에서 키워드를 입력하면 관련 문장을 찾아 Claude API로 50자 안에 요약하는 기능, 서비스 워커와 팝업 UI, API 키 안전 관리까지 구성해줘."라고 요청할 수 있습니다.

이렇게 요청하면 manifest 파일부터 서비스 워커, 팝업 HTML/JS/CSS까지 기본 구조가 한 번에 생성되는 경우가 많습니다. 이후 Manifest V3 구조를 조금씩 이해하며 API 호출 부분과 UI 연결을 다듬어 가면 됩니다. 보안 관련 부분은 별도로 학습하며 채워야 하지만, 몇 번의 반복을 거치면 키워드를 입력했을 때 페이지 속 관련 문장을 찾아 요약해 주는 확장 프로그램을 완성할 수 있습니다.

번역 및 문구 재구성 확장 프로그램도 좋은 예시입니다. 해외 레퍼런스를 자주 본다면 전문 용어가 섞인 텍스트를 빠르게 번역하고 싶을 수 있습니다. Claude Code에 드래그한 텍스트를 GPT API로 번역하고 일정한 원칙에 맞춰 다시 정리해 주는 기능을 요청하면 기본 로직을 얻을 수 있고, 이후 프롬프트를 다듬어 원하는 결과에 가까워지게 할 수 있습니다. 이 과정에서 AI 코딩 도구의 디버깅 지원과 코드 설명이 큰 도움이 됩니다.

크롬 웹 스토어 심사 통과를 위한 최종 점검

만든 확장 프로그램이 스토어에 등록되지 않으면 헛수고가 됩니다. Manifest V3가 보안과 개인 정보 보호를 강조하는 만큼 심사 기준도 까다롭습니다. 크롬 웹스토어 배포 리젝트를 사전에 차단하기 위해 반드시 거쳐야 할 필수 보안 점검 리스트입니다.

첫째, 필요 최소한의 권한만 요청합니다. manifest.json의 권한이 기능에 정말 필요한지 심사를 꼼꼼히 봅니다. 요약 기능만 있다면 activeTab으로 충분하고, all_urls 같은 광범위한 권한은 특별한 이유 없이는 거절될 수 있습니다.

둘째, 개인 정보 처리 방침을 명확히 제시해야 합니다. AI API를 쓴다면 어떤 데이터가 AI 서버로 전송되고 어떻게 처리·저장되는지 투명하게 밝혀야 합니다. 사용자 신뢰에도 필수입니다.

셋째, 안정적인 작동과 오류 처리가 기본입니다. AI API 호출이 실패하면 사용자에게 알맞은 안내를 띄우고, 확장 프로그램이 비정상 종료되지 않도록 견고하게 설계해야 합니다.

넷째, 설명과 스크린샷을 성의 있게 만듭니다. 기능이 분명히 드러나고, 사용자가 어떤 이득을 얻는지 한눈에 보여야 합니다.

마지막으로 테스트를 충분히 해야 합니다. 여러 환경과 시나리오에서 예상대로 작동하는지 확인하고, 특히 서비스 워커의 생명주기를 이해하고 그에 맞게 코드를 짰는지 점검합니다. 스토어 등록은 단순한 배포가 아니라 지속적인 관리를 요구하는 기준입니다.

나만의 AI 비서를 브라우저에 올리는 여정

AI 크롬 확장 프로그램 개발은 코드를 쓰는 것 이상으로, 불편한 작업을 AI로 해결하는 과정입니다. Manifest V3에 적응하고 Claude나 GPT 같은 API를 잘 연결하며 AI 코딩 도구의 도움을 받는다면 누구나 나만의 확장 프로그램을 만들 수 있습니다.

물론 기술적 난관을 만나거나 모델 한계에 부딪힐 수도 있습니다. 그럴 때마다 학습하고 실험하며 넘어가는 과정 자체가 개발의 재미를 줍니다. 내 아이디어가 브라우저 속 AI 도구로 만들어지는 순간은 충분히 기대할 만합니다.

---

크롬 확장 프로그램 제작 3단계 실천

1. Manifest V3 기본 구조 살펴보기: 빈 크롬 확장 프로그램 프로젝트를 만들고 manifest.json을 열어 필수 필드를 직접 확인해 보세요.
2. AI 코딩 도구에 간단한 기능 요청하기: Cursor나 Claude Code에 "웹 페이지의 특정 텍스트를 복사하는 크롬 확장 프로그램 만들어줘" 같은 간단한 프롬프트를 입력해 보세요.
3. 무료 AI API 엔드포인트 테스트: Claude나 GPT의 API를 이용해 간단한 텍스트 생성이나 요약을 직접 호출해 보세요.

---

📚 참고 문헌 및 공식 레퍼런스 (References)

• Chrome for Developers, 『Manifest V3 Migration Checklist & Service Worker Lifecycle』
• W3C WebExtensions Community Group, 『Browser Extension API Specifications』

---

🔮 관련 인사이트 & 추천 가이드

• AI 자동화 봇 만들기 - 슬랙·디스코드·카카오톡 봇 연동
• AI 데이터 대시보드 만들기 - Text-to-SQL과 시각화