크롬 확장 프로그램 : 무엇이고 어떻게 만들까요?

크롬 확장 프로그램은 크롬 브라우저에 필요한 기능을 덧붙이는 프로그램입니다. 다른 사이트를 새로 만드는 것보다 지금 보고 있는 웹페이지에서 저장하거나 정보를 띄우는 일이 필요할 때 쓸 수 있습니다. 제 경우에는 광고 이미지를 모으는 도구와 발표 타이머를 만들면서 크롬 확장을 어디에 쓰고 어떤 순서로 만드는지 확인했습니다. 비개발자가 AI와 함께 도구를 만드는 과정은 AI 바이브코딩에 따로 정리했습니다.

크롬 확장 프로그램은 웹앱과 무엇이 다른가요?

웹앱은 주소를 열어 그 안에서 쓰고, 크롬 확장 프로그램은 지금 보고 있는 웹페이지에서 바로 기능을 실행할 때 씁니다. 둘 중 무엇을 만들지 정할 때는 기능의 크기보다 사용자가 어느 화면에서 그 기능을 써야 하는지를 먼저 보면 이해하기 쉽습니다.

제 경우에는 광고 레퍼런스를 모으는 도구를 처음부터 웹앱과 크롬 확장으로 나눠 만들었습니다. 웹앱에서는 이미지를 넣은 뒤 보드에서 라벨을 붙이고 정리할 수 있었습니다. 하지만 다른 사이트에서 광고 이미지를 보다가 바로 저장하려면 웹앱으로 다시 이동해야 했습니다. 그래서 이미지에 우클릭하면 현재 보드로 보내는 기능은 크롬 확장으로 만들었습니다.

이 사례에서는 웹앱과 크롬 확장의 역할이 분명했습니다. 별도 화면에서 정리하고 관리하는 일은 웹앱이 맡고, 다른 사이트를 보던 흐름을 끊지 않고 바로 실행해야 하는 일은 크롬 확장이 맡았습니다.

크롬 확장 프로그램으로 웹페이지에 기능을 추가할 수 있나요?

크롬 확장 프로그램은 웹페이지 위에 정보를 띄우거나 현재 페이지에서 바로 동작하는 기능을 추가할 수 있습니다. 앞에서 본 우클릭 저장처럼 사용자의 행동을 추가할 수도 있고, 지금 보고 있는 화면 위에 필요한 정보를 보여 줄 수도 있습니다. 이때 확장이 어느 페이지에서 무엇을 할 수 있는지는 권한으로 정합니다.

이 구조를 확인하기 위해 만든 사례가 발표 타이머였습니다. 발표할 때 별도 타이머 페이지를 번갈아 보는 대신 Google Slides 같은 웹 슬라이드 위에 시간을 바로 띄우는 방식으로 계획했습니다. 기본 목표 시간은 5분으로 두고, 남은 시간이 60초 이하가 되면 색을 바꾸고 10초 이하에서는 깜빡이도록 했습니다.

크롬 확장의 권한은 프로그램이 브라우저 안에서 어디까지 할 수 있는지를 정하는 허용 범위입니다. 발표 타이머에서는 값을 저장하기 위한 storage와 현재 탭을 다루기 위한 activeTab을 두고, 여러 슬라이드 사이트에서 쓸 수 있도록 접근할 웹사이트 범위도 함께 정했습니다.

크롬 확장 프로그램은 어떤 파일이 필요한가요?

크롬 확장 프로그램은 여러 파일을 묶어 하나의 기능으로 만들며, 그중 manifest.json은 크롬에게 이 프로그램이 무엇인지 알려 주는 기본 설정 파일입니다. 이 파일에는 확장의 이름과 버전, 어떤 권한이 필요한지, 어떤 파일을 실행할지를 적습니다. Manifest V3는 이런 크롬 확장 프로그램을 만드는 현재 형식의 이름입니다.

발표 타이머에서는 먼저 manifest.json과 16, 48, 128 크기의 아이콘을 준비했습니다. 그다음 사용자가 보는 설정 화면과 실제로 움직이는 기능을 파일로 나눴습니다. popup.html은 크롬 툴바에서 확장 아이콘을 눌렀을 때 열리는 작은 설정 화면이고, overlay.js는 웹페이지 위에 타이머가 보이도록 동작하는 파일입니다.

설정 화면에서는 목표 시간, 카운트다운과 카운트업, 시작과 리셋, 타이머 표시 여부를 고르게 했습니다. 이렇게 고른 값과 타이머가 실행 중인지 같은 상태는 chrome.storage.local에 저장하도록 계획했습니다. 이름은 길지만, 크롬 안에 필요한 값을 기억해 두는 저장 공간이라고 이해하면 됩니다. 크롬 확장 프로그램은 브라우저 저장소에 데이터를 보관하거나 로그인 기능을 붙여 클라우드와 동기화할 수 있습니다.

