Browsing Assist 크롬 익스텐션 - 4

✔️ 형광펜 색상 변경하기

📄 아이디어

형광펜 색상 변경 및 삭제 기능은 단순합니다.

고유한 id값을 이용하는 방법인데요.

차근차근 알아봅시다.

• 형광펜을 칠하면 백엔드로 범위(Range) 정보가 전송되고, 응답으로 고유 ID 값을 리턴받습니다.

• 커스텀 태그인 bee에 data-id 속성으로 전달받은 고유 ID를 적용합니다.

• 형광펜 색상을 변경한다면 해당 id값을 토대로 변경합니다.

• 형광펜을 삭제한다면 해당 id값을 토대로 삭제합니다.

코드를 통해 알아봅시다.

function updateColorById(color, colorh) {
  // 선택된 ID를 가진 모든 요소를 선택합니다
  const elements = document.querySelectorAll(`[data-id="${SELECTED_ID}"]`);

  elements.forEach((element) => {
    if (element) {
      element.style.backgroundColor = color;
      element.dataset.id = element.dataset.id; // 기존 data-id 값을 유지
      element.style.cursor = "pointer";
    }
  });
  highLightHover(SELECTED_ID, color, colorh);
}

SELECTED_ID이 변수는 전역변수입니다.

bee 태그를 클릭하면 해당 태그의 data-id 값이 SELECTED_ID 변수에 저장됩니다. 이후,

querySelectorAll을 사용해 모든 data-id 값을 가져오고, 이를 기반으로 색상을 변경하면 됩니다.

---

✔️ 형광펜 색상 삭제하기

📄 아이디어

형광펜 색상 변경하기와 똑같습니다.

바로 코드부터 보시죠

function deleteHighlight() {
  const elements = document.querySelectorAll(`[data-id="${SELECTED_ID}"]`);

  elements.forEach((element) => {
    if (element) {
      const parent = element.parentNode;
      while (element.firstChild) {
        parent.insertBefore(element.firstChild, element);
      }
      element.remove();
    }
  });
}

마찬가지로 querySelectorAll을 사용해 모든 data-id 값을 가져오고, 이를 기반으로 삭제를 하면 됩니다.

---

마지막으로 페이지 접속 시 하이라이트 복원만 남았네요...
다음 글에서 봅시다 👋