Browser Extensions Development (Chrome & Edge) · บทเรียน

กายวิภาคของโครงการส่วนขยาย

ทำความรู้จักไฟล์และโฟลเดอร์มาตรฐานที่ประกอบกันเป็นส่วนขยายเบราว์เซอร์ Manifest V3 รวมถึงหน้าที่ของแต่ละรายการ

บทเรียน 4 จาก 413 ขั้นตอน

กายวิภาคของโครงการส่วนขยาย เป็นบทเรียน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ส่วนขยายเบราว์เซอร์คืออะไร
  2. การตั้งค่าสภาพแวดล้อมการพัฒนา
  3. ส่วนขยาย 'Hello World' แรกของคุณ
  4. กายวิภาคของโครงการส่วนขยาย
← กลับไปที่ Browser Extensions Development (Chrome & Edge)