如何用chrome.tabs API获取标签页URL及在onbeforeunload时检查应用标签数

Hey there! Both of your requirements are totally doable using Chrome's extension APIs—let's walk through each one step by step, with concrete code examples.

To grab the URLs of every open tab, you'll use the chrome.tabs.query() API. This method lets you filter tabs by criteria (we'll use an empty object to get all tabs) and returns an array of tab objects, each containing the url property.

Key Notes: #

• You must declare the tabs permission in your extension's manifest file—Chrome won't let you access tab data without it.
• This works in background scripts, popup scripts, or even content scripts (though background/popup is more common for this use case).

Manifest V3 Example (Recommended):

First, update your manifest.json to include the permission:

{
  "manifest_version": 3,
  "name": "Tab URL Grabber",
  "version": "1.0",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  }
}

Then in background.js, use async/await for cleaner code:

async function getAllOpenTabUrls() {
  // Query all open tabs (empty object = no filters)
  const tabs = await chrome.tabs.query({});
  // Map tab objects to just their URLs
  const allUrls = tabs.map(tab => tab.url);
  console.log("All open tab URLs:", allUrls);
  return allUrls;
}

// Call the function whenever you need the data
getAllOpenTabUrls();

Manifest V2 Example:

If you're still using Manifest V2, the setup is similar—just adjust the background script declaration:

{
  "manifest_version": 2,
  "name": "Tab URL Grabber",
  "version": "1.0",
  "permissions": ["tabs"],
  "background": {
    "scripts": ["background.js"]
  }
}

And the JavaScript can use callbacks instead of async/await:

chrome.tabs.query({}, function(tabs) {
  const allUrls = tabs.map(function(tab) {
    return tab.url;
  });
  console.log("All open tab URLs:", allUrls);
});

This one requires a bit more setup because regular web apps can't directly access Chrome's extension APIs. You'll need a small Chrome extension to act as a bridge between your app and the chrome.tabs API.

Feasibility Check: #

100% feasible! The core idea is:

• Your web app listens for the onbeforeunload event.
• It sends a message to your Chrome extension asking to count tabs with your app's URL.
• The extension uses chrome.tabs.query() to count matching tabs and sends the number back.

Step-by-Step Implementation: #

1. Configure the Extension Manifest (Manifest V3)

Update manifest.json to allow communication with your app's domain and declare the tabs permission:

{
  "manifest_version": 3,
  "name": "App Tab Counter",
  "version": "1.0",
  "permissions": ["tabs"],
  "externally_connectable": {
    "matches": ["https://your-app-domain.com/*"] // Replace with your app's domain
  },
  "background": {
    "service_worker": "background.js"
  }
}

2. Extension Background Script (background.js)

This script listens for messages from your app and returns the tab count:

// Listen for external messages from your web app
chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {
  if (request.action === "countAppTabs") {
    const targetUrl = request.appUrl;
    // Query all tabs matching your app's URL
    chrome.tabs.query({ url: targetUrl }, (tabs) => {
      // Send the count back to the app
      sendResponse({ tabCount: tabs.length });
    });
    // Return true to indicate we'll send an async response
    return true;
  }
});

3. Web App Code

Add this to your app's main JavaScript file to trigger the check when the user tries to close the tab:

window.addEventListener("beforeunload", async (event) => {
  const extensionId = "your-extension-id-here"; // Replace with your extension's ID
  const currentAppUrl = window.location.href;

  try {
    // Send a message to the extension
    const response = await chrome.runtime.sendMessage(extensionId, {
      action: "countAppTabs",
      appUrl: currentAppUrl
    });

    console.log(`Your app is open in ${response.tabCount} tabs`);
    
    // Optional: Show a warning if multiple tabs are open
    if (response.tabCount > 1) {
      event.returnValue = "Your app is open in other tabs—are you sure you want to close this one?";
    }
  } catch (error) {
    console.error("Failed to connect to extension:", error);
    // Fallback logic if the extension isn't installed
  }
});

Important Tips: #

• To find your extension's ID: Enable developer mode in Chrome's extension settings (chrome://extensions/), then copy the ID listed under your extension.
• If your app uses dynamic URLs (e.g., query parameters), use a wildcard in the externally_connectable matches (like https://your-app-domain.com/*) to cover all subpages.
• Manifest V2 users: Replace the background.service_worker field with background.scripts: ["background.js"].

内容的提问来源于stack exchange，提问作者Sagar Shirke