Chrome extensions: How to keep badge text from flickering when navigating?

Here’s a GIF demo, using a test extension.

I’m using this test extension to test out chrome.browserAction.setBadgeText(). I’ve noticed that when navigating, the badge text is flickering. All I am doing is clicking any hyperlinks on a webpage, so there’s no page refreshing, nor navigating Back.

Is there a way to keep it from flickering? If not, is there a way to keep it persistent for as long as possible?

Code in question:

var SetBadge = function () {
    chrome.windows.getCurrent({
        populate: true
    }, function (win) {
        for (let i = 0; i < win.tabs.length; ++i) {
            if (win.tabs[i].active) {
                chrome.browserAction.setBadgeText({
                    text: "8",
                    tabId: win.tabs[i].id
                });
            }
        }
    });
};

chrome.webNavigation.onCommitted.addListener(() => {
    SetBadge();
});


chrome.webRequest.onSendHeaders.addListener(() => {
    SetBadge();
});

chrome.webRequest.onBeforeRedirect.addListener(() => {
    SetBadge();
});

chrome.tabs.onActivated.addListener(() => {
    SetBadge();
});

chrome.webRequest.onCompleted.addListener(() => {
    SetBadge();
});