如何实现Chrome扩展中标签页独立的browserAction点击切换？

Alright, let's figure out how to make your browserAction toggle work independently per tab. The main issue with the default browserAction is that its state is global—clicking it changes the state for all tabs. We need to track each tab's state separately, and here's the step-by-step solution:

First, we need to add the browserAction field (missing in your snippet) and adjust permissions to support tab-specific state tracking. Here's the updated manifest:

{
  "name": "Toggle",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2,
  "permissions": ["activeTab", "tabs", "storage"],
  "icons": {
    "16": "images/hand16.png",
    "32": "images/hand32.png",
    "48": "images/hand48.png"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browserAction": {
    "default_icon": "images/hand16.png",
    "default_title": "Toggle State"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery.min.js", "content.js"]
    }
  ]
}

Note: Added storage to persist tab states, tabs for tab interactions, and defined the base browserAction configuration.

This script handles browserAction clicks, tracks each tab's state, and syncs with content scripts. We use chrome.storage.local to store states (critical since non-persistent background pages can restart):

// Fetch the current state of a tab, defaulting to "off" if not set
async function getTabState(tabId) {
  const storedData = await chrome.storage.local.get(`tab_${tabId}`);
  return storedData[`tab_${tabId}`] || false;
}

// Update browserAction icon/badge to match the tab's state
function updateBrowserActionUI(tabId, isActive) {
  chrome.browserAction.setIcon({
    tabId: tabId,
    path: isActive ? "images/hand_active16.png" : "images/hand16.png"
  });
  chrome.browserAction.setBadgeText({
    tabId: tabId,
    text: isActive ? "ON" : ""
  });
}

// Handle browserAction click events
chrome.browserAction.onClicked.addListener(async (tab) => {
  const currentState = await getTabState(tab.id);
  const newState = !currentState;

  // Save the updated state for this tab
  await chrome.storage.local.set({ [`tab_${tab.id}`]: newState });

  // Update the UI to reflect the new state
  updateBrowserActionUI(tab.id, newState);

  // Send a message to the tab's content script to apply changes
  chrome.tabs.sendMessage(tab.id, { action: "toggleState", state: newState });
});

// Clean up stored state when a tab is closed
chrome.tabs.onRemoved.addListener(async (tabId) => {
  await chrome.storage.local.remove(`tab_${tabId}`);
});

// Sync UI when switching to a different tab
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  const state = await getTabState(activeInfo.tabId);
  updateBrowserActionUI(activeInfo.tabId, state);
});

Pro tip: Create an hand_active16.png icon for the "on" state, or adjust the path to match your existing assets.

Each tab has its own content script instance, so state changes stay isolated. This script listens for background messages and applies your toggle logic:

// Track local state to avoid repeated storage calls
let currentTabState = false;

// Listen for toggle commands from the background
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "toggleState") {
    currentTabState = request.state;
    // Replace this with your actual toggle logic—example below:
    if (currentTabState) {
      $("body").css("background-color", "#f5f5f5");
    } else {
      $("body").css("background-color", "");
    }
  }
});

// Initialize state when the content script loads
async function initTabState() {
  const tab = await new Promise(resolve => chrome.tabs.getCurrent(resolve));
  const storedState = await new Promise(resolve => chrome.storage.local.get(`tab_${tab.id}`, resolve));
  currentTabState = storedState[`tab_${tab.id}`] || false;
  
  // Apply initial state to the page
  if (currentTabState) {
    $("body").css("background-color", "#f5f5f5");
  }
}

initTabState();

• Tab Isolation: We use the tab ID as a unique key in storage, ensuring each tab's state is tracked separately.
• UI Sync: When switching tabs, we update the browserAction to match the active tab's state—no more mismatched icons!
• Cleanup: We remove stale tab states from storage when tabs close to avoid cluttering storage.

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