如何修复Chrome扩展调用chrome.notifications.create时的Image未定义报错

• 当前扩展使用的是 Manifest V3 规范，其 background.js 的运行环境是 Service Worker，而非传统带完整DOM的后台页面
• Service Worker 环境不提供 DOM 相关全局API，包括报错提到的Image构造函数
• Chrome 通知模块收到你传入的相对路径图标时，会自动在当前上下文（也就是无DOM的Service Worker）调用Image加载图片资源，因此抛出Image is not defined错误
• popup页面属于普通网页运行环境，自带完整DOM全局对象，因此相同代码可以正常运行

核心逻辑是提前将图标文件转换为Data URL格式传入通知参数，让Chrome通知模块不需要在Service Worker内主动调用Image加载资源，从根源避免该报错。

代码修改示例 #

替换原有直接传入相对路径的逻辑，改为先读取图标资源、转码后再调用通知接口，完整代码如下：

// 读取扩展内图标并转为可直接使用的Data URL
async function getIconDataUrl() {
  // 获取扩展内图标的完整可访问路径
  const iconFullPath = chrome.runtime.getURL('icon.png');
  const response = await fetch(iconFullPath);
  const iconBlob = await response.blob();
  // Blob转base64 Data URL
  return new Promise((resolve) => {
    const fileReader = new FileReader();
    fileReader.onloadend = () => resolve(fileReader.result);
    fileReader.readAsDataURL(iconBlob);
  });
}

// 触发通知的逻辑
async function triggerBasicNotification() {
  const iconDataUrl = await getIconDataUrl();
  const options = {
    type: 'basic',
    // 替换为转码后的Data URL，不再直接传相对路径
    iconUrl: iconDataUrl,
    title: 'Background.js',
    message: 'Hello from background.js!',
  };
  chrome.notifications.create(options);
}

// 需要触发通知的位置调用该异步方法即可
triggerBasicNotification();

• 不需要在manifest.json的web_accessible_resources中单独声明该图标，扩展内部资源的跨上下文读取无需该配置
• 如果你使用的是Manifest V2规范仍遇到该问题，可检查manifest中background的persistent配置，若设为false会运行在非持久化事件页环境，也可能缺失部分DOM API，可将persistent设为true，或直接使用上述Data URL方案适配。

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