설치

Chrome 웹 스토어 등록을 준비하고 있어요. 그전에는 소스에서 직접 빌드해 개발자 모드로 불러올 수 있어요.

Chrome 웹 스토어

심사가 끝나면 이곳에 설치 링크를 걸어 둘게요. 설치하고 나면 배우는 언어와 모국어를 고르는 화면이 열려요.

크롬 데스크톱 버전에서 써요. 모바일 크롬은 확장 프로그램을 지원하지 않아요.

테스터용 압축 파일로 설치

미리 써 보는 분께는 빌드한 확장 프로그램을 압축 파일로 보내 드려요.

  1. 받은 압축 파일을 풀어 폴더를 원하는 곳에 둬요. 이 폴더를 지우면 확장 프로그램도 사라져요.
  2. 크롬 주소창에 chrome://extensions를 열고 오른쪽 위 개발자 모드를 켜요.
  3. 압축해제된 확장 프로그램을 로드합니다를 누르고 푼 폴더(manifest.json이 있는 폴더)를 골라요.
  4. 새 버전을 받으면 폴더를 바꾼 뒤 확장 프로그램 카드의 새로고침 단추를 눌러요.

직접 빌드해서 불러오기

개발하거나 먼저 써 보고 싶은 분을 위한 방법이에요. Node 24가 필요해요.

  1. 저장소를 받은 뒤 확장 프로그램 폴더에서 빌드해요. 번역·사전 서버 주소는 WXT_SERVER_URL로 정하고, 비워 두면 http://localhost:8787을 써요.
    cd extension
    npm ci
    WXT_SERVER_URL=https://서버-주소 npm run build
  2. 로컬 서버로 쓰려면 다른 터미널에서 서버를 켜요.
    cd server
    npm ci
    cp .env.example .env
    npm start
  3. 크롬 주소창에 chrome://extensions를 열고 오른쪽 위 개발자 모드를 켜요.
  4. 압축해제된 확장 프로그램을 로드합니다를 누르고 extension/.output/chrome-mv3 폴더를 골라요.
  5. YouTube에서 자막이 있는 영상을 열면 플레이어 위에 Cuebird 자막과 조작 막대가 나타나요.

Firefox

npm run build -- -b firefox로 빌드한 뒤 about:debugging → 이 Firefox → 임시 부가 기능 로드에서 .output/firefox-mv2/manifest.json을 골라요. 임시 부가 기능은 브라우저를 다시 켜면 사라져요.