크롬 익스텐션 만들기 1

크롬 익스텐션은 마치 브라우저 위에 직접 동작하는 앱을 만드는 느낌이다. 그래서 예전부터 크롬 익스텐션을 만들어보고 싶었는데 마땅히 아이디어가 없었어서 미루다가 이번 기회에 그냥 어떤 것이든 간단하게 만들어보자 생각이 들어 그 과정을 정리해봤다.

어떤걸 크롬 익스텐션으로 만들 수 있을까?

생각보다 할 수 있는 범위가 꽤 넓다.

예를 들면:

• 특정 웹페이지에서 데이터 자동 수집 (스크래핑)
• 반복 작업 자동화 (버튼 클릭, 값 입력 등)
• UI 커스터마이징 (불필요한 요소 숨기기)
• 외부 API 연동해서 정보 표시 (예: 번역, 요약, 추천)

핵심은 브라우저에서 내가 하는 행동을 대신 해주는 도구라고 이해하면 쉽다. 내가 반복적으로 하는 행동들 중 더 간편하게 하고 싶거나 데이터를 수집하는 부분이 있다면 만들어보기 좋다.

나는 평소 채용공고를 많이 보기 때문에 현재 보고 있는 채용 정보를 추출해서 CSV로 다운로드하는 기능을 만들어보기로 했다.

기본 구조 이해하기

크롬 익스텐션은 크게 3가지로 구성된다.

1️⃣ manifest.json

익스텐션의 설정 파일이자, 전체 동작을 정의하는 핵심 파일

• 이름, 버전
• 어떤 파일 실행할지, 어떤 권한 필요한지 등 설정하는 파일

{
  "manifest_version": 3,
  "name": "my-extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "popup.html"
  }
}

2️⃣ popup (UI)

사용자가 익스텐션 아이콘을 클릭했을 때 뜨는 작은 화면

• popup.html → 화면 구조
• popup.js → 동작 로직

3️⃣ content script

👉 실제 웹 페이지에 개입하는 코드

예:

• DOM 조작
• 데이터 수집

전체 동작 흐름

핵심 기능은 2개다. 현재 공고 추가, CSV 다운로드.

popup (버튼)
   ↓
content script (데이터 추출)
   ↓
CSV 변환
   ↓
다운로드

“현재 공고 추가” 기능

이 버튼은 현재 페이지의 채용 정보를 추출해서 저장하는 역할을 한다.

• job title
• company
• job description
• qualifications
• tech stack

{
  "title": "Frontend Engineer",
  "company": "회사명",
  "job_description": "...",
  "qualification": "...",
  "tech_stack": ["React", "TypeScript"]
}

“CSV 다운로드” 기능

이 버튼은 지금까지 저장된 데이터를 파일로 만들어주는 역할을 한다.

실제 코드 및 구현 후기는 2탄에서 계속!