처음부터 모든 파일 이름을 외울 필요는 없습니다. 먼저 사용자가 보는 화면, 실제로 움직이는 기능, 저장해야 하는 값으로 나누고 나면 어떤 파일이 필요한지도 따라오기 쉬웠습니다.

AI 코딩 에이전트로 크롬 확장 프로그램을 어떻게 만드나요?

AI 코딩 에이전트는 필요한 기능을 작은 작업으로 나누고, 파일을 만든 뒤 각 단계가 제대로 동작하는지 확인하는 방식으로 쓸 수 있습니다. AI 코딩 에이전트는 질문에 코드만 답하는 도구보다 한 단계 더 나아가 파일을 만들고 수정하면서 작업을 이어 가는 AI 도구입니다.

제 경우에는 발표 타이머 전체를 한 번에 만들어 달라고 하지 않았습니다. 먼저 시간 계산처럼 화면 없이도 확인할 수 있는 부분을 따로 만들었습니다. 그다음 Vitest라는 테스트 도구로 15개 항목을 확인했고 모두 통과했습니다. 이후 기본 설정 파일, 아이콘, 화면을 차례로 연결했습니다.

이렇게 나눈 이유는 문제가 생겼을 때 어디서 잘못됐는지 찾기 쉽기 때문입니다. 시간 계산이 맞는지, 값이 저장되는지, 화면에 제대로 보이는지를 한꺼번에 확인하면 어느 부분을 고쳐야 할지 알기 어렵습니다. 작업을 나누고 단계별로 확인하는 방식은 Claude Code와 Claude 스킬 활용에서도 이어집니다.

다만 AI 코딩 에이전트가 코드를 만들고 자동 테스트가 통과했다고 해서 실제 사용까지 확인된 것은 아닙니다. 다음 단계에서는 만든 확장을 직접 크롬에 넣고 사람이 써 봐야 합니다.

크롬 확장 프로그램은 어떻게 직접 설치하나요?

직접 만든 크롬 확장 프로그램은 폴더를 준비한 뒤 크롬의 개발자 모드에서 압축해제된 확장 프로그램으로 불러오면 실행할 수 있습니다. 처음부터 크롬 웹스토어에 올리지 않아도 내 컴퓨터나 전달받은 파일로 먼저 확인할 수 있습니다.

제 경우에는 광고 레퍼런스 보드 확장을 다른 사람도 설치할 수 있도록 안내문을 만들었습니다. 압축파일을 푼 뒤 크롬 주소창에 chrome://extensions를 입력하고, 오른쪽 위의 개발자 모드를 켭니다. 그다음 압축해제된 확장 프로그램을 불러와 방금 푼 폴더를 선택하도록 적었습니다. 이미 열려 있던 웹페이지에서는 설치 뒤 한 번 새로고침하도록 안내했습니다.

설치가 됐다고 확인이 끝난 것도 아닙니다. 발표 타이머에서는 시간 계산 테스트 15개가 모두 통과했지만 Google Slides에서 타이머가 실제로 보이는지, 위치를 옮긴 뒤 새로고침해도 그 자리에 있는지, 다른 탭에 갔다 돌아와도 시간이 맞는지는 사람이 직접 확인해야 하는 항목으로 남겼습니다.

그래서 크롬 확장 프로그램은 코드가 실행되는지와 실제 사용 상황에서 제대로 움직이는지를 나눠 확인하는 편이 좋습니다.

크롬 확장 프로그램은 어떻게 만들면 되나요?

크롬 확장 프로그램은 웹페이지에서 바로 필요한 기능을 정한 뒤, 필요한 파일과 권한을 구성하고, AI 코딩 에이전트로 구현한 다음 실제 크롬에서 확인하는 순서로 만들 수 있습니다. 처음 보는 사람이라면 코드부터 보기보다 먼저 웹앱으로 만들 일인지 크롬 확장으로 만들 일인지 가르는 것이 시작점입니다.

그다음 화면에서 바로 실행할 기능을 정하고, 화면과 동작과 저장을 나눕니다. 이후 manifest.json을 중심으로 필요한 파일을 연결하고 작은 단위부터 테스트합니다. 마지막에는 직접 크롬에 설치해 실제 웹페이지에서 써 봅니다.

제 경우에는 광고 레퍼런스 보드로 웹앱과 크롬 확장의 역할을 나눠 봤고, 발표 타이머로 파일 구성과 구현, 테스트 과정을 따라가 봤습니다. 비개발자가 이 과정에서 코드를 어디까지 이해해야 하는지는 AI PM 코딩 능력에서 확인할 수 있습니다.