Gérer et contrôler les onglets
Créez, mettez à jour, fermez et interrogez les onglets du navigateur par programmation afin d’offrir de puissantes fonctions de gestion des onglets.
Gérer et contrôler les onglets est une leçon Browser Extensions Development (Chrome & Edge) gratuite sur CoddyKit. Ceci est la leçon 1 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.
Introduction to Tab Management
Browser extensions can do more than just change web pages. They can also manage the browser itself!
This lesson explores how to programmatically control browser tabs. You'll learn to create, query, update, and close tabs using the Chrome Extensions API.
The chrome.tabs API
The core of tab management is the chrome.tabs API. It provides methods to interact with all open tabs in the browser, or even specific ones.
To use most of its functions, your extension needs the "tabs" permission declared in its manifest.json file.
Querying Tabs: Finding Active
You can find specific tabs based on various criteria. Let's start by finding the currently active tab in the current window.
The query() method returns an array of Tab objects that match your criteria.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
chrome.tabs.query(
{ active: true, currentWindow: true },
function(tabs) {
if (tabs.length > 0) {
console.log("Active tab ID: " + tabs[0].id);
console.log("Active tab URL: " + tabs[0].url);
}
}
);Querying Tabs: By URL
Want to find all tabs open to a specific website? The query() method supports powerful filtering using URL patterns.
You can use wildcards (*) to match parts of a URL, making it very flexible.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
chrome.tabs.query(
{ url: "*://developer.chrome.com/*" },
function(tabs) {
if (tabs.length > 0) {
console.log("Found " + tabs.length + " Chrome Dev tabs:");
tabs.forEach(tab => console.log("ID: " + tab.id + ", Title: " + tab.title));
} else {
console.log("No Chrome Dev tabs found.");
}
}
);Creating New Tabs
Opening a new tab is straightforward with chrome.tabs.create(). You can specify the URL, whether it should be active, and its position.
This method is great for opening links in a new tab based on extension logic.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
chrome.tabs.create(
{ url: "https://www.coddykit.com", active: true, index: 0 },
function(newTab) {
console.log("New tab created with ID: " + newTab.id);
console.log("URL: " + newTab.url);
}
);Updating Existing Tabs
You can change an existing tab's properties, like its URL or its active state, using chrome.tabs.update().
You'll need the tabId of the tab you wish to update. This is useful for navigating a tab to a new page.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
// First, find an active tab to update
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
if (tabs.length > 0) {
const tabIdToUpdate = tabs[0].id;
console.log("Updating tab ID: " + tabIdToUpdate);
chrome.tabs.update(
tabIdToUpdate,
{ url: "https://www.wikipedia.org", highlighted: true },
function(updatedTab) {
console.log("Tab updated to: " + updatedTab.url);
}
);
} else {
console.log("No active tab to update.");
}
});Closing Tabs Programmatically
To close one or more tabs, use the chrome.tabs.remove() method. It accepts a single tabId or an array of tabIds.
Be careful with this method, as closing tabs can interrupt a user's workflow!
// This code runs in your background script
// Requires "tabs" permission in manifest.json
// Example: Close the currently active tab (use with caution!)
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
if (tabs.length > 0) {
const tabIdToClose = tabs[0].id;
console.log("Attempting to close tab ID: " + tabIdToClose);
chrome.tabs.remove(tabIdToClose, function() {
if (chrome.runtime.lastError) {
console.error("Error closing tab: " + chrome.runtime.lastError.message);
} else {
console.log("Tab ID " + tabIdToClose + " closed.");
}
});
} else {
console.log("No active tab to close.");
}
});Getting Tab Details
When you create or update a tab, the callback function receives a Tab object. This object contains useful properties like id, url, title, and more.
Always check this object for the most up-to-date information about the tab.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
chrome.tabs.create(
{ url: "https://example.com" },
function(newTab) {
console.log("New tab created.");
console.log("Tab ID: " + newTab.id);
console.log("Tab Title: " + newTab.title);
console.log("Tab URL: " + newTab.url);
// You can now use newTab.id for further operations
}
);Permissions for Tab Control
Remember, to use most chrome.tabs API functions, your manifest.json needs the "tabs" permission.
For operations like reading the URL of any tab, you'll also need the "<all_urls>" host permission or specific host permissions.
"tabs": Required for basic tab operations."<all_urls>": Required for querying URLs of tabs you didn't create or don't have host permission for.
Tab Management Challenge
Which of the following chrome.tabs API methods is primarily used to change the URL of an existing browser tab?
Recap: Mastered Tabs!
Great job! You've learned how to programmatically manage browser tabs using the chrome.tabs API.
- We covered how to query tabs based on various criteria.
- You learned to create new tabs with specific URLs.
- You can now update existing tabs to change their properties.
- And finally, you know how to close tabs programmatically.
These skills are essential for building powerful browser extension automation features!
Questions Fréquemment Posées
La leçon « Gérer et contrôler les onglets » est-elle gratuite ?
Oui — le texte complet de « Gérer et contrôler les onglets » 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 « Gérer et contrôler les onglets » ?
Créez, mettez à jour, fermez et interrogez les onglets du navigateur par programmation afin d’offrir de puissantes fonctions de gestion des onglets. 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 1 sur 4.
Combien de temps prend la leçon « Gérer et contrôler les onglets » ?
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
- Gérer et contrôler les onglets
- Soumettre des formulaires par programmation
- Automatiser les interactions utilisateur
- Planifier des tâches avec l’API Alarms