Review

멀티서치 크롬확장앱 개발 일지

snowday 2025. 3. 22. 13:55

Multi Search 주요 기능

핵심 기능

  • 다중 검색 엔진 동시 실행
    • Google, Naver, YouTube 등 주요 플랫폼에서 한 번에 키워드 검색
    • 입력 키워드를 공백/콤마로 구분해 여러 탭 자동 생성

UI/UX

  • 간결한 입력 인터페이스
    • 실시간 자동 완성 기능 (최근 검색어 기반)
    • 오류 방지: 빈 입력 시 경고 메시지 표시
  • 로딩 상태 표시
    • 탭 생성 시 스피너 애니메이션으로 진행 상황 시각화

성능 최적화

  • 탭 생성 딜레이 시스템
    • 동시 탭 생성 시 Chrome 크래시 방지를 위해 200ms 간격 적용
  • 데이터 관리
    • chrome.storage.local로 최근 검색어 저장 및 복구

커스터마이징

  • 검색 엔진 선택 옵션
    • 사용자 설정에 따라 Google, Naver, YouTube 선택 가능 (체크박스 UI)

지원 환경

  • Chrome 브라우저 전용
    • Windows, macOS, Linux에서 동작
    • Chrome 웹스토어 배포 준비 중

주요 기술: Chrome Extension API, JavaScript, HTML/CSS

Day 1: 프로젝트 시작 및 기본 기능 구현

진행 내용

1. Chrome 확장앱 기본 구조 설정

  • manifest.json 구성
    Chrome 확장앱의 핵심 설정 파일인 manifest.json을 v3 버전 기준으로 작성했습니다.
    • 필수 필드: manifest_version, name, version, action (팝업 UI 연결)
    • 권한 설정: permissions에 tabs, storage, scripting 추가
    • 호스트 권한: host_permissions에 *://*/*를 지정해 모든 도메인 접근 허용
    • 배경 스크립트: background.js를 service_worker로 등록 (v3 필수)
    {
  "manifest_version": 3,
  "name": "Multi Search",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": ["tabs", "storage", "scripting"],
  "host_permissions": ["*://*/*"],
  "background": {
    "service_worker": "background.js"
  }
}
  • UI 디자인
    팝업 창(popup.html)을 간결하게 디자인했습니다.
    • 입력 필드: <input type="text" id="keywords">
    • 버튼: <button id="searchBtn">검색</button>
    • CSS로 박스 쉐도우, 호버 효과 추가해 사용자 경험 개선

