Utveckling av webbläsartillägg (Chrome och Edge) · Lektion

Hantera och styra flikar

Skapa, uppdatera, stänga och söka efter webbläsarflikar programmatiskt för att möjliggöra avancerade funktioner för flikhantering.

Lektion 1 av 411 steg

Hantera och styra flikar är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Introduktion till flikhantering

Webbläsartillägg kan göra mer än att bara ändra webbsidor. De kan även hantera själva webbläsaren!

I den här lektionen utforskar vi hur du styr webbläsarens flikar programmatiskt. Du får lära dig att skapa, söka efter, uppdatera och stänga flikar med Chrome Extensions API.

API:t chrome.tabs

Kärnan i flikhanteringen är API:t chrome.tabs. Det tillhandahåller metoder för att interagera med alla öppna flikar i webbläsaren eller med specifika flikar.

För att använda de flesta av dess funktioner måste tillägget ha behörigheten "tabs" deklarerad i filen manifest.json.

Söka efter flikar: hitta den aktiva

Du kan hitta specifika flikar utifrån olika kriterier. Vi börjar med att hitta den flik som för närvarande är aktiv i det aktuella fönstret.

Metoden query() returnerar en array med Tab-objekt som matchar dina kriterier.

// 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);
    }
  }
);

Söka efter flikar: efter URL

Vill du hitta alla flikar som är öppna på en viss webbplats? Metoden query() stöder kraftfull filtrering med hjälp av URL-mönster.

Du kan använda jokertecken (*) för att matcha delar av en URL, vilket gör metoden mycket flexibel.

// 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.");
    }
  }
);

Skapa nya flikar

Det är enkelt att öppna en ny flik med chrome.tabs.create(). Du kan ange URL, om fliken ska vara aktiv och dess position.

Metoden passar bra för att öppna länkar i en ny flik baserat på tilläggets logik.

// 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);
  }
);

Uppdatera befintliga flikar

Du kan ändra egenskaper hos en befintlig flik, till exempel dess URL eller om den är aktiv, med hjälp av chrome.tabs.update().

Du behöver flikens tabId för att kunna uppdatera den. Det är användbart när du vill navigera en flik till en ny sida.

// 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.");
  }
});

Stänga flikar programmatiskt

Om du vill stänga en eller flera flikar använder du metoden chrome.tabs.remove(). Den accepterar ett enda tabId eller en array med tabId-värden.

Var försiktig med den här metoden, eftersom stängda flikar kan avbryta användarens arbetsflöde!

// 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.");
  }
});

Hämta flikdetaljer

När du skapar eller uppdaterar en flik tar callback-funktionen emot ett Tab-objekt. Objektet innehåller användbara egenskaper som id, url, title med flera.

Kontrollera alltid det här objektet för att få den senaste informationen om fliken.

// 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
  }
);

Behörigheter för flikkontroll

Kom ihåg att manifest.json behöver behörigheten "tabs" för att du ska kunna använda de flesta funktionerna i chrome.tabs-API:t.

För åtgärder som att läsa webbadressen till valfri flik behöver du även värdbehörigheten "<all_urls>" eller specifika värdbehörigheter.

"tabs": Krävs för grundläggande flikåtgärder.
"<all_urls>": Krävs för att fråga efter webbadresser till flikar som du inte har skapat eller som du saknar värdbehörighet för.

Utmaning: flikhantering

Vilken av följande chrome.tabs-API-metoder används huvudsakligen för att ändra webbadressen för en befintlig webbläsarflik?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Ni behärskar flikar!

Bra jobbat! Ni har lärt er att programmatiskt hantera webbläsarflikar med hjälp av chrome.tabs-API:t.

Ni har gått igenom hur man frågar efter flikar utifrån olika kriterier.
Ni har lärt er att skapa nya flikar med specifika webbadresser.
Ni kan nu uppdatera befintliga flikar och ändra deras egenskaper.
Slutligen vet ni hur man stänger flikar programmatiskt.

De här färdigheterna är nödvändiga för att bygga kraftfulla funktioner för automatisering i webbläsartillägg!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Hantera och styra flikar” gratis?

Ja – hela texten till ”Hantera och styra flikar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Hantera och styra flikar”?

Skapa, uppdatera, stänga och söka efter webbläsarflikar programmatiskt för att möjliggöra avancerade funktioner för flikhantering. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?

Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Hantera och styra flikar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?

Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)