크롬 확장프로그램 개발기: 이미지 다운로더 만들며 배운 것들

주말에 만든 크롬 확장프로그램 출시 이야기 - 이미지 다운로더 개발기 🚀

💡 시작하게 된 계기

디자이너 친구가 "웹사이트에서 이미지 여러 개 다운받을 때마다 우클릭하기 너무 귀찮다"는 말을 했습니다. "그거 확장프로그램으로 만들어볼까?" 하는 가벼운 마음으로 시작한 프로젝트였죠.

🛠 주요 기능

1. 페이지 내 모든 이미지 자동 스캔
   • 숨겨진 이미지까지 전부 찾아냅니다
   • 이미지 크기와 해상도 정보 제공
2. 스마트 필터링
   • 파일 크기별 필터 (Small < 100KB, Medium 100KB-1MB, Large > 1MB)
   • 파일 형식별 필터 (JPG, PNG, GIF, 기타)
   • 파일명 검색 기능
3. 편리한 다운로드
   • 선택한 이미지만 다운로드
   • 진행률 표시
   • 자동 파일명 정리

🔧 기술 스택과 구현 포인트

Manifest V3 설정

{
  "manifest_version": 3,
  "name": "Image Downloader",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "downloads",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

크롬 확장프로그램의 시작점인 manifest.json입니다. 최신 버전인 V3를 사용했고, 필요한 권한만 최소한으로 요청했습니다.

이미지 스캔 로직

웹페이지의 이미지를 찾는 핵심 로직입니다:

function findImages() {
  const images = document.getElementsByTagName('img');
  const imageUrls = [];

  for (const img of images) {
    const url = img.currentSrc || img.src;
    if (url && url.startsWith('http')) {
      // 이미지 크기 정보 가져오기
      const xhr = new XMLHttpRequest();
      xhr.open('HEAD', url, false);
      try {
        xhr.send();
        const size = xhr.getResponseHeader('Content-Length');

        imageUrls.push({
          url: url,
          width: img.naturalWidth || img.width,
          height: img.naturalHeight || img.height,
          size: parseInt(size)
        });
      } catch (e) {
        // 크기 정보를 못 가져와도 이미지는 추가
        imageUrls.push({
          url: url,
          width: img.naturalWidth || img.width,
          height: img.naturalHeight || img.height,
          size: 0
        });
      }
    }
  }
  return imageUrls;
}

사용자 경험 개선

1. 진행률 표시
2. progress.style.width = `${((i + 1) / selectedUrls.length) * 100}%`;
3. 파일 크기 포맷팅
4. function formatSize(bytes) { if (!bytes) return 'Unknown size'; const units = ['B', 'KB', 'MB', 'GB']; let size = bytes; let unitIndex = 0; while (size >= 1024 && unitIndex < units.length - 1) { size /= 1024; unitIndex++; } return `${size.toFixed(1)} ${units[unitIndex]}`; }

🎨 개발하며 신경 쓴 부분들

1. 성능 최적화
   • 이미지 정보를 한 번에 가져오기
   • 필터링은 클라이언트 사이드에서 처리
   • 불필요한 리렌더링 방지
2. 에러 처리
   • 이미지 크기를 가져오지 못하는 경우 대응
   • 다운로드 실패 시 사용자에게 알림
   • CORS 이슈 해결
3. 직관적인 UI
   • 이미지 미리보기 제공
   • 진행률 시각화
   • 필터 옵션 개수 표시

💡 개발하며 배운 것들

1. Chrome Extension API의 특성
   • activeTab 권한의 중요성
   • content script와 popup의 통신 방법
   • manifest V3의 보안 정책
2. 실제 사용자 피드백
   • "파일 크기 표시가 있으니 좋네요"
   • "한 번에 다운로드 돼서 편해요"
   • "필터링이 유용해요"
3. 기술적 도전
   • Head 요청으로 파일 크기 가져오기
   • 비동기 처리와 진행률 표시
   • 크로스 브라우징 이슈 해결

🚀 앞으로 추가하고 싶은 기능

1. 이미지 포맷 변환 기능
2. 일괄 리사이징 옵션
3. 드래그 앤 드롭으로 선택
4. 커스텀 다운로드 경로 설정

🎬 마치며

생각보다 재미있는 프로젝트였습니다. 특히 Chrome Extension API를 처음 다뤄보면서 새로운 것들을 많이 배웠네요. 다음엔 더 복잡한 기능을 가진 확장프로그램에 도전해보고 싶습니다.

전체 소스 코드는 GitHub에 공개되어 있으니, 관심 있으신 분들은 참고해 주세요!

궁금하신 점이나 피드백이 있다면 언제든 댓글로 남겨주세요 😊

 

 

https://pointer81.tistory.com/entry/chrome-extension-development-guide-for-beginners

크롬 확장프로그램 개발 실전 가이드 (feat. 삽질 방지 팁)

https://pointer81.tistory.com/entry/5-Reasons-Why-App-Developers-Should-Create-Chrome-Extensions-for-Profit

수익 창출! 앱 개발자가 Chrome 확장 프로그램을 개발해야 하는 5가지 이유