Chrome扩展调用chrome.action.setIcon时报failureCallback is not a function错误

问题原因 #

1. 图标路径拼接错误
   你当前逻辑中紫色图标对应的pathToIcons赋值为/，拼接后会出现/assets/icons//xxx.png的双斜杠路径，浏览器无法正确加载图标，触发setIcon执行失败。
2. 未处理异步API的异常
   Manifest V3中chrome.action.setIcon是返回Promise的异步API，你既没有传入回调函数捕获错误，也没有处理Promise的rejection状态，API执行失败时就会抛出你看到的Uncaught (in promise) TypeError: failureCallback is not a function报错。

修复方案 #

第一步：修正路径拼接逻辑 #

调整pathToIcons的赋值，避免出现双斜杠：

if (colour == "purple") {
  pathToIcons = ""; // 替换原来的"/"，避免双斜杠
} else {
  pathToIcons = "grey/";
}

第二步：处理API异常（两种方案二选一即可） #

方案1：传入回调函数捕获错误

给chrome.action.setIcon添加回调函数，处理执行异常：

chrome.action.setIcon({
  path: {
    "16": "/assets/icons/" + pathToIcons + "extension_toolbar_icon16.png",
    "32": "/assets/icons/" + pathToIcons + "extension_toolbar_icon32.png",
    "48": "/assets/icons/" + pathToIcons + "extension_toolbar_icon48.png",
    "128": "/assets/icons/" + pathToIcons + "extension_toolbar_icon128.png"
  },
  tabId: tab
}, () => {
  // 忽略运行时错误，也可以自行打印日志调试
  void chrome.runtime.lastError;
})

方案2：用async/await捕获异常

将changeIconColour改为异步函数，用try catch包裹执行逻辑：

async function changeIconColour(colour) {
  let pathToIcons;
  if (colour == "purple") {
    pathToIcons = "";
  } else {
    pathToIcons = "grey/";
  }
  try {
    await chrome.action.setIcon({
      path: {
        "16": "/assets/icons/" + pathToIcons + "extension_toolbar_icon16.png",
        "32": "/assets/icons/" + pathToIcons + "extension_toolbar_icon32.png",
        "48": "/assets/icons/" + pathToIcons + "extension_toolbar_icon48.png",
        "128": "/assets/icons/" + pathToIcons + "extension_toolbar_icon128.png"
      },
      tabId: tab
    })
  } catch (err) {
    // 忽略标签页不存在等异常场景
  }
}

额外优化建议 #

全局变量tab在高频触发onActivated、onUpdated事件时可能出现值不同步的问题，建议直接将tabId作为参数传入changeIconColour函数，避免全局变量污染。

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