Travailleurs de service en arrière-plan
Apprenez comment les travailleurs de service en arrière-plan gèrent les événements, la logique persistante et le cycle de vie de votre extension.
Travailleurs de service en arrière-plan est une leçon Browser Extensions Development (Chrome & Edge) gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Browser Extensions Development (Chrome & Edge), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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!
Questions Fréquemment Posées
La leçon « Travailleurs de service en arrière-plan » est-elle gratuite ?
Oui — le texte complet de « Travailleurs de service en arrière-plan » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Browser Extensions Development (Chrome & Edge), passe à CoddyKit PRO. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Travailleurs de service en arrière-plan » ?
Apprenez comment les travailleurs de service en arrière-plan gèrent les événements, la logique persistante et le cycle de vie de votre extension. Tu pratiques Browser Extensions Development (Chrome & Edge) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Browser Extensions Development (Chrome & Edge) ?
Aucune expérience préalable n'est requise. Browser Extensions Development (Chrome & Edge) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Travailleurs de service en arrière-plan » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Browser Extensions Development (Chrome & Edge) ?
Oui. Chaque leçon Browser Extensions Development (Chrome & Edge) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Comprendre la structure de Manifest V3
- Travailleurs de service en arrière-plan
- Autorisations et correspondance des hôtes
- Action, icônes et bouton de la barre d’outils