크롬(Chrome) 확장 프로그램을 만드는 일은 생각보다 어렵지 않습니다. 몇 개의 파일만 작성하면 누구나 자신만의 확장 프로그램을 만들어 브라우저를 원하는 대로 활용할 수 있습니다.
확장 프로그램이 정상적으로 작동하려면 브라우저가 인식할 수 있는 기본 구성 요소들이 필요합니다. 이 글에서는 필수 파일 작성법부터, 스토어에 업로드하거나 다른 사람에게 공유하지 않고도 내 컴퓨터의 크롬에서 바로 사용하는 방법까지 모두 소개합니다.
물론 실제로 배포되는 복잡한 확장 프로그램은 훨씬 많은 과정을 거치지만, 기본 원리는 지금 소개할 내용과 동일합니다. 오늘 바로 사용할 수 있는 크롬 확장 프로그램을 만드는 방법을 함께 살펴보겠습니다.
팁: 내가 만든 확장 프로그램이 어떤 모습일지 감을 잡고 싶다면, 인기 있는 추천 크롬 확장 프로그램들을 먼저 살펴보는 것도 좋은 방법입니다.
크롬 확장 프로그램 만드는 방법
이 가이드에서는 즐겨 찾는 웹사이트 목록을 보여 주는 간단한 확장 프로그램을 만들어 보겠습니다. 링크와 디자인을 자유롭게 수정할 수 있어서, 응용하기도 매우 쉽습니다.
1단계: 폴더와 기본 파일 준비하기
- 확장 프로그램을 구성하는 모든 파일을 담을 새 폴더를 하나 만듭니다.
- 확장 프로그램에 반드시 필요한 기본 파일 4개를 생성합니다: manifest.json, popup.html, background.html, styles.css
- 텍스트 편집기(VS Code, 메모장 등)로 popup.html을 연 뒤, 아래 코드를 전부 붙여넣고 저장합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Favorite Sites</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<ul id="myUL">
<li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
<li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
<li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
</ul>
</body>
</html>링크 주소와 링크 텍스트는 마음껏 수정하세요. 예제와 똑같이 만들고 싶다면 그대로 두어도 됩니다.
2단계: manifest.json 작성하기
텍스트 편집기로 manifest.json을 열고 아래 내용을 복사해 붙여넣습니다.
{
"update_url": "https://clients2.google.com/service/update2/crx",
"manifest_version": 2,
"name": "Favorite Sites",
"description": "All my favorite websites.",
"version": "1.0",
"icons": {
"16": "icon.png",
"32": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Favorite Sites",
"default_popup": "popup.html"
}
}이 코드에서 자유롭게 수정할 수 있는 부분은 name(확장 프로그램 이름), description(설명), default_title(마우스를 올렸을 때 표시되는 제목)입니다.
참고: 위 예제는 Manifest V2 기반입니다. 현재 Chrome 웹 스토어에 배포하려면 Manifest V3가 요구되지만, 개인적으로 학습·사용하는 용도라면 이대로 따라 해도 문제없이 작동합니다.
3단계: styles.css로 디자인 입히기
styles.css 파일을 열고 아래 코드를 붙여넣습니다. 이 코드는 팝업 메뉴를 깔끔하게 꾸며 주어 보기 좋고 사용하기 편한 인터페이스를 만들어 줍니다.
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 300px;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
font-family: 'Noto Sans', sans-serif;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}CSS 파일에서 바꿀 수 있는 부분은 무궁무진합니다. 일단 확장 프로그램을 완성한 뒤, 색상·글꼴·여백 등을 하나씩 조정하면서 자신만의 스타일로 다듬어 보세요.
4단계: 아이콘 만들기
- 확장 프로그램용 아이콘 이미지를 만들고 파일 이름을 icon.png로 저장한 뒤, 앞서 만든 확장 프로그램 폴더 안에 넣습니다.
- 위의 manifest.json 코드에서 확인할 수 있듯이, 16×16픽셀, 32×32픽셀 등 크기별로 서로 다른 아이콘을 지정할 수도 있습니다.
팁: 구글 공식 개발자 문서에는 크롬 확장 프로그램 제작에 관한 더 자세한 정보와 고급 옵션, 다양한 예제가 정리되어 있습니다. 여기서 소개한 기본 단계를 넘어선 기능을 구현하고 싶다면 꼭 참고해 보세요.
만든 확장 프로그램을 크롬에 추가하는 방법
확장 프로그램 제작이 끝났다면, 이제 브라우저에 직접 불러와 실제로 사용해 볼 차례입니다. 커스텀 확장 프로그램은 일반 확장 프로그램을 설치하는 방식과는 다른 절차를 거칩니다.
- 크롬 메뉴에서 도구 더보기 > 확장 프로그램으로 이동하거나, 주소창에 chrome://extensions/를 입력합니다.
- 개발자 모드(Developer mode) 스위치가 꺼져 있다면 켜 줍니다. 이 특수 모드가 활성화되어야 직접 만든 확장 프로그램을 가져올 수 있습니다.
- 페이지 상단의 압축해제된 확장 프로그램을 로드합니다(Load unpacked) 버튼을 클릭하고, 1단계에서 만든 폴더를 선택합니다.
- 확인 창이 뜨면 수락합니다. 이후 브라우저 우측 상단에 다른 확장 프로그램들과 함께 내가 만든 확장 프로그램 아이콘이 나타납니다.
내 크롬 확장 프로그램 편집하기
이제 확장 프로그램을 사용할 수 있게 되었으니, 취향에 맞게 자유롭게 수정해 보세요.
styles.css 파일은 확장 프로그램의 외관을 결정합니다. 목록 스타일 전체를 조정하거나 글꼴 색상·종류를 변경할 수 있습니다. CSS로 할 수 있는 다양한 작업을 배우고 싶다면 W3Schools가 가장 좋은 학습 자료 중 하나입니다.
웹사이트 목록의 순서를 바꾸거나 새 사이트를 추가하고 기존 항목을 삭제하려면 popup.html 파일을 수정하면 됩니다. 단, 편집은 URL과 링크 텍스트에 한정해야 합니다. <li>, <html> 같은 태그는 페이지 구조에 필수적인 요소이므로 함부로 변경하면 안 됩니다. HTML 문법을 더 깊이 배우고 싶다면 W3Schools의 HTML 튜토리얼을 활용해 보세요.