velog 크롬 확장 프로그램을 만들기 위해서 크롬 확장 프로그램 개발을 어떻게 하는 것인지 공식 문서를 참고해서 공부한 내용을 작성하려고 한다.

Extension 이란?

크롬 확장 프로그램들은 추가적인 기능과 기술들을 크롬 브라우저에 제공함으로써 브라우징 경험을 강화 시키는 프로그램이다. 아래는 그 예 이다.

• 생산성 있는 도구들
• 풍부하게 웹 페이지 콘텐츠를 만들기
• 정보들의 집합

Chrome Extension APIs

확장 프로그램들은 모든 브라우저에서 제공하는 자바스크립트 API들을 사용할 수 있다. 확장 프로그램들이 웹 앱보다 더 강력한 이유는 Chrome API에 액세스할 수 있기 때문인데 다음과 같은 기능이 있다.

• 웹 사이트의 기능 또는 동작을 변경
• 사용자가 웹 사이트 전반에서 정보를 수집하고 정리할 수 있도록 허용
• 크롬 개발자 도구에 기능을 추가

Extension files

확장 프로그램들은 기능적으로 제공되는 기능에 따라 다른 파일이 포함되는데 다음은 가장 자주 사용되는 파일 중 일부분이다.

• manifest
  확장 프로그램에서 manifest는 특정 파일 이름을 가져야 하는 유일한 필수 파일이다.( 무조건 manifest.json이라는 이름으로 지정이 되어야 하고 root 디렉토리에 하나만 있어야 한다.) 이 파일에서는 중요한 메타 데이터들을 저장하거나 자원을 정의하고, permission들을 명시하고 백그라운에서 동작하거나 페이지에서 작동할 파일들을 정의한다.
• service worker
  브라우저의 이벤트들의 핸들링과 리스너 역할을 하는 파일로 다양한 타입의 이벤트들 (새로운 페이지로의 네비게이트, 북마크 지우기, 탭 닫기 등)이 존재한다. 또한 모든 Chrome API들을 사용할 수 있지만 directly로 웹 페이지 콘텐츠와 상호작용할 수는 없다. ( 그 일은 content script들이 담당한다)
• content script
  웹 페이지의 컨텍스트(context)안에 자바스크립트를 실행할 수 있다. 그리고 웹 페이지에 주입되어 DOM을 읽거나 조작할 수 있다. content script들은 오로지 Chrome API들의 하위 집합들만 사용할 수 있지만 service worker와 메시지를 교환하면서 나머지 API에 간접적으로 액세스 할 수 있다.
• popup 과 다른 pages
  다양한 HTML 파일들도 포함시킬 수 있는데, popup, option page 혹은 다른 HTML 페이지들과 같은 것들이 포함될 수 있다. 이러한 모든 페이지들은 Chrome API들에 접근할 수 있다.

위의 언급한 내용들은 크롬 확장 프로그램을 개발하기 위해서 필요로 하는 가장 기초적인 지식으로 각 파일의 역할들과 기능들을 구분짓고 서로 상호작용 하도록 동작하게 생각해야 하는 힘을 기르는 것이 가장 중요한 것 같다.
다음에는 Chrome API들에 대해서 조금 더 공부하면서 현재 생각하고 있는 벨로그 확장 프로그램을 만들어 봐야겠다.