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

เว็บเวิร์กเกอร์บริการเบื้องหลัง

เรียนรู้วิธีที่เว็บเวิร์กเกอร์บริการเบื้องหลังจัดการเหตุการณ์ ตรรกะที่คงอยู่ และวงจรการทำงานภายในส่วนขยาย

บทเรียน 2 จาก 410 ขั้นตอน

เว็บเวิร์กเกอร์บริการเบื้องหลัง เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Browser Extensions Development (Chrome & Edge) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Extension's Brain: Service Workers

Welcome to the core of your Manifest V3 extension: Background Service Workers! Think of them as the silent brain of your extension.

They're responsible for listening to browser events, managing persistent logic, and ensuring your extension runs efficiently without constantly consuming resources.

MV3: Why Service Workers?

In Manifest V2, extensions often used 'persistent background pages' that ran constantly. Manifest V3 introduced service workers as a more modern, energy-efficient alternative.

  • Event-Driven: They only wake up when an event occurs.
  • Temporary: They go idle and terminate when not needed.
  • Energy-Saving: This 'sleep-wake' cycle saves battery and memory.

Declaring Your Service Worker

To use a service worker, you must declare it in your manifest.json file. This tells the browser which JavaScript file acts as your background script.

It's specified under the 'background' key, pointing to your service worker script.

{
  "manifest_version": 3,
  "name": "My Service Worker Extension",
  "version": "1.0",
  "background": {
    "service_worker": "service-worker.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

Service Worker Lifecycle

Unlike a traditional always-on program, a service worker has a dynamic lifecycle:

  • It activates when an event it's listening for occurs.
  • It runs its associated tasks.
  • After a period of inactivity (usually a few seconds), it goes idle and eventually terminates.

It will reactivate the next time an event triggers it.

Listening for Events

Service workers primarily function by listening for browser events using the chrome API. When an event fires, your worker code springs into action!

Common events include:

  • chrome.runtime.onInstalled: When the extension is installed or updated.
  • chrome.action.onClicked: When the extension's toolbar icon is clicked.

Event: On Extension Installed

Let's write a simple service worker that logs a message when your extension is first installed or updated. This is a great place for one-time setup tasks.

Create a file named service-worker.js:

// service-worker.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('CoddyKit Extension installed or updated!');
  // You could set default preferences here
  chrome.storage.sync.set({ 'theme': 'light' });
});

Event: On Extension Icon Click

Another common event is when the user clicks your extension's icon in the browser toolbar. You can make your service worker respond to this interaction, for example, by opening a new tab.

// service-worker.js
chrome.action.onClicked.addListener((tab) => {
  console.log('Extension icon clicked! Current tab ID:', tab.id);
  // Open a new tab to a specific URL
  chrome.tabs.create({ url: 'https://www.google.com/search?q=CoddyKit' });
});

Debugging Your Service Worker

To see your console.log messages and debug your service worker, you'll use the browser's Developer Tools.

In Chrome/Edge, go to chrome://extensions, enable 'Developer mode', find your extension, and click the 'service worker' link to open its dedicated DevTools window.

Quick Check: Service Worker Role

What is a key characteristic of Manifest V3 background service workers compared to Manifest V2 background pages?

Recap: Background Service Workers

Great job! You've learned about the fundamental role of Background Service Workers in Manifest V3 extensions:

  • They are the event-driven 'brains' of your extension.
  • They are declared in manifest.json.
  • They have a temporary lifecycle, waking for events and then terminating.
  • You use event listeners (e.g., chrome.runtime.onInstalled, chrome.action.onClicked) to make them react to browser events.

Next, we'll dive into how permissions control what your extension can do!

เริ่มต้นได้ฟรี

เรียนรู้ 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 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เว็บเวิร์กเกอร์บริการเบื้องหลัง”

เรียนรู้วิธีที่เว็บเวิร์กเกอร์บริการเบื้องหลังจัดการเหตุการณ์ ตรรกะที่คงอยู่ และวงจรการทำงานภายในส่วนขยาย คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “เว็บเวิร์กเกอร์บริการเบื้องหลัง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม

ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. ทำความเข้าใจโครงสร้าง Manifest V3
  2. เว็บเวิร์กเกอร์บริการเบื้องหลัง
  3. สิทธิ์และการจับคู่โฮสต์
  4. การดำเนินการ ไอคอน และปุ่มแถบเครื่องมือ
← กลับไปที่ Browser Extensions Development (Chrome & Edge)