본격적으로 chrome extension 개발을 진행하면서 extension구성요소를 공부했었는데 관련 래퍼런스가 적어서 개발을 진행하면서 어려움이 있었다. 그래서 extension 개발 과정에서 필요했던 내용들을 가볍게 정리해보려고 한다!

chrome extension 만들기를 위한 기본 세팅


chrome extension 을 만들기위한 기본 세팅은 아래 구글 공식 문서를 따라하면 된다. 구글의 공식 가이드만 따라해도 대부분의 내용을 구현할 수 있다. 그 중에서 핵심적으로 extension을 구성하는 script요소들에 대해 다뤄볼 예정이다.

Getting started - Chrome Developers

<aside> ❗ 2023년 부터는 Manifest V2 extension은 더이상 chrome 에서 동작하지 않는다! 따라서 공식 문서, 블로그 등을 참고할 때 Manifest V3 를 기준으로 진행해야 한다.

</aside>

1) Manifest 만들기

extension은 manifest파일로부터 시작된다. extension 개발을 시작하기 위해 아래처럼 manifest.json 파일을 생성한다.

// manifest.json
{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3
}

2) extension 을 chrome 브라우저에 올려보기

  1. chrome 브라우저에서 chrome://extensions 로 이동
  2. Developer mode를 활성화
  3. 압축해제된 확장프로그램을 로드합니다 혹은 Load unpacked를 클릭(이때, manifest.json 파일이 들어있는 디렉토리를 선택)

Untitled

3) extension 역할 및 script의 동작 위치 확인하기