Почему значок панели инструментов расширения Chrome сбрасывается на значок по умолчанию?

Question

В этом минимальном примере у меня есть следующий манифест. json:

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["webNavigation", "activeTab"],
  "browser_action": {
      "default_icon": {
          "16": "red.png"
      }
  }
}

На каждой навигации я хочу изменить значок на панели инструментов на зеленый png , Работает, однако, есть проблема:

1. Я на любой странице, значок зеленый.
2. Я нажимаю на ссылку, она запускает навигацию.
3. Значок сбрасывается на красный в течение нескольких миллисекунд
4. Мои слушатели срабатывают, и они устанавливают значок обратно зеленый.

Мой фон. js:

const setIcon = (details) => {
    if (details.frameId != 0) {
        return; // only update the icon for main page, not iframe/frame
    }
    chrome.browserAction.setIcon({
        path: { '16' : 'green.png'},
        tabId: details.tabId
    });
}
chrome.webNavigation.onHistoryStateUpdated.addListener(setIcon);
chrome.webNavigation.onBeforeNavigate.addListener(setIcon);
chrome.webNavigation.onCommitted.addListener(setIcon);

Что вызывает такое поведение? Есть ли способ предотвратить сброс иконки при навигации?