https://developer.chrome.com/docs/extensions/mv3/getstarted/

Extension은

• background scripts,
  • 익스텐션이 브라우저의 이벤트에 반응하여 동작할 스크립트 (service worker의 역할을 맡는다.)
• content scripts,
  • 아이콘을 누르면 보이는 팝업창에서 사용하는 뷰와 로직이라고 한다.
• options page,
  • 익스텐션 관리 페이지에서 설정을 누르면 보이는 페이지의 뷰와 로직이라고 한다.
• UI elements,
• 그리고 logic files

와 같은 Components 로 이루어져 있다고 한다.

그리고 얘네들은 기본적으로는 HTML, CSS, JS로 개발이 가능하다.

Create the manifest

• 가장 먼저 필요한 것은 manifest.json 파일이다. 기본적인 세팅에 필요한 파일인것으로 보인다.
  • 기본적으로는 프로젝트 이름, 버전, description등의 정보를 가지고 있다.
  • 위에 언급한 익스텐션을 구성하는 컴포넌트들을 다 이곳 manifest.json에 등록해야 한다.
    • manifest에 잘 등록을 해야 익스텐션이 어떤 파일들을 참조하고, 또 그 파일들이 어떻게 동작해야 하는지를 알 수 있다.

Load an unpacked extension

• 크롬의 extensions 화면에서 Load upacked 버튼? 메뉴? 를 이용하면 만든 익스텐션을 브라우저에서 바로 시험해볼 수 있다.

Add functionality

Register the background script in the manifest

• 위에서 언급한 익스텐션을 이루는 컴포넌트 중 하나인 background script를 manifest에 등록해야 한다. 다음과 같이 하면된다.

  

  • 이때 service worker에 대한 자세한 내용은 여기를 참고

Create the background script

• runtime.onInstalled
• storage API
  • 익스텐션에서 변수를 저장하는 시스템이다. 웹의 windows.localStorage와 거의 비슷하게 사용할 수 있다고 생각하면 될듯 하다.
  • 주로 임시적 변수가 아닌 브라우저를 껐다가 켜도 남아있는 그런 변수들을 저장하는데 사용된다.
  • storage.sync와 storage.local 의 차이는 sync는 브라우저에 로그인한 유저에 기반하여 변수를 저장한다는 부분이다. 즉 sync에 저장된 데이터는 다른 기기에서도 브라우저에 로그인을 한다면 똑같이 가져다가 사용할 수 있다.

Add the storage permission