크롬 확장 프로그램, 생각보다 어렵지 않습니다.

이번 글에서는 완전 초보도 따라 할 수 있게
간단한 할일 관리(To-Do) 크롬 확장 프로그램을 직접 만들어봅니다.

HTML / CSS / JavaScript만 알면 충분합니다.

이번 글을 따라 하면 아래 기능을 가진 확장을 만들게 됩니다.

✅ 할일 추가
✅ 체크(완료 처리)
✅ 삭제 기능
✅ 브라우저에 자동 저장 (새로고침해도 유지)

즉, “진짜 쓸 수 있는” 미니 앱입니다.

1. 프로젝트 구조 만들기

먼저 폴더부터 만들어줍니다.


todo-extension/
├── manifest.json
├── popup.html
├── popup.js
├── popup.css

파일 역할

manifest.json → 확장 프로그램의 설정 파일 (필수)
popup.html → 사용자에게 보이는 UI
popup.js → 기능 로직 담당
popup.css → 디자인

2. 개발 환경 준비

VSCode 실행
폴더 생성 → todo-extension
파일 3개 생성

manifest.json
popup.html
popup.js

여기까지 하면 준비 끝!

3. manifest.json 작성 (핵심 설정)


{
  "manifest_version": 3,
  "name": "할일 관리",
  "version": "1.0",
  "description": "간편한 할일 관리 확장 프로그램",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["storage"]
}

핵심 포인트

"manifest_version": 3 → 최신 크롬 확장 규격
"storage" → 데이터 저장을 위해 필요
"default_popup" → 우리가 만든 화면 연결

4. popup.html 작성 (UI)


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>📝 할일 목록</h1>

  <input type="text" id="todo-input" placeholder="할일 입력">
  <button id="add-btn">추가</button>

  <ul id="todo-list"></ul>

  <script src="popup.js"></script>
</body>
</html>

구조는 단순합니다

input → 할일 입력
button → 추가
ul → 리스트 출력

5. popup.js 작성 (핵심 로직)

데이터 불러오기


function loadTodos() {
  chrome.storage.local.get(['todos'], (result) => {
    const todos = result.todos || [];
    renderTodos(todos);
  });
}

설명

크롬 내부 저장소에서 데이터 가져오기
없으면 빈 배열 사용

데이터 저장


function saveTodos(todos) {
  chrome.storage.local.set({ todos });
}

브라우저에 데이터 저장
새로고침해도 유지됨

할일 추가


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 = '';
});

핵심 흐름

입력값 가져오기
배열에 추가
저장
다시 렌더링

화면 렌더링 + 기능


function renderTodos(todos) {
  const list = document.getElementById('todo-list');
  list.innerHTML = '';

  todos.forEach(todo => {
    const li = document.createElement('li');

    li.innerHTML = `
      <input type="checkbox" ${todo.done ? 'checked' : ''}>
      <span>${todo.text}</span>
      <button class="delete">삭제</button>
    `;

    // 체크 기능
    li.querySelector('input').addEventListener('change', () => {
      todo.done = !todo.done;
      saveTodos(todos);
      renderTodos(todos);
    });

    // 삭제 기능
    li.querySelector('.delete').addEventListener('click', () => {
      const updated = todos.filter(t => t.id !== todo.id);
      saveTodos(updated);
      renderTodos(updated);
    });

    list.appendChild(li);
  });
}

loadTodos();

여기서 중요한 개념

상태 변경 → 다시 렌더링
filter → 삭제 구현
checkbox → 완료 상태 관리

중간 설명 제외 코드만 전체 복사 해서 이어서 작성하면 됩니다!

이해를 위해 중간중간 분류했을 뿐 입니다.

6. 크롬에 설치하기

크롬 주소창에 입력


chrome://extensions

우측 상단 개발자 모드 ON
압축해제된 확장 프로그램 로드
todo-extension 폴더 선택

끝!
크롬 상단 아이콘(구글앱 점9개버튼) 에서 하단에 추가된 <할 일 목록> 클릭하면 실행됨

위 확장프로그램은 내 컴퓨터에서만 동작하는! 나만의 앱 입니다.

이번 글에서는

크롬 확장 프로그램을 처음부터 끝까지 직접 만들어봤습니다.

처음에는 단순한 To-Do지만

조금만 확장하면 진짜 서비스 수준까지 발전 가능합니다.

feat.주저리) 💬

지금 보시는 분들 위에 항목 어렵지 않아요, 바로 해보세요. 진짜 뿌듯함이 억만배!!!!!! 자신감 뿜뿜!!!!

언어 공부하다 추락한 내 자존감, 자신감 10000% 복구 가능합니다 🤣

크롬 확장 프로그램 만들기, Chrome Extension 개발,자바스크립트 프로젝트, ToDo 앱 만들기, 웹개발 입문

2026년 5월 8일 금요일

크롬 확장 프로그램 만들기 (초보도 가능한 To-Do 앱)