프로젝트 구성

Flick 실제 확장 프로젝트는 C:\Users\Administrator\Desktop\repo\flick에 있고, 문서 사이트는 C:\Users\Administrator\Desktop\repo\docs\side-project\flick에 있습니다.

실제 확장 프로젝트

경로	역할
src/entry.ts	페이지에 FLICK 배지를 삽입하고 F4, Esc, SPA 라우트 감시를 처리합니다
src/ui.ts	쇼츠 패널 DOM, 컨트롤 패널, 편집, 저장, 배경, 가이드라인 기능을 담당합니다
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가 참조하는 파일들이 실제로 있는지 검증합니다

문서 프로젝트

경로	역할
docs/side-project/flick/index.md	문서 사이트 홈
docs/side-project/flick/guide/	사용자/개발자 가이드
docs/side-project/flick/.vitepress/config.ts	VitePress 설정, 내비게이션, 사이드바
docs/.side-project/build/flick	통합 빌드용 작업 디렉터리
docs/.side-project/dist/flick	통합 사이트 산출물

docs/.side-project/*는 빌드 산출물입니다. 문서를 수정할 때는 docs/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을 다음 버전으로 올립니다.

지원 도메인

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

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

번들은 위 도메인에서만 삽입되고, 실제 게시글 여부는 각 규칙의 articleMatch가 한 번 더 판별합니다.

로컬 개발 흐름

npm install
npm run dev

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

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

npm run build