그럼 크롬확장프로그램쪽에서 준비해야 하는것 있나?

작성자:




네—확장 쪽에서 준비/점검할 건 딱 이 정도예요. 바로 실행 가능한 체크리스트로 드릴게요.

크롬 확장프로그램 준비 체크리스트

  1. manifest.json 최종 확인

  • MV3, host 권한 최소화(로컬→스테이징→프로덕 별도)

  • page_inject.js 노출(메인 컨텍스트 브릿지)

json
{
  "manifest_version": 3,
  "name": "YouTube Captions Uploader",
  "version": "1.0.2",
  "permissions": ["storage", "scripting", "activeTab"],
  "host_permissions": [
    "https://www.youtube.com/*",
    "https://m.youtube.com/*",
    "http://localhost:8000/*"
  ],
  "background": { "service_worker": "background.js" },
  "action": { "default_popup": "popup.html" },
  "content_scripts": [{
    "matches": ["https://www.youtube.com/*", "https://m.youtube.com/*"],
    "js": ["captions_extractor.js", "content_script.js"],
    "css": ["floating_button.css"],
    "run_at": "document_idle"
  }],
  "web_accessible_resources": [{
    "resources": ["page_inject.js"],
    "matches": ["https://www.youtube.com/*", "https://m.youtube.com/*"]
  }]
}

  1. page_inject.js 포함(메인 컨텍스트에서 playerResponse 브릿지)

  • 이미 드린 코드 그대로 추가 → “player response 못 찾음” 오류 방지

  1. popup에서 설정 저장

  • 최소: API Endpoint

  • 권장: Auth Token(있다면), YouTube Data API Key(선택)

js
// popup.js (요약)
const DEFAULT_ENDPOINT = "http://localhost:8000/captions/process";
document.addEventListener("DOMContentLoaded", async () => {
  const { apiEndpoint, authToken, ytApiKey } = await chrome.storage.sync.get({
    apiEndpoint: DEFAULT_ENDPOINT, authToken: "", ytApiKey: ""
  });
  api.value = apiEndpoint; token.value = authToken; ytkey.value = ytApiKey;
});
saveBtn.addEventListener("click", async () => {
  await chrome.storage.sync.set({
    apiEndpoint: api.value.trim() || DEFAULT_ENDPOINT,
    authToken: token.value.trim(),
    ytApiKey: ytkey.value.trim()
  });
});

  1. background에서 인증 헤더(옵션)

js
// background.js (POST_CAPTIONS 처리)
if (msg?.type === "POST_CAPTIONS") {
  (async () => {
    const { endpoint, payload } = msg;
    const { authToken } = await chrome.storage.sync.get({ authToken: "" });
    const headers = { "Content-Type": "application/json" };
    if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
    const res = await fetch(endpoint, { method: "POST", headers, body: JSON.stringify(payload) });
    sendResponse({ ok: res.ok, status: res.status, body: await res.text() });
  })();
  return true;
}

  1. captions_extractor.js 최신 버전

  • 브릿지로 playerResponse 수신(타임아웃 폴백 포함)

  • 캡션 json3→srv3/srv1 폴백(권장)

  • 자동생성 자막(asr) 판별 보강

  • 확장 필드(썸네일/태그/카테고리) 수집

  1. content_script.js 최신 버전

  • 드래그 가능한 CAP 버튼(위치 저장)

  • 버튼 옆 토스트

  • 3초 디바운스

  • YouTube Data API 키가 있으면 like_count/comment_count 보강, 없으면 DOM 폴백

  • payload에 확장 필드 포함(대본은 서버로 보내지만, 시트에는 서버가 요약만 저장)

  1. 권장 host_permissions 프로파일

  • 로컬 개발: http://localhost:8000/*

  • 스테이징: https://<staging>.a.run.app/*

  • 프로덕션: https://<prod>.a.run.app/*

    (전환 시 manifest 수정 or 엔드포인트만 팝업에서 교체. 권한 경고 줄이려면 host_permissions도 환경별 분리 권장)

  1. 에러/로그 확인 루틴

  • chrome://extensions → 확장 → “Service worker 검사(배경 페이지)” 열고 네트워크/콘솔 확인

  • 토스트에 상태코드+응답 120자 프리뷰 표시(이미 구현)

  1. 테스트 순서

  • 유튜브 watch 페이지에서 CAP 클릭

  • 성공 토스트 확인 → 서버 로그 200 → 구글 시트에 요약행 Append 확인

  • 자막 없는 영상/자동생성 자막/긴 영상(본문 크기) 각각 테스트

선택 옵션(나중에 붙여도 OK)

  • Authorization 토큰 UI(팝업)와 헤더 전송(위 코드로 완료)

  • Shorts/Embed 페이지 매칭 추가

  • 버튼 드래그 스냅(화면 모서리 고정), 키보드 단축키(예: Alt+Shift+C)

  • 언어 우선순위 설정(ko→en…) 팝업 옵션화

  • 엔드포인트 프로파일(로컬/스테이징/프로덕 드롭다운)

요약: 지금 확장 쪽에서 꼭 필요한 건 manifest + page_inject.js 추가, 팝업에 엔드포인트 저장, background의 POST 처리—이 세 가지가 핵심입니다. 나머지는 이미 구현해둔 내용(드래그/토스트/디바운스/확장 필드) 그대로 쓰면 돼요.

적용하고 재로드해서 한 번 돌려보시고, 에러 토스트 뜨면 메시지 복사해 보내주세요. 바로 잡아드릴게요.

댓글 남기기