กายวิภาคของโครงการส่วนขยาย
ทำความรู้จักไฟล์และโฟลเดอร์มาตรฐานที่ประกอบกันเป็นส่วนขยายเบราว์เซอร์ Manifest V3 รวมถึงหน้าที่ของแต่ละรายการ
กายวิภาคของโครงการส่วนขยาย เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Browser Extensions Development (Chrome & Edge) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
Extensions Are Just Web Files
An extension is just a bundle of HTML, CSS, JavaScript, and a config file, which the browser loads in a special, extra-capable context.
The manifest.json Heart
Every extension needs a manifest.json at its root — it declares name, version, permissions, and scripts. Without it, the browser ignores the folder.
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0"
}A Typical Folder Structure
Layout is flexible, but a clean folder structure stays maintainable: manifest at root, plus popup, background, content, and icons folders.
The Background Service Worker
In Manifest V3, background logic runs as a service worker. It handles events even with no UI open, but unloads when idle to save memory.
{
"background": {
"service_worker": "background.js"
}
}The Popup Action
The action defines the toolbar button and the popup it opens — itself just a tiny HTML page. The config below shows both fields.
{
"action": {
"default_popup": "popup/popup.html",
"default_title": "Open My Extension"
}
}Content Scripts
Content scripts run inside web pages so your extension can read and modify the DOM. You scope them with URL match patterns.
{
"content_scripts": [{
"matches": ["https://*.example.com/*"],
"js": ["content/main.js"]
}]
}Icons in Multiple Sizes
Provide your icon in several sizes — browsers show it in different places at different resolutions, so it stays crisp everywhere.
{
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}Declaring Permissions
The permissions array lists the browser APIs you need, like storage or tabs. Request only what you actually use.
{
"permissions": ["storage", "activeTab"]
}Web-Accessible Resources
If a web page must load a file packaged in your extension, list it under web_accessible_resources — otherwise the browser blocks access.
{
"web_accessible_resources": [{
"resources": ["images/logo.png"],
"matches": ["https://*.example.com/*"]
}]
}How Pieces Communicate
Popup, content scripts, and service worker live in separate contexts, so they talk via the messaging API, not shared variables.
chrome.runtime.sendMessage({ type: 'PING' })Keeping It Organized
As it grows, group related files into folders and keep manifest.json lean. A predictable layout makes debugging and store review easier.
Quick Check
Check what you remember about extension structure.
Recap
You toured the building blocks: manifest.json declares all, a service worker runs background, the action drives the popup, content scripts touch 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 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กายวิภาคของโครงการส่วนขยาย”
ทำความรู้จักไฟล์และโฟลเดอร์มาตรฐานที่ประกอบกันเป็นส่วนขยายเบราว์เซอร์ Manifest V3 รวมถึงหน้าที่ของแต่ละรายการ คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “กายวิภาคของโครงการส่วนขยาย” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม
ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ส่วนขยายเบราว์เซอร์คืออะไร
- การตั้งค่าสภาพแวดล้อมการพัฒนา
- ส่วนขยาย 'Hello World' แรกของคุณ
- กายวิภาคของโครงการส่วนขยาย