Administrere og kontrollere faner
Opprett, oppdater, lukk og søk i nettleserfaner programmatisk, slik at du kan tilby avanserte funksjoner for fanehåndtering.
Administrere og kontrollere faner er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.
Introduksjon til fanehåndtering
Nettleserutvidelser kan gjøre mer enn bare å endre nettsider. De kan også administrere selve nettleseren!
I denne leksjonen utforsker vi hvordan De programmatisk styrer nettleserfaner. De lærer å opprette, spørre etter, oppdatere og lukke faner ved hjelp av Chrome Extensions API.
API-et chrome.tabs
Kjernen i fanehåndtering er chrome.tabs-API-et. Det tilbyr metoder for å samhandle med alle åpne faner i nettleseren, eller med bestemte faner.
For å bruke de fleste funksjonene trenger utvidelsen tillatelsen "tabs", som må erklæres i manifest.json-filen.
Spørre etter faner: Finne den aktive
De kan finne bestemte faner basert på ulike kriterier. La oss starte med å finne den aktive fanen i det gjeldende vinduet.
Metoden query() returnerer en tabell med Tab-objekter som samsvarer med kriteriene Deres.
// 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);
}
}
);Spørre etter faner: Etter URL
Ønsker De å finne alle faner som viser et bestemt nettsted? Metoden query() støtter kraftig filtrering ved hjelp av URL-mønstre.
De kan bruke jokertegn (*) til å samsvare med deler av en URL, noe som gjør metoden svært fleksibel.
// 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.");
}
}
);Opprette nye faner
Det er enkelt å åpne en ny fane med chrome.tabs.create(). De kan angi URL-en, om fanen skal være aktiv, og plasseringen.
Denne metoden er nyttig for å åpne koblinger i en ny fane basert på logikken i utvidelsen.
// 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);
}
);Oppdatere eksisterende faner
De kan endre egenskapene til en eksisterende fane, for eksempel URL-en eller aktiv-statusen, ved hjelp av chrome.tabs.update().
De trenger tabId-verdien til fanen De ønsker å oppdatere. Dette er nyttig når en fane skal navigeres til en ny side.
// 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.");
}
});Lukke faner programmatisk
For å lukke én eller flere faner bruker De metoden chrome.tabs.remove(). Den kan ta imot én enkelt tabId eller en array med tabId-er.
Vær forsiktig med denne metoden, siden lukking av faner kan avbryte brukerens arbeidsflyt!
// 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.");
}
});Hente fanedetaljer
Når De oppretter eller oppdaterer en fane, mottar tilbakekallingsfunksjonen et Tab-objekt. Dette objektet inneholder nyttige egenskaper som id, url, title og flere.
Kontroller alltid dette objektet for å få den nyeste informasjonen om fanen.
// 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
}
);Tillatelser for fanehåndtering
Husk at manifest.json må ha tillatelsen "tabs" for at De skal kunne bruke de fleste funksjonene i chrome.tabs-API-et.
For operasjoner som å lese URL-en til en hvilken som helst fane trenger De også vertstillatelsen "<all_urls>" eller spesifikke vertstillatelser.
"tabs": Påkrevd for grunnleggende faneoperasjoner."<all_urls>": Påkrevd for å spørre etter URL-er til faner De ikke har opprettet eller ikke har vertstillatelse for.
Utfordring: Fanehåndtering
Hvilken av de følgende chrome.tabs-API-metodene brukes primært til å endre URL-en til en eksisterende nettleserfane?
Oppsummering: De har fått kontroll på faner!
Godt jobbet! De har lært hvordan De kan håndtere nettleserfaner programmatisk ved hjelp av chrome.tabs-API-et.
- De har lært hvordan De kan spørre etter faner basert på ulike kriterier.
- De har lært å opprette nye faner med bestemte URL-er.
- Nå kan De oppdatere eksisterende faner for å endre egenskapene deres.
- Til slutt vet De hvordan De kan lukke faner programmatisk.
Disse ferdighetene er avgjørende for å bygge effektive funksjoner for automatisering i nettleserutvidelser!
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Administrere og kontrollere faner» gratis?
Ja – hele teksten i «Administrere og kontrollere faner» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.
Hva lærer jeg i «Administrere og kontrollere faner»?
Opprett, oppdater, lukk og søk i nettleserfaner programmatisk, slik at du kan tilby avanserte funksjoner for fanehåndtering. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Utvikling av nettleserutvidelser (Chrome og Edge)?
Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Administrere og kontrollere faner»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Utvikling av nettleserutvidelser (Chrome og Edge)-leksjonen?
Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Administrere og kontrollere faner
- Sende inn skjemaer programmatisk
- Automatisere brukerinteraksjoner
- Planlegge oppgaver med Alarms API