2. 핵심 기능 구현

  • 키워드 입력 → 탭 생성 로직
    • searchBtn 클릭 시 이벤트 리스너에서 입력값을 가져와 공백/콤마 기준으로 분할
    • 분할된 키워드를 Google 검색 URL(https://www.google.com/search?q=)에 연결해 새 탭 생성
    document.getElementById('searchBtn').addEventListener('click', () => {
  const keywords = document.getElementById('keywords').value.split(/[\s,]+/);
  keywords.forEach(keyword => {
    chrome.tabs.create({ url: `https://www.google.com/search?q=${encodeURIComponent(keyword)}` });
  });
});

3. 테스트

  • 기본 동작 검증
    • 입력값: "개발자 도구, 크롬 확장앱" → 두 개의 Google 검색 탭이 정상적으로 열림
    • 오류 케이스: 빈 입력 시 alert("키워드를 입력해주세요!") 경고창 표시

배운 점

  • Chrome 확장 v3의 변화
    • v2와 달리 background 스크립트가 Service Worker로 대체되며, 지속적 실행이 불가능해짐
    • chrome.scripting.executeScript API를 사용해 콘텐츠 스크립트 주입 방식 변경

어려웠던 점

  • 팝업 창 상태 관리
    • 팝업이 닫힐 때 입력값이 사라지는 문제 발생 → chrome.storage.local로 데이터 저장해 해결
    • (초기 버전에서는 localStorage 사용 시 보안 오류 발생)

Day 2: 기능 개선 및 디버깅

진행 내용

1. 다중 검색 엔진 지원

  • 검색 엔진 URL 매핑
    Google, Naver, YouTube 등 주요 플랫폼 URL을 객체로 정의:
  • const SEARCH_ENGINES = { google: "https://www.google.com/search?q=", naver: "https://search.naver.com/search.naver?query=", youtube: "https://www.youtube.com/results?search_query=" };
  • 동시 탭 생성 로직 수정
  • keywords.forEach(keyword => { Object.values(SEARCH_ENGINES).forEach(engineUrl => { chrome.tabs.create({ url: `${engineUrl}${encodeURIComponent(keyword)}` }); }); });

2. UI/UX 개선

  • 로딩 스피너 구현
    • 버튼 클릭 시 <div class="spinner"></div> 표시
    • 모든 탭 생성 완료 후 스피너 숨김 (setTimeout으로 2초 후 제거)
  • 오류 처리 강화
    • 특수문자 포함 시 encodeURIComponent로 인코딩
    • 네트워크 오류 대비해 chrome.tabs.create에 error 콜백 추가

3. 디버깅

  • 탭 생성 속도 제한 문제
    • 동시에 15개 이상 탭을 열면 Chrome이 멈추는 현상 확인
    • 해결책: setTimeout으로 각 탭 생성 사이에 200ms 딜레이 추가
    • keywords.forEach((keyword, index) => { setTimeout(() => { // 탭 생성 코드 }, index * 200); });

배운 점

  • Chrome API의 비동기 처리
    • chrome.tabs.create는 비동기 메서드 → Promise로 래핑해 동기화 필요
    • chrome.storage.local은 get/set 시 콜백 또는 async/await 사용

어려웠던 점

  • 크로스 도메인 제한
    • 팝업 스크립트에서 window.open 사용 시 보안 오류 발생 → chrome.tabs.create로 교체해 해결

Day 3: 최적화 및 배포 준비

진행 내용

1. 성능 최적화

  • 코드 리팩토링
    • 중복 코드를 함수화 (createTabsForKeyword, showSpinner, hideSpinner)
    • 이벤트 리스너를 DOMContentLoaded 이후에 등록해 DOM 접근 오류 방지
  • 로컬 스토리지 교체
    • localStorage → chrome.storage.local로 변경해 확장앱 전용 저장소 활용
    • // 설정 저장 예시 chrome.storage.local.set({ recentKeywords: ["test", "example"] });

2. 사용자 피드백 반영

  • 검색 엔진 선택 기능 추가
    • 체크박스 UI를 통해 사용자가 원하는 엔진 선택 가능하도록 구현
    • <label><input type="checkbox" value="google"> Google</label> <label><input type="checkbox" value="naver"> Naver</label>
  • 자동 완성 기능 프로토타이핑
    • input 이벤트 리스너에서 chrome.storage.local의 최근 검색어 목록을 가져와 드롭다운 표시

3. 배포 준비

  • 패키징
    • chrome://extensions에서 "패키지 확장 프로그램" 기능으로 .crx 파일 생성
    • 아이콘 16x16, 48x48, 128x128 픽셀 버전 준비
  • Chrome 웹스토어 정책 준수
    • 개인정보처리방침 추가 (privacy.html)
    • 스크린샷 5장 및 상세 설명 작성

배운 점

  • Chrome 웹스토어 심사 기준
    • 사용자 데이터 수집 시 명시적 동의 필요
    • 외부 스크립트 주입 금지 (XSS 취약점 방지)

다음 계획

  1. 사용자 정의 엔진 추가
    • 사용자가 직접 검색 엔진 URL을 등록할 수 있는 설정 페이지 개발
  2. 단축키 지원
    • Ctrl+Shift+S 등 키 조합으로 팝업 열기 기능 구현
  3. 다국어 지원
    • 영어/한국어 언어팩 추가

결과물

  • Chrome 웹스토어: 출시되면 업데이트 하겠습니다. 

종합 회고

3일간의 개발 과정에서 Chrome 확장앱의 핵심 개념을 체득했으며, 특히 비동기 처리와 보안 정책을 깊이 이해하게 되었습니다. 사용자 피드백을 반영하며 실용성과 안정성을 동시에 확보하는 데 집중했고, 향후 업데이트를 통해 기능을 지속 확장할 계획입니다.