0Pricing
Browser Extensions Development (Chrome & Edge) · Ders

Etkileşimli Açılır Pencere Arayüzü Oluşturma

Hızlı kullanıcı etkileşimleri sunmak için HTML, CSS ve JavaScript kullanarak dinamik ve duyarlı açılır pencere arayüzleri geliştirin.

Etkileşimli Açılır Pencere Arayüzü Oluşturma, CoddyKit'te ücretsiz bir Browser Extensions Development (Chrome & Edge) dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Browser Extensions Development (Chrome & Edge) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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!

Sıkça Sorulan Sorular

“Etkileşimli Açılır Pencere Arayüzü Oluşturma” dersi ücretsiz mi?

Evet — “Etkileşimli Açılır Pencere Arayüzü Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Browser Extensions Development (Chrome & Edge) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.

“Etkileşimli Açılır Pencere Arayüzü Oluşturma” dersinde ne öğreneceğim?

Hızlı kullanıcı etkileşimleri sunmak için HTML, CSS ve JavaScript kullanarak dinamik ve duyarlı açılır pencere arayüzleri geliştirin. Browser Extensions Development (Chrome & Edge) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Browser Extensions Development (Chrome & Edge) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Browser Extensions Development (Chrome & Edge), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Etkileşimli Açılır Pencere Arayüzü Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Browser Extensions Development (Chrome & Edge) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Browser Extensions Development (Chrome & Edge) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Etkileşimli Açılır Pencere Arayüzü Oluşturma
  2. Seçenekler Sayfası Oluşturma
  3. Kullanıcı Arayüzü Bileşenleri Arasında İletişim
  4. CSS ile Tema Oluşturma ve Koyu Mod Desteği
← Browser Extensions Development (Chrome & Edge) Sayfasına Dön