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

내가 크롬 확장 프로그램을 만들면서 배운 것들 🚀

안녕하세요! 오늘은 제가 크롬 확장 프로그램을 개발하면서 겪은 이야기와 유용한 팁들을 공유하려고 합니다. 처음에는 저도 'manifest.json이 뭐야?' 하면서 멀뚱멀뚱 쳐다보기만 했는데요, 이제는 제법 익숙해져서 이렇게 글도 써보네요! 😅

크롬 확장 프로그램이 도대체 뭐길래?

쉽게 말해서, 크롬 브라우저를 여러분 입맛대로 커스터마이징 할 수 있게 해주는 작은 프로그램이에요. 마치 스마트폰에 앱을 설치하는 것처럼, 브라우저에 추가 기능을 설치하는 거죠. HTML, CSS, JavaScript만 알면 누구나 만들 수 있어요. (물론 저처럼 처음엔 삽질을 좀 하겠지만요 😂)

왜 확장 프로그램을 만들어야 할까요?

음... 제 경우는 매일 아침 열어보는 사이트가 10개는 되는데, 이걸 일일이 여는 게 너무 귀찮았어요. 그래서 '모닝 루틴'이라는 확장 프로그램을 만들었죠. 버튼 하나로 모든 사이트가 한 번에 열립니다! (아침에 5분 더 잘 수 있다는 건 비밀이에요 😴)

실제로 이런 식으로 활용할 수 있어요:

• 할 일 관리 (TODO 리스트가 넘쳐나서 또 하나 만들면 안 될 것 같지만...)
• 북마크 관리 (크롬 기본 북마크가 마음에 안 들 때)
• 번역 도구 (네이버 사전 창 켜기 귀찮은 분들을 위해)
• JSON 뷰어 (개발자들의 눈을 보호합시다)
• 광고 차단 (광고 너무 많아서 짜증날 때)

Manifest V3와의 첫 만남 (feat. 삽질 일기)

아... Manifest V3... 처음 봤을 때는 정말 'V가 3개나 있다고 좋은 줄 아나?' 했는데, 알고 보니 꽤 괜찮더라고요. 보안도 강화되고 성능도 좋아졌거든요. 다만 V2에서 업그레이드하는 과정은... (트라우마가 생길 뻔했네요 😱)

주요 변경사항을 정리해보면:

1. 보안이 많이 강화됐어요 (해커들 어렵겠네요)
2. background pages가 service workers로 바뀌었어요 (더 빨라졌어요!)
3. 전반적으로 성능이 개선됐어요 (크롬이 더 이상 램을 잡아먹지 않아요... 농담입니다 🤣)

실제로 만들어보자!

manifest.json - 확장프로그램의 심장

이 파일이 없으면 확장 프로그램이 동작하지 않아요. 마치 사람에게 심장이 필요한 것처럼요! 기본 구조는 이렇게 생겼습니다:

{
  "manifest_version": 3,  // V3 아니면 안 됩니다! 
  "name": "제 첫번째 확장프로그램", // 뭔가 감동적인데요?
  "version": "1.0",
  "description": "이게 뭘까요? 저도 잘 모르겠어요",
  "permissions": ["storage", "tabs"],  // 필요한 권한들
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

주요 API들과 친해지기

크롬은 정말 다양한 API를 제공해요. 처음에는 좀 헷갈릴 수 있지만, 하나씩 써보면 의외로 쉽습니다.

chrome.storage API - 데이터 저장소

// 데이터 저장하기
chrome.storage.sync.set({
  todo: '블로그 글 쓰기',
  done: false
}, () => {
  console.log('저장 완료!');
});

chrome.tabs API - 탭 관리의 달인

// 새 탭 열기 (아침에 뉴스 보기 좋아요)
chrome.tabs.create({
  url: 'https://news.google.com'
});

마치면서

크롬 확장 프로그램 개발은 생각보다 재미있어요! 처음에는 어려워 보일 수 있지만, 하다 보면 '어... 이거 생각보다 할 만한데?' 하게 될 거예요.

특히 제가 추천하는 첫 프로젝트는 '웹서핑 시간 체크 확장프로그램'입니다. 만들면서 놀라운 사실을 알게 될 거예요... 여러분이 얼마나 많은 시간을 유튜브에서 보내는지... 😅

다음에는 제가 만든 확장프로그램들의 실제 코드도 공유해 볼게요. 물론 그전에 코드 정리부터 해야겠지만요... (언제 할지는 비밀입니다 🤫)

그럼 모두 즐거운 코딩되세요! 🚀

 

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

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