การสร้างส่วนติดต่อผู้ใช้ป๊อปอัปแบบโต้ตอบ
พัฒนาส่วนติดต่อผู้ใช้ป๊อปอัปแบบไดนามิกและตอบสนองโดยใช้ HTML, CSS และ JavaScript เพื่อให้ผู้ใช้โต้ตอบได้อย่างรวดเร็ว
การสร้างส่วนติดต่อผู้ใช้ป๊อปอัปแบบโต้ตอบ เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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.jsonvia"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!
เรียนรู้ JavaScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 12
- บทเรียน
- 48
คำถามที่พบบ่อย
บทเรียน “การสร้างส่วนติดต่อผู้ใช้ป๊อปอัปแบบโต้ตอบ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างส่วนติดต่อผู้ใช้ป๊อปอัปแบบโต้ตอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Browser Extensions Development (Chrome & Edge) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างส่วนติดต่อผู้ใช้ป๊อปอัปแบบโต้ตอบ”
พัฒนาส่วนติดต่อผู้ใช้ป๊อปอัปแบบไดนามิกและตอบสนองโดยใช้ HTML, CSS และ JavaScript เพื่อให้ผู้ใช้โต้ตอบได้อย่างรวดเร็ว คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างส่วนติดต่อผู้ใช้ป๊อปอัปแบบโต้ตอบ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม
ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้างส่วนติดต่อผู้ใช้ป๊อปอัปแบบโต้ตอบ
- การสร้างหน้าตัวเลือก
- การสื่อสารระหว่างองค์ประกอบส่วนติดต่อผู้ใช้
- การกำหนดธีมด้วย CSS และการรองรับโหมดมืด