Browser Extensions Development (Chrome & Edge) · Pelajaran

Pengelolaan dan Pengendalian Tab

Buat, perbarui, tutup, dan cari tab peramban secara terprogram untuk menghadirkan fitur pengelolaan tab yang canggih.

Pelajaran 1 dari 411 langkah

Pengelolaan dan Pengendalian Tab adalah pelajaran Browser Extensions Development (Chrome & Edge) gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Browser Extensions Development (Chrome & Edge), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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?

Jawab di pelajaran interaktif

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!

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 12
Pelajaran: 48

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengelolaan dan Pengendalian Tab” gratis?

Ya — teks lengkap “Pengelolaan dan Pengendalian Tab” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Browser Extensions Development (Chrome & Edge), upgrade ke CoddyKit PRO. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengelolaan dan Pengendalian Tab”?

Buat, perbarui, tutup, dan cari tab peramban secara terprogram untuk menghadirkan fitur pengelolaan tab yang canggih. Kamu berlatih Browser Extensions Development (Chrome & Edge) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Browser Extensions Development (Chrome & Edge)?

Tidak diperlukan pengalaman sebelumnya. Browser Extensions Development (Chrome & Edge) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Pengelolaan dan Pengendalian Tab” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Browser Extensions Development (Chrome & Edge) ini?

Ya. Setiap pelajaran Browser Extensions Development (Chrome & Edge) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Browser Extensions Development (Chrome & Edge)