Browser Extensions Development (Chrome & Edge) · 강의

옵션 페이지 구축

사용자가 확장 프로그램 설정과 환경 설정을 구성할 수 있는 영구적인 옵션 페이지를 설계하고 구현합니다.

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

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

Why Use an Options Page?

An options page is a dedicated UI for your extension where users can customize settings and preferences. Think of it as your extension's control panel!

It provides a persistent place for users to configure how your extension behaves.
Settings saved here stick around even if the browser closes.
It's different from a popup, which is for quick, transient interactions.

Basic Options HTML

Every options page starts with an HTML file. This file will contain the structure of your settings interface.

Create a file named options.html in your extension's root directory. It's just like any other HTML document.

<!DOCTYPE html>
<html>
<head>
  <title>My Extension Options</title>
  <link rel="stylesheet" href="options.css">
</head>
<body>
  <h1>Extension Settings</h1>
  <p>Customize your extension here.</p>
  <script src="options.js"></script>
</body>
</html>

Linking Options in Manifest

To tell your browser extension where its options page is, you need to declare it in your manifest.json file.

Use the options_page key, pointing to your HTML file. This makes the page accessible via the browser's extension management UI.

{
  "name": "My Options Extension",
  "version": "1.0",
  "manifest_version": 3,
  "options_page": "options.html"
}

Making Options Look Good

Just like any web page, you can style your options page using CSS to match your extension's branding or improve usability.

Create an options.css file and link it in your options.html. Here's a simple start:

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  min-width: 300px;
}
h1 {
  color: #333;
}
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

Saving User Preferences

To make settings persistent, we use the chrome.storage API. It allows your extension to store data that persists across browser sessions.

chrome.storage.sync stores data synced across devices, while chrome.storage.local stores data only on the current device. Let's use sync for settings.

// options.js
document.getElementById('saveButton').addEventListener('click', () => {
  const username = document.getElementById('usernameInput').value;
  chrome.storage.sync.set({ 'username': username }, () => {
    console.log('Username saved!');
    alert('Settings saved!');
  });
});

Loading Saved Preferences

When the options page opens, you'll want to load any previously saved settings to display them to the user.

Use chrome.storage.sync.get() to retrieve data. This should typically happen when the DOM content is fully loaded.

// options.js
document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.sync.get(['username'], (result) => {
    if (result.username) {
      document.getElementById('usernameInput').value = result.username;
    }
  });
});

Building a Dark Mode Toggle

Let's create a simple dark mode toggle. This example combines HTML, CSS, and JavaScript to save and load a user's preference for a dark theme.

We'll use a checkbox to control the theme and save its state using chrome.storage.sync.

<!DOCTYPE html>
<html>
<head>
  <title>Theme Options</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      min-width: 300px;
      transition: background-color 0.3s, color 0.3s;
    }
    body.dark-mode {
      background-color: #222;
      color: #eee;
    }
    h1 {
      color: #333;
    }
    body.dark-mode h1 {
      color: #eee;
    }
  </style>
</head>
<body>
  <h1>Theme Settings</h1>
  <label>
    <input type="checkbox" id="darkModeToggle">
    Enable Dark Mode
  </label>

  <script>
    const darkModeToggle = document.getElementById('darkModeToggle');

    // Load saved preference
    document.addEventListener('DOMContentLoaded', () => {
      chrome.storage.sync.get(['darkMode'], (result) => {
        darkModeToggle.checked = result.darkMode || false;
        document.body.classList.toggle('dark-mode', darkModeToggle.checked);
      });
    });

    // Save preference on change
    darkModeToggle.addEventListener('change', () => {
      const isDarkMode = darkModeToggle.checked;
      chrome.storage.sync.set({ 'darkMode': isDarkMode }, () => {
        document.body.classList.toggle('dark-mode', isDarkMode);
        console.log('Dark mode preference saved:', isDarkMode);
      });
    });
  </script>
</body>
</html>

How Users Open Options

Users can access your extension's options page in a few ways:

Right-click on your extension's icon in the toolbar and select 'Options'.
Go to the browser's extension management page (e.g., chrome://extensions), find your extension, and click 'Details', then 'Extension options'.

There's no default button in the popup, you need to add one if you want to link from there (covered in a later lesson on UI communication).

Options Page UX Tips

Good options pages are intuitive and easy to use. Here are some tips:

Provide Defaults: Always set sensible default values for your settings.
Instant Feedback: Show a 'Saved!' message after settings are changed.
Clear Labels: Use descriptive text for input fields and checkboxes.
Organize: Group related settings logically, especially for complex extensions.

Options Page Check

Let's check your understanding of options pages and how they work.

Options Page Recap

Great job! You've learned how to build a persistent options page for your browser extension.

An options page lets users customize settings.
It's declared using options_page in manifest.json.
You use chrome.storage.sync or local to save and load preferences.
Good UX is key for a user-friendly options page.

Next, we'll explore how different parts of your extension can communicate with each other!

자주 묻는 질문

“옵션 페이지 구축” 강의는 무료인가요?

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

“옵션 페이지 구축”에서 뭘 배우나요?

사용자가 확장 프로그램 설정과 환경 설정을 구성할 수 있는 영구적인 옵션 페이지를 설계하고 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Browser Extensions Development (Chrome & Edge)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“옵션 페이지 구축” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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