크롬 확장 프로그램 제작, 백그라운드, 콘텐츠 스크립트 구조와 사용법

크롬 확장 프로그램 만들기: 필수 파일과 폴더 구조 정리

크롬 확장 프로그램을 활용할 때 여러 기능을 한 화면에 사용하다 보면 불편할때가 있습니다. 모니터가 크면 사이드바 형태로 여러 확장 기능을 동시에 띄워두고 업무를 처리하기가 훨씬 수월해집니다. 대화면 모니터는 작업 공간을 넓혀 다양한 탭과 도구를 한눈에 관리할 수 있게 해 주어, 확장 프로그램 사용 효율을 높이는 데 도움이 됩니다.

업무 자동화 크롬 확장 프로그램 활용

최근에는 큰 모니터가 가격 부담도 없고 많이 보급되어, 가성비 좋은 제품들이 많습니다. 예를 들어, 32인치이상의 FHD 모니터는 넓은 화면과 선명한 화질을 제공하면서도 가격대가 합리적이라 많은 사무실과 재택근무 환경에서 적합한 제품이라고 생각합니다.. 이런 모니터를 활용하면 크롬 확장 프로그램과 다양한 웹 작업을 쾌적하게 수행할 수 있어 가능하면 큰 모니터를 추천드립니다.

크롬 확장 필수 파일과 폴더 구조 정리

my-chrome-extension/
├── manifest.json # 확장 프로그램의 '설계도'이자 핵심 설정 파일 (필수)
├── background.js # 백그라운드 스크립트 (Service Worker, 필수)
├── popup.html # 팝업 UI (선택 사항이지만 일반적)
├── popup.js # popup.html의 로직 (선택 사항)
├── popup.css # popup.html의 스타일 (선택 사항)
├── content.js # 웹 페이지에 직접 삽입되는 스크립트 (선택 사항)
├── styles.css # content.js가 웹 페이지에 삽입하는 스타일 (선택 사항)
├── icons/ # 확장 프로그램 아이콘 폴더 (필수)
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
└── (기타 선택적 파일들: options.html, preview.html 등)

각 파일의 역할 상세 설명

크롬 확장 프로그램 관리: chrome://extensions/

manifest.json (필수)

클롬 확장 프로그램에 필수 파일이며 모든 확장 프로그램이 처음 시작하는 코드입니다.

{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "1.0",
"description": "간단한 크롬 확장 프로그램",
"permissions": ["storage", "activeTab", "scripting"],
"host_permissions": ["all_urls"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["all_urls"],
"js": ["content.js"],
"css": ["styles.css"]
}
],
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}

• 역할: 확장 프로그램의 이름, 버전, 설명, 권한, 어떤 기능을 사용하는지 등을 정의하는 확장 프로그램의 “설계도”와 같은 파일입니다. 크롬이 확장 프로그램을 로드할 때 가장 먼저 읽는 파일입니다.
• 주요 내용:
  • manifest_version: 확장 프로그램 Manifest 버전을 지정 (현재는 3).
  • permissions: 확장 프로그램이 특정 브라우저 기능(예: `activeTab`, `storage`)이나 API에 접근할 수 있도록 허용하는 권한 목록.
  • action: 확장 프로그램 아이콘 클릭 시 팝업을 표시할지 여부, 기본 아이콘 등을 설정.
  • background: 백그라운드 스크립트(Service Worker)를 지정.
  • content_scripts: 특정 웹 페이지에 JavaScript 및 CSS를 삽입하여 페이지의 DOM을 읽거나 수정할 수 있도록 설정.

background.js (백그라운드 스크립트 / Service Worker, 필수)

백그라운드 스크립트는 확장 프로그램의 핵심 로직을 처리하는 Service Worker 기반 파일입니다. 브라우저 탭과는 독립적으로 작동하며, 이벤트 기반으로 잠시 실행되었다가 자동 종료됩니다

