迁移至Manifest V3后无法加载chrome://favicon本地资源的解决方法

算力阿峰

2026-7-30

Chrome扩展Manifest V3中获取书签/标签页Favicon的修复方案

问题背景

将Chrome扩展从Manifest V2迁移到V3后，出现错误：

Not allowed to load local resource: chrome://favicon/size/16@1x/https://google.com/

Manifest V3中限制了网页内容（如新标签页、popup）直接访问chrome://协议资源，原V2中使用chrome://favicon路径加载图标的方式不再生效。

修复步骤

1. 确认Manifest权限

确保manifest.json已声明favicon权限（你的配置已包含，可跳过此步）：

"permissions": [ "bookmarks", "storage", "sessions", "tabs", "favicon" ]

2. 替换`chrome://favicon`为`chrome.favicon.get` API

V3中必须通过Chrome官方提供的favicon API动态获取图标地址，修改代码如下：

/* append (almost) every tab */
for (let tab of tabs) {
  // 先创建基础元素结构
  const faviconImg = el('img');
  const element = el(
    'div.link.truncate',
    el('div.favicon', faviconImg),
    `${tab.deviceName} › ${tab.title}`,
    {
      href: '#',
      title: tab.title,
      'data-type': 'shortcut',
      click: () => chrome.sessions.restore(tab.sessionId),
      dragstart: (event) => event.dataTransfer.setData('text/plain', tab.url)
    }
  );

  // 调用API获取对应网站的favicon
  chrome.favicon.get({ url: tab.url }, (icons) => {
    if (icons?.length) {
      // 匹配需要的尺寸，优先取16px和32px的图标
      const icon16 = icons.find(icon => icon.size === 16) || icons[0];
      const icon32 = icons.find(icon => icon.size === 32) || icons[0];
      faviconImg.src = icon16.url;
      faviconImg.srcset = `${icon16.url}, ${icon32.url} 2x`;
    }
  });

  if (box.children.length < 5) {
    box.appendChild(element);
  }
}