프로젝트 구성

FLICK은 Chrome 확장 프로그램 소스와 공개 문서를 분리해서 관리합니다. 이 문서는 공개 문서 프로젝트의 side-project/flick 아래 원본 Markdown을 기준으로 합니다.

확장 프로젝트

경로	역할
src/entry.ts	content script 진입점입니다. CSS를 로드하고 전역 window.FLICK API와 앱 초기화를 연결합니다
src/app/shorts-controller.ts	지원 여부 확인, 추출 실행, 쇼츠 패널 열기/닫기, 배지 상태 변경을 담당합니다
src/app/toggle-button.ts	FLICK 배지 DOM과 준비/열림/로딩/본문 없음/실패/게시글 아님 상태 표시를 담당합니다
src/app/keyboard.ts	F4 토글 단축키를 처리하고 편집 중 입력과 충돌하지 않도록 막습니다
src/app/route-watcher.ts	History API, popstate, MutationObserver, 주기 확인으로 SPA 라우트 변화를 감시합니다
src/ui/index.ts	쇼츠 패널 DOM 조립, 저장된 UI 설정 적용, 이벤트 정리, 닫기 처리를 담당합니다
src/ui/blocks.ts	image, video, text, trusted-html, 레거시 html 블록을 렌더링하고 빈 상태를 표시합니다
src/ui/control-panel*.ts	원본 열기/닫기, 폰트, 크기, 강조색, 배경, 가이드라인 컨트롤을 구성합니다
src/ui/background.ts, sizing.ts, resize.ts, highlight.ts, fonts.ts, storage.ts, colors.ts	배경 이미지 처리, 크기/폰트 복원, 리사이즈, 제목 강조, LocalStorage, 색상 적용 유틸입니다
src/rules/index.ts	현재 URL에 맞는 사이트 규칙을 선택합니다
src/rules/*.ts	fmkorea, dcinside, navercafe, dogdrip 게시글 추출 규칙입니다
src/rules/utils.ts	URL 정규화, 중복 제거, 텍스트 정리, 블록 push 헬퍼입니다
src/styles/*.css	배지, 패널, 컨트롤, 리사이즈, 레이아웃 스타일입니다
src/types/global.d.ts	Block, ExtractResult, Rule, window.FLICK 타입입니다
content/manifest.json	Chrome Manifest v3 설정과 지원 도메인입니다
content/popup.html	확장 아이콘 팝업입니다
content/options.html	지원 도메인과 향후 옵션 안내 페이지입니다
scripts/bump-extension-version.cjs	Chrome Web Store 버전을 확인하고 manifest 버전을 올립니다
scripts/verify-extension.cjs	manifest가 참조하는 파일들이 실제로 있는지 검증합니다

문서 프로젝트

경로	역할
side-project/flick/index.md	문서 사이트 홈
side-project/flick/guide/	사용자/개발자 가이드
side-project/flick/.vitepress/config.ts	VitePress 설정, 내비게이션, 사이드바
side-project/flick/.vitepress/theme/	FLICK 문서 전용 테마 스타일
side-project/flick/public/	로고, Chrome 아이콘, Pretendard 폰트 같은 정적 파일
.side-project/build/flick	통합 빌드용 작업 디렉터리
.side-project/dist/flick	통합 사이트 산출물

.side-project/*는 통합 빌드 산출물입니다. 문서를 수정할 때는 side-project/flick 아래의 원본 Markdown을 수정해야 합니다.

빌드 산출물

Vite 설정은 src/entry.ts 하나를 입력으로 사용합니다.

src/entry.ts
  -> content/bundle.js
  -> content/bundle.css

content 폴더는 manifest, popup, options, 아이콘도 함께 담고 있으므로 빌드 시 비우지 않습니다. vite.config.ts의 emptyOutDir: false가 이 역할을 합니다.

스크립트

현재 확장 프로젝트의 package.json 스크립트는 두 개입니다.

명령	동작
npm run dev	vite build --watch로 content/bundle.js, content/bundle.css를 계속 갱신합니다
npm run build	Store 버전 확인/manifest 버전 갱신 → 타입 검사 → Vite 빌드 → manifest 참조 검증을 순서대로 실행합니다

build는 manifest 버전을 바꿀 수 있습니다

npm run build는 scripts/bump-extension-version.cjs를 먼저 실행합니다. Chrome Web Store에 올라간 버전이 로컬 버전 이상이면 content/manifest.json의 version을 다음 버전으로 올립니다.

문서 사이트 단독 실행

side-project/flick/package.json에는 VitePress 문서를 직접 확인하기 위한 스크립트가 있습니다.

명령	동작
npm run docs	VitePress 개발 서버를 실행합니다
npm run docs-build	VitePress 정적 사이트를 빌드합니다
npm run docs-serve	빌드된 문서를 로컬에서 서빙합니다

지원 도메인

Manifest v3 기준으로 별도 Chrome API 권한은 요청하지 않습니다.

{
  "permissions": [],
  "host_permissions": [
    "*://fmkorea.com/*",
    "*://*.fmkorea.com/*",
    "*://gall.dcinside.com/*",
    "*://m.dcinside.com/*",
    "*://cafe.naver.com/*",
    "*://*.dogdrip.net/*"
  ]
}

번들은 위 도메인에서만 삽입됩니다. 실제 지원 사이트와 게시글 여부는 src/rules/*.ts의 match와 articleMatch가 한 번 더 판별합니다.

로컬 개발 흐름

npm install
npm run dev

그 다음 Chrome에서 chrome://extensions를 열고 개발자 모드를 켠 뒤, content 폴더를 압축해제된 확장 프로그램으로 로드합니다.

릴리스 전에는 아래 명령으로 전체 검증을 수행합니다.

npm run build