크롬 확장프로그램 개선기 — 엔터키로 할일 추가하기

할일관리 크롬 확장프로그램을 만들고 나서
나는 자주 사용하는 기능이니까 상단 바에 고정해서 쓰기 시작했다.

처음에는 꽤 만족스러웠다.

• 클릭 한 번으로 열림
• 빠르게 할일 추가 가능

“오… 이거 꽤 편한데?”

하지만 곧 불편함 발견

잠깐 써보니 바로 불편한 점이 하나 보였다.

 “할일 추가할 때마다 마우스를 클릭해야 한다”

이게 생각보다 번거롭다.

그래서 자연스럽게 이런 생각이 들었다.

“엔터키로 추가되면 훨씬 편하지 않을까?”

어디를 수정해야 할까?

이건 단순 UI 문제가 아니라
사용자 입력 처리 방식 문제다.

그래서 파일 역할을 다시 정리해봤다.

• HTML → 구조 (뼈대)
• CSS → 디자인
• JS → 동작 (이벤트 처리)

결론: JavaScript를 수정해야 한다

기존 할일 추가 코드

현재 할일 추가는 버튼 클릭으로만 동작한다.

// 할일 추가

document.getElementById('add-btn').addEventListener('click', () => {

  const input = document.getElementById('todo-input');

  const text = input.value.trim();

  if (!text) return;

  chrome.storage.local.get(['todos'], (result) => {

    const todos = result.todos || [];

    todos.push({ id: Date.now(), text, done: false });

    saveTodos(todos);

    renderTodos(todos);

  });

  input.value = '';

});

즉, 버튼 클릭 이벤트에만 연결되어 있음

해결 방법

핵심 아이디어는 간단하다.

엔터키 입력 시 버튼 클릭을 대신 실행시키기

추가 코드 (핵심!)

아래 코드를 기존 코드 바로 아래에 추가해주면 된다.

// 엔터키로 할일 추가

document.getElementById('todo-input').addEventListener('keydown', (e) => {

  if (e.key === 'Enter') {

    document.getElementById('add-btn').click();

  }

});

※ 스크립트 중간에 // 할일추가 ~});   |요사이에 넣어요|  //화면렌더링        

테스트

이제 상단 바에 있는 확장프로그램을 열고

1. 할일 입력
2. Enter 키 입력

버튼 클릭 없이 바로 추가됨 😻

정리

• 불편함: 버튼 클릭이 번거로움
• 해결: Enter 키 이벤트 추가
• 핵심: keydown + Enter 감지
• 결과: UX 개선 완료