How can I get different badge value for every tab on chrome?

问题

I'm trying to do something like adblock does. Adblock counts number of "ads" and update badge value. For now, I tried to do something with 'background pages', but they are run only one time and badge value is the same for all tabs. I can't use browser action popup.html, because it triggers only after the click.
So I need something which takes current tab, is able to read current DOM of tab and after all update badge value. But also after I click on different tab I need to compute new badge value.
Thanks in advance

回答1:

The badge text is stored for each tab independently provided you specify tabId parameter, you don't have to update it manually after the user switches tabs if you already have set the value.

So if your extension processes the pages immediately after loading, call chrome.browserAction.setBadgeText once. You can do it e.g. by sending a message from your content script to your background/event page which will invoke setBadgeText with the sender tab's id (this parameter is what makes the text unique to a tab).

There could be one catch though: the prerendered (not yet visible) tabs can't be assigned a badge text, so you'll have to postpone the update, here's an example using tabs and webNavigation APIs:

content script:

chrome.runtime.sendMessage({badgeText: "123"});

background/event script:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.badgeText) {
        chrome.tabs.get(sender.tab.id, function(tab) {
            if (chrome.runtime.lastError) {
                return; // the prerendered tab has been nuked, happens in omnibox search
            }
            if (tab.index >= 0) { // tab is visible
                chrome.browserAction.setBadgeText({tabId:tab.id, text:message.badgeText});
            } else { // prerendered tab, invisible yet, happens quite rarely
                var tabId = sender.tab.id, text = message.badgeText;
                chrome.webNavigation.onCommitted.addListener(function update(details) {
                    if (details.tabId == tabId) {
                        chrome.browserAction.setBadgeText({tabId: tabId, text: text});
                        chrome.webNavigation.onCommitted.removeListener(update);
                    }
                });
            }
        });
    }
});

回答2:

You can listen to the Chrome tab events in your background/event page. The following code helped me to solve the same problem:

// fires when tab is updated
chrome.tabs.onUpdated.addListener(updateBadge);

// fires when active tab changes
chrome.tabs.onActivated.addListener(updateBadge);

function updateBadge() {
  // get active tab on current window
  chrome.tabs.query({active: true, currentWindow: true}, function(arrayOfTabs) {
    // the return value is an array
    var activeTab = arrayOfTabs[0];
    if (!activeTab) return;
    // compute number for badge for current tab's url
    var count = getCount(activeTab.url);
    chrome.browserAction.setBadgeText({
      text: count.toString()
    });
  });
}

function getCount(currentUrl) {
  // your logic, e.g., return 42
}

回答3:

You can write an "onActiveChanged" listener and call your updateBadge function and pass the tabId. Hope it helped.

chrome.tabs.onActiveChanged.addListener(function (tabId, changeInfo, tab) {
    updateBadge(tabId);
});

function updateBadge(tabId) {
...
}

来源：https://stackoverflow.com/questions/32168449/how-can-i-get-different-badge-value-for-every-tab-on-chrome