Preact开发Chrome扩展报icons属性忽略、期望数组类型如何解决

问题场景 #

搭建基于Preact的Chrome扩展（Manifest V3）时，加载扩展后收到如下警告：

Manifest: property 'icons' ignored, type array expected.

自行核对源码中的manifest.json图标配置，认为写法符合规范，无法定位警告来源。
警告截图如下：

源码目录下的manifest.json内容如下：

{
    "manifest_version": 3,
    "name": "name",
    "version": "1",
    "action": {
        "default_icon": {
            "16": "assets/icons/icon16.png",
            "48": "assets/icons/icon48.png",
            "128": "assets/icons/icon128.png"
        }
    },
    "description": "descr",
    "icons": {
        "16": "assets/icons/icon16.png",
        "48": "assets/icons/icon48.png",
        "128": "assets/icons/icon128.png"
    },
    "chrome_url_overrides": {
        "newtab": "index.html"
    },
    "permissions": [
        "activeTab",
        "storage"
    ]
}

问题原因 #

你核对的是源码目录下的Manifest文件，但Chrome加载扩展时读取的是构建产物目录（一般是dist/文件夹）下最终生成的Manifest文件，二者内容并不一致。
Preact项目脚手架默认会集成PWA相关构建插件，Web PWA清单的icons字段要求为数组格式，构建时这类插件会错误处理/覆盖Chrome扩展Manifest里的icons字段，导致Chrome实际读取到的icons字段类型不符合扩展规范，抛出警告。
你贴出的源码中icons字段的写法完全符合Chrome MV3官方规范，不存在语法错误。

解决方法 #

• 先打开你加载扩展时选中的构建产物目录，找到里面的manifest.json查看实际内容，确认icons字段是否和源码中一致。
• 如果确认构建产物里的icons字段被错误修改，调整构建配置：
  • 如果你开启了PWA相关插件（比如preact-cli内置PWA能力、vite-plugin-pwa），在插件配置中添加规则，排除对Chrome扩展Manifest文件的处理，避免其被PWA清单逻辑覆盖。
  • 如果你使用@crxjs/vite-plugin等Chrome扩展构建工具，升级到最新稳定版本，旧beta版本存在处理MV3 icons字段的已知bug。
• 调整配置后重新执行构建命令，在Chrome扩展管理页重新加载构建产物目录即可消除警告。

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