본문 바로가기
개발

작동 구조

content script가 게시글을 감지하고 세로 패널을 만드는 흐름입니다.

src/entry.ts
  ├─ 현재 URL과 게시글 여부 확인
  ├─ FLICK 배지와 단축키 등록
  └─ 활성 사이트 규칙 선택

src/rules/*.ts
  └─ 제목과 blocks[] 추출

src/ui.ts
  ├─ 세로 패널 생성
  ├─ 제목 편집과 강조
  └─ 헤더·푸터 리사이즈

추출 결과는 이미지, 영상과 HTML 블록의 순서를 유지합니다.

type FlickBlock =
  | { type: 'image'; src: string; alt: string }
  | { type: 'video'; src: string; poster?: string }
  | { type: 'html'; html: string }

interface ExtractResult {
  title: string
  blocks: FlickBlock[]
}

SPA 이동과 동적 DOM 변경을 감지해 배지 상태를 갱신합니다. 패널을 닫을 때는 사이트별 후처리로 원본 영상 상태를 가능한 범위에서 복원합니다.