ai-startup

CHAPTER 48 / 100

읽기 약 2분

FUNCTION

Chrome 확장 프로그램: AI 기능 탑재

핵심 개념

manifest v3·content script·LLM 통합·배포 — 모든 사이트에 AI.

본문

Chrome 확장 = 직접 분배 채널

📋 코드 (10줄)

[장점]
- 모든 사이트에 본인 도구 추가
- Chrome Store: 30억 설치자
- 광고 비용 0
- "always-on" UX

[단점]
- Manifest V3 제한
- 심사 1~3일
- Chrome 의존성

셋업 — manifest.json

JSON📋 코드 (30줄)

{
  "manifest_version": 3,
  "name": "AI Writing Helper",
  "version": "1.0.0",
  "description": "AI로 글쓰기 도우미",

  "permissions": ["activeTab", "storage", "scripting"],
  "host_permissions": ["<all_urls>"],

  "background": {
    "service_worker": "background.js"
  },

  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "css": ["style.css"]
  }],

  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },

  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

Content Script (페이지 내 동작)

TYPESCRIPT📋 코드 (33줄)

// content.ts
let selectedText = '';

document.addEventListener('mouseup', () => {
  const selection = window.getSelection()?.toString().trim();
  if (selection && selection.length > 5) {
    selectedText = selection;
    showFloatingButton(selection);
  }
});


function showFloatingButton(text: string) {
  const button = document.createElement('div');
  button.className = 'ai-helper-float';
  button.innerHTML = '✨ AI 분석';
  button.onclick = async () => {
    const result = await analyzeText(text);
    showResultModal(result);
  };
  document.body.appendChild(button);
}


async function analyzeText(text: string) {
  // background script에 요청 (CORS 우회)
  return new Promise(resolve => {
    chrome.runtime.sendMessage(
      { action: 'analyze', text },
      response => resolve(response),
    );
  });
}

Background Script

TYPESCRIPT📋 코드 (31줄)

// background.ts (Service Worker)
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'analyze') {
    handleAnalyze(message.text).then(sendResponse);
    return true;  // async
  }
});


async function handleAnalyze(text: string) {
  const apiKey = await chrome.storage.sync.get('apiKey');

  const res = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'x-api-key': apiKey,
      'anthropic-version': '2023-06-01',
      'content-type': 'application/json',
    },
    body: JSON.stringify({
      model: 'claude-sonnet-4-6',
      max_tokens: 1000,
      messages: [{
        role: 'user',
        content: `Analyze: "${text}"\nProvide grammar fixes, alternatives, explanations in Korean.`,
      }],
    }),
  });

  return res.json();
}

Popup UI

HTML📋 코드 (37줄)

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div id="root"></div>
  <script src="popup.js"></script>
</body>
</html>


<!-- popup.tsx — React로 빌드 -->
function Popup() {
  const [apiKey, setApiKey] = useState('');

  useEffect(() => {
    chrome.storage.sync.get('apiKey', data => setApiKey(data.apiKey ?? ''));
  }, []);

  const save = () => {
    chrome.storage.sync.set({ apiKey });
  };

  return (
    <div className="p-4 w-80">
      <h1>AI Helper Settings</h1>
      <input
        value={apiKey}
        onChange={e => setApiKey(e.target.value)}
        placeholder="API key"
      />
      <button onClick={save}>저장</button>
    </div>
  );
}

빌드 + 배포

BASH📋 코드 (16줄)

# Vite 빌드
pnpm build
# → dist/ 폴더에 생성

# 개발 시 — 직접 로드
# chrome://extensions/ → Developer mode → Load unpacked → dist/

# 프로덕션 — Chrome Web Store
# 1. Developer 등록 ($5 일회)
# 2. ZIP 업로드
# 3. 심사 1~3일
# 4. 게시

# 가격
# - 무료
# - 또는 license key (자체 SaaS와 연동)

수익화 모델

📋 코드 (12줄)

[모델 1] 무료 + 광고 X
- Chrome Store 인기
- 광고 안 함

[모델 2] Free + Pro
- 무료: 1일 10회
- Pro: 무제한 ($5/mo)
- 자체 SaaS와 연동

[모델 3] 회사 라이선스
- B2B 판매
- 팀 단위 ($30/user)

사례

📋 코드 (14줄)

[Wisp]
- AI 라이팅 어시스턴트
- 100K+ 사용자

[Glasp]
- 웹 페이지 하이라이트 + AI
- 무료 + Premium

[ChatGPT for Google]
- 검색 결과에 GPT 추가
- 1M+ 사용자


→ 좁은 사용 사례 + 잘 만든 UX = 인기

다음 챕터

CH.49 "Slack/Discord 봇".

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

무료

월 $0 — 검증·시작 단계

Chrome 확장을 무료 도구만으로
시작하는 방법을 알려줘.

소자본

월 $20~50 — MVP·초기 운영

월 $20~50 예산으로 Chrome 확장을
검증·MVP 단계까지 진행하는 전략은?

프로덕션

월 $200~500 — 성장 단계

Chrome 확장을 프로덕션 단계로
확장할 때 필요한 도구·운영 체계는?

스택

풀스택 — 도구 조합 분석

2026년 Chrome 확장 관련 도구 5개를
조합한 추천 스택을 알려줘.

⭐ 이것만 기억하세요

Chrome 확장 프로그램: AI 기능 탑재는 이 3가지만 확실히 잡으세요

1.Chrome 확장 = 30억 사용자 직접 분배

2.Manifest V3 + Content + Background = 표준 구조

3.좁은 사용 사례 + 좋은 UX = 인기 가능성

💬 이 챕터 질문 보기

AI-STARTUP · CH.48 — 질문하거나 답변을 확인하세요

→

진행도 48 / 100

← 커리큘럼으로 ← 목록으로 (ai-startup)