Gestione e controllo delle schede
Create, aggiornate, chiudete e interrogate programmaticamente le schede del browser, abilitando potenti funzionalità di gestione delle schede.
Gestione e controllo delle schede è una lezione Browser Extensions Development (Chrome & Edge) gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Browser Extensions Development (Chrome & Edge), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Browser Extensions Development (Chrome & Edge) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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!
Domande Frequenti
La lezione «Gestione e controllo delle schede» è gratuita?
Sì — il testo completo di «Gestione e controllo delle schede» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Browser Extensions Development (Chrome & Edge), passa a CoddyKit PRO. Il corso Browser Extensions Development (Chrome & Edge) include 4 lezioni in totale.
Cosa imparerò in «Gestione e controllo delle schede»?
Create, aggiornate, chiudete e interrogate programmaticamente le schede del browser, abilitando potenti funzionalità di gestione delle schede. Eserciti Browser Extensions Development (Chrome & Edge) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Browser Extensions Development (Chrome & Edge)?
Non è richiesta alcuna esperienza precedente. Browser Extensions Development (Chrome & Edge) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Gestione e controllo delle schede»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Browser Extensions Development (Chrome & Edge)?
Sì. Ogni lezione Browser Extensions Development (Chrome & Edge) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Gestione e controllo delle schede
- Invio programmatico dei moduli
- Automazione delle interazioni degli utenti
- Pianificare attività con la Alarms API