Chrome Extension이란?

Chrome Extension은 쉽게 말하면 Chrome 브라우저에 기능을 추가하는 작은 프로그램이다.

일반 웹사이트는 사용자가 해당 페이지에 접속해야 동작한다.

반면 Chrome Extension은 브라우저에 설치되어 있다가, 사용자가 특정 페이지를 열거나 확장 프로그램 버튼을 누르거나 특정 조건이 발생했을 때 동작할 수 있다.

일반 웹앱:
사용자가 사이트에 접속해야 동작

Chrome Extension:
브라우저에 설치되어 여러 웹페이지 위에서 동작 가능

예를 들어 번역 확장 프로그램은 사용자가 어떤 웹페이지에 있든 현재 페이지의 텍스트를 읽고 번역 기능을 제공할 수 있다.

Chrome Extension은 어디에 쓰일까?

Chrome Extension은 보통 “웹페이지 위에 기능을 덧붙이는 도구”로 많이 쓰인다.

예를 들면 이런 식이다.

현재 페이지의 텍스트를 읽고 요약하기
웹페이지에 버튼이나 사이드바 추가하기
특정 사이트의 UI를 조금 바꾸기
사용자가 선택한 텍스트를 번역하기
브라우저 툴바에 작은 팝업 띄우기
백그라운드에서 알림 보내기

즉, Extension은 단순한 웹앱과 다르게 브라우저 자체와 현재 보고 있는 페이지 사이에 끼어들 수 있는 기능을 가진다.

그래서 편리하지만, 그만큼 권한과 보안도 중요하다.

Chrome Extension 기본 구조

간단한 Extension은 이런 식으로 시작할 수 있다.

my-extension/
  ├─ manifest.json
  ├─ popup.html
  ├─ popup.js
  ├─ content.js
  └─ background.js

각 파일의 역할은 대략 이렇다.