Browser Extensions Development (Chrome & Edge) · 강의

대화형 팝업 UI 만들기

HTML, CSS 및 JavaScript를 사용하여 동적이고 반응형인 팝업 인터페이스를 개발하고 빠른 사용자 상호 작용을 제공합니다.

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

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

What are Extension Popups?

Browser extensions often need a small user interface to interact with. This is where popup pages come in!

A popup is a small window that appears when you click your extension's icon in the browser toolbar.
It's perfect for quick actions, displaying information, or simple settings.
Popups are temporary: they close automatically when you click outside them or switch tabs.

Declaring Your Popup UI

To tell your browser extension which HTML file to use as its popup, you specify it in your manifest.json file.

You use the "action" key, and then "default_popup" points to your HTML file.

{
  "manifest_version": 3,
  "name": "My Popup Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

Popup's HTML Structure

Your popup is essentially a miniature web page. It uses standard HTML to define its structure and content.

Create a file named popup.html (or whatever you set in manifest.json) and add your HTML.

<!DOCTYPE html>
<html>
<head>
  <title>My Popup</title>
</head>
<body>
  <h1>Hello from Popup!</h1>
  <p>This is your extension's user interface.</p>
</body>
</html>

Styling Your Popup with CSS

Just like any web page, you can use CSS to style your popup. Link a CSS file in your popup.html's <head> section.

Keep popup styles concise for a small, focused UI.

/* popup.css */
body {
  font-family: sans-serif;
  width: 200px; /* Keep popups small */
  padding: 10px;
  background-color: #f0f0f0;
}
h1 {
  color: #333;
  font-size: 1.2em;
}

Adding Interactivity with JavaScript

To make your popup dynamic and responsive, you'll need JavaScript. Link your script file in your popup.html, usually before the closing </body> tag.

This script runs every time the popup is opened.

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Popup script loaded!');
  // Your interactive code goes here
});

Understanding Popup Script Execution

When a user clicks your extension icon, the browser loads and executes your popup.html and its linked JavaScript.

Each time the popup opens, the script runs from scratch.
It has access to standard web APIs (DOM, fetch) and specific browser extension APIs (chrome.*).
When the popup closes, its JavaScript context is destroyed.

Example: Simple Click Counter

Let's create a basic popup that counts how many times a button is clicked.

For this to work, your popup.html needs a <span id="count"> and a <button id="increment">.

// popup.js
let count = 0;
document.addEventListener('DOMContentLoaded', () => {
  const countDisplay = document.getElementById('count');
  const incrementButton = document.getElementById('increment');

  countDisplay.textContent = count;

  incrementButton.addEventListener('click', () => {
    count++;
    countDisplay.textContent = count;
  });
});

Accessing Browser Extension APIs

Popup scripts can directly use many chrome.* APIs to interact with the browser, tabs, and extension itself.

For example, you can get information about your extension using chrome.runtime.getManifest().

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  const manifest = chrome.runtime.getManifest();
  const versionElement = document.getElementById('version');
  if (versionElement) {
    versionElement.textContent = `v${manifest.version}`;
  }
  console.log('Extension Name:', manifest.name);
});

Popup Best Practices

Since popups are temporary, it's crucial to keep them lightweight and performant.

Keep it small: A popup should have a clear, single purpose.
Fast loading: Avoid heavy images or complex computations.
Responsive design: Ensure it looks good on various screen sizes.
Minimize network requests: Fetch data efficiently or pre-fetch in the background script if possible.

Popup Knowledge Check

Let's test your understanding of extension popups.

Recap: Interactive Popups

Great job! You've learned the fundamentals of creating interactive popup UIs for your browser extensions.

Popups are small, temporary UIs linked in manifest.json via "action".
They use standard HTML, CSS, and JavaScript.
Popup scripts run when the popup opens and are destroyed when it closes.
They can access browser extension APIs for dynamic interactions.

Next, you'll explore how to build more persistent configuration UIs with Options Pages!

자주 묻는 질문

“대화형 팝업 UI 만들기” 강의는 무료인가요?

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

“대화형 팝업 UI 만들기”에서 뭘 배우나요?

HTML, CSS 및 JavaScript를 사용하여 동적이고 반응형인 팝업 인터페이스를 개발하고 빠른 사용자 상호 작용을 제공합니다. 브라우저에서 직접 실행하는 실습 코드로 Browser Extensions Development (Chrome & Edge)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“대화형 팝업 UI 만들기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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