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

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