Browser Extensions Development (Chrome & Edge) · บทเรียน

การจัดการและควบคุมแท็บ

สร้าง อัปเดต ปิด และสอบถามแท็บเบราว์เซอร์ด้วยโปรแกรม เพื่อเปิดใช้ความสามารถด้านการจัดการแท็บที่ทรงพลัง

การจัดการและควบคุมแท็บ เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Browser Extensions Development (Chrome & Edge) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

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!

คำถามที่พบบ่อย

บทเรียน “การจัดการและควบคุมแท็บ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดการและควบคุมแท็บ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Browser Extensions Development (Chrome & Edge) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดการและควบคุมแท็บ”

สร้าง อัปเดต ปิด และสอบถามแท็บเบราว์เซอร์ด้วยโปรแกรม เพื่อเปิดใช้ความสามารถด้านการจัดการแท็บที่ทรงพลัง คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดการและควบคุมแท็บ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม

ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Browser Extensions Development (Chrome & Edge)