Browser Extensions Development (Chrome & Edge) · 강의

첫 번째 'Hello World' 확장 프로그램

매니페스트 파일, 기본 구조 및 브라우저에 로드하는 방법을 다루며 최소한의 'Hello World' 확장 프로그램을 만듭니다.

레슨 3/412개 단계

첫 번째 'Hello World' 확장 프로그램은(는) CoddyKit의 무료 Browser Extensions Development (Chrome & Edge) 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Browser Extensions Development (Chrome & Edge) 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Your First Extension: Hello World

Time to build your first extension — a classic Hello World popup that greets you when you click its toolbar icon. The core Manifest V3 shape.

Core Extension Components

Every extension needs a few key files: manifest.json (the blueprint), popup.html (the popup content), and an icon. We'll build them step by step.

Manifest.json: The Blueprint

The manifest.json is the most important file — JSON metadata like name, version, and permissions, in the structure Manifest V3 expects.

Essential Manifest Fields

Start your manifest with three required fields: manifest_version 3, a name, and a version. The snippet below shows the minimal shape.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0"
}

Adding Description & Icons

Add a description and an icons map so users understand and recognize your extension. Provide several sizes like 16, 48, and 128 pixels.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple 'Hello World' extension for CoddyKit.",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

Defining the Popup with 'action'

The action field defines the toolbar button: default_popup points to your popup HTML, and default_icon sets the toolbar image.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple 'Hello World' extension for CoddyKit.",
  "icons": { "16": "icon16.png" },
  "action": {
    "default_popup": "popup.html",
    "default_icon": { "16": "icon16.png" }
  }
}

Creating popup.html

Create popup.html — a plain HTML file holding your Hello World message. Keep it small and light, since it shows in a tiny popup window.

<!DOCTYPE html>
<html>
<head>
  <title>Hello World Popup</title>
  <style>
    body { font-family: sans-serif; padding: 15px; width: 150px; }
    h1 { font-size: 1.2em; color: #333; margin: 0; }
  </style>
</head>
<body>
  <h1>Hello, CoddyKit!</h1>
</body>
</html>

Your Extension's Folder Structure

Your folder should now hold manifest.json, popup.html, and the icons, all directly inside — a clean layout the browser can load correctly.

Loading Your Extension (Chrome)

Load it in Chrome or Edge: open chrome://extensions, flip on Developer mode, click Load unpacked, and pick your folder. It joins the list!

Test Your New Extension!

Spot your extension's icon in the toolbar and click it — a popup appears reading "Hello, CoddyKit!" from your popup.html. First extension done!

Quick Check: Manifest V3

Which field is absolutely essential to declare the manifest format version in manifest.json for a Manifest V3 extension?

인터랙티브 레슨에서 답해보세요

Recap: Your First Extension

You built and loaded a real extension: a manifest with key fields, an action popup, a popup.html, all run via Developer mode. Keep tinkering!

무료로 시작

AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 12
레슨: 48

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“첫 번째 'Hello World' 확장 프로그램” 강의는 무료인가요?

네 — “첫 번째 'Hello World' 확장 프로그램” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Browser Extensions Development (Chrome & Edge) 강의 전체를 잠금 해제할 수 있습니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.

“첫 번째 'Hello World' 확장 프로그램”에서 뭘 배우나요?

매니페스트 파일, 기본 구조 및 브라우저에 로드하는 방법을 다루며 최소한의 'Hello World' 확장 프로그램을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Browser Extensions Development (Chrome & Edge)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Browser Extensions Development (Chrome & Edge)을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Browser Extensions Development (Chrome & Edge)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“첫 번째 'Hello World' 확장 프로그램” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Browser Extensions Development (Chrome & Edge) 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Browser Extensions Development (Chrome & Edge) 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Browser Extensions Development (Chrome & Edge)(으)로 돌아가기