• 역할: 확장 프로그램의 “두뇌” 역할을 합니다. 특정 웹 페이지와는 독립적으로 백그라운드에서 실행되며, 브라우저 이벤트(탭 생성, 확장 프로그램 아이콘 클릭 등)를 수신하고 처리합니다.
• 특징 (Manifest V3 Service Worker):
  • 이벤트 기반으로 작동합니다. 필요한 순간에만 활성화되고, 유휴 상태일 때는 종료되어 리소스를 절약합니다.
  • 웹 페이지의 DOM에는 직접 접근할 수 없습니다. 웹 페이지와 통신하려면 메시징(`chrome.runtime.sendMessage` 등)을 사용해야 합니다.
  • 다른 확장 프로그램 구성 요소(팝업, 콘텐츠 스크립트 등) 간의 통신 허브 역할을 합니다.

popup.html, popup.js, popup.css (선택 사항)

확장 프로그램 아이콘을 클릭했을 때 나타나는 작은 팝업 창 UI를 구성하는 파일들입니다.

!DOCTYPE html
html
head
link rel="stylesheet" href="popup.css" /
/head
body
button id="clickBtn"클릭/button
script src="popup.js"/script
/body
/html

• popup.html: 확장 프로그램 아이콘 클릭 시 나타나는 팝업 창의 HTML 구조를 정의합니다.
• popup.js: 팝업 내의 버튼 클릭, 입력 값 처리 등 사용자 인터랙션을 담당합니다.

document.getElementById("clickBtn").addEventListener("click", () = {
alert("버튼 클릭됨!");
});

content.js (콘텐츠 스크립트, 선택 사항)

이 스크립트는 웹 페이지의 DOM을 조작하거나 특정 정보를 추출할 때 사용됩니다. 예: 특정 클래스의 텍스트를 추출하거나 버튼을 자동 클릭하는 기능 등.

document.body.style.backgroundColor = "#f0f0f0";

• 역할: 웹 페이지의 컨텍스트(환경) 내에서 실행되는 JavaScript 파일입니다. 웹 페이지의 HTML(DOM)을 읽거나 수정하고, CSS를 삽입하며, 웹 페이지의 동작에 영향을 줄 수 있습니다.
• 특징:
  • 팝업이나 백그라운드 스크립트와는 별개의 격리된 환경에서 실행됩니다.
  • 웹 페이지의 JavaScript 변수나 함수에 직접 접근할 수 없습니다. 통신하려면 메시징을 사용해야 합니다.

styles.css (선택 사항)

content.js가 삽입한 요소에 디자인을 적용할 수 있도록 만들어진 CSS 파일입니다.

.my-custom-banner {
background: #333;
color: white;
padding: 10px;
font-size: 16px;
}

• 역할: `content.js`를 통해 웹 페이지에 삽입되는 CSS 파일입니다. 콘텐츠 스크립트가 추가하거나 수정하는 HTML 요소들의 디자인을 정의할 때 사용됩니다.

1. icons/ (필수)
   • 역할: 확장 프로그램 아이콘 파일들을 저장하는 폴더입니다. 다양한 해상도의 아이콘(16×16, 48×48, 128×128 픽셀)을 준비하여 브라우저의 툴바 등에 표시됩니다.

기타 선택적 파일

• options.html, options.js: 확장 프로그램의 설정 페이지를 제공합니다. (`manifest.json`의 `options_page` 필드에 정의).
• devtools.html, devtools.js: 크롬 개발자 도구에 사용자 지정 패널을 추가할 수 있게 해줍니다.

크롬 확장 프로그램은 단순하고 작은 프로그램이지만 기능을 무한히 확장할 수 있는 잠재력을 지닌 도구입니다. 특히 `manifest.json`, `background.js`, `popup.html`, `content.js`의 조합은 확장 프로그램을 구성하는 핵심 뼈대입니다.이 구조를 이해하고, 기본적인 예제를 따라 만들기 시작하면 누구나 자신만의 브라우저 자동화 확장 기능을 구현할 수 있습니다.

크롬 확장 프로그램은 어떤 작업에 유용하게 활용될 수 있나요?

반복적인 브라우저 작업 자동화, 웹 정보 추출, UI 커스터마이징 등에 유용하며, 특히 AI 기능과 결합하면 업무 자동화와 효율 향상에 큰 도움이 됩니다.

확장 프로그램을 효과적으로 사용하려면 어떤 환경이 좋을까요?

대화면 모니터를 사용하면 여러 확장 기능을 사이드바로 띄워두고 동시에 작업하기 수월해집니다. 특히 32인치 이상의 FHD 모니터는 업무용으로 가성비가 좋아 추천됩니다.