이 게시글은 하이라이트 익스텐션의 공통 핵심 기능, 데이터 저장(Dexie.js), 그리고 기술적 엣지 케이스를 실제 플랫폼 환경에서 테스트하기 위해 작성되었습니다.

1. 공통 핵심 및 색상 테스트 (Sanity & Color)

이 영역에서 텍스트를 드래그하여 툴바가 정해진 위치에 나타나는지 확인하세요. 하이라이트 버튼을 클릭했을 때 색상이 정확히 #E9D2FD로 변해야 하며, 생성 직후 툴바는 자동으로 사라져야 합니다.

테스트 문구: “익스텐션이 정상적으로 작동한다면 이 문장을 하이라이트했을 때 부드러운 보라색 배경이 입혀져야 합니다.”

중복 선택 테스트: 위 문장을 하이라이트한 후, 다시 그 영역을 드래그하여 툴바가 호출되는지 확인하세요.

2. 데이터 저장 및 새로고침 복원 (Storage & Persistence)

아래 텍스트를 하이라이트한 직후, IndexedDB에 데이터가 즉시 저장되는지 확인하고 페이지를 새로고침(F5) 해보세요.

복원 테스트 타겟: “이 문장은 새로고침 후에도 제자리에 하이라이트가 남아있어야 하는 중요한 텍스트입니다. Dexie.js가 위치 데이터를 정확히 기억하고 있는지 검증합니다.”

3. 복합 노드 및 스타일 테스트 (Mixed Nodes)

텍스트 중간에 다양한 HTML 태그가 섞여 있을 때 하이라이트가 끊기지 않고 하나의 흐름으로 이어지는지 테스트합니다.

복합 샘플: 이 문장에는 **굵은 글씨(Bold)**와 기울임꼴(Italic), 그리고 인라인 코드와 외부 링크가 포함되어 있습니다. 이 전체를 한 번에 드래그하여 하이라이트 해보세요.

4. 코드 블록 및 특수 레이아웃 (Code & Layout)

코드 블록 내부의 수많은 태그 사이에서도 인덱스 계산이 정확한지 확인합니다.

// 하이라이트 인덱스 및 메모리 부하 테스트용 코드
function checkHighlightEffect() {
  const color = "#E9D2FD";
  console.log("Current Theme Color:", color);
  return "Success";
}

5. 긴 텍스트와 스크롤/부하 테스트 (Long Text & Junk)

이 섹션 아래로 긴 공백을 두어 스크롤을 유도합니다. 스크롤이 발생한 상태에서 툴바의 좌표가 정확한지, 그리고 하이라이트가 많아질 때 렉(Jank)이 없는지 확인하세요.

(테스트 시 이 아래에 의미 없는 문장을 50번 복사 붙여넣기 하여 “다중 하이라이트 부하 테스트”를 수행하세요)

한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요. 한스푼에 많은 관심 가져주시고, 자주 이용해 주세요.

6. 리스트 및 제외 대상 테스트 (Lists & Exclusion)

• 불렛 포인트(•)나 숫자(1.)를 제외하고 오직 텍스트 부분만 깔끔하게 하이라이트 되는가?
• 아래 이미지를 드래그했을 때 툴바가 나타나지 않는가?