Chrome扩展转Safari扩展时manifest.json不兼容警告问题求助

我有一个在Chrome中正常运行的Manifest V3扩展，使用xcrun safari-web-extension-converter ./my-chrome-extension/dist工具转换为Safari扩展时，收到如下警告：

警告：你的manifest.json中的以下键不受当前Safari版本支持。如果这些对你的扩展至关重要，请检查代码并修改以适配Safari：
type
use_dynamic_url

我的Safari版本为17.1.2，以下是我的manifest.json和package.json文件内容：

manifest.json #

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "action": {
    "default_title": "Popup",
    "default_popup": "index.html"
  },
  "icons": {
    "16": "assets/icons/icon16.png",
    "32": "assets/icons/icon32.png",
    "48": "assets/icons/icon48.png",
    "128": "assets/icons/icon128.png"
  },
  "description": "My description.",
  "background": {
    "service_worker": "background/background.js"
  },
  "web_accessible_resources": [
    {
      "resources": ["assets/placeholder/image_placeholder.jpg"],
      "matches": ["<all_urls>"]
    }
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script/src/main.tsx"]
    }
  ]
}

package.json #

{
  "name": "react-content-script",
  "private": true,
  "version": "1.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.2",
    "react-dom": "^18.2.0",
    "react-shadow-root": "^6.2.0",
    "web-vitals": "^3.0.3"
  },
  "devDependencies": {
    "@crxjs/vite-plugin": "@crxjs/vite-plugin@2.0.0-beta.11",
    "@types/chrome": "^0.0.197",
    "@types/node": "^18.8.3",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "autoprefixer": "^10.4.16",
    "crx-hotreload": "^1.0.6",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.4.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vite-plugin-svgr": "^2.2.1"
  }
}

问题分析与解决步骤 #

1. 字段来源定位 #

你提供的原始manifest.json中并没有type和use_dynamic_url字段，这两个字段是**@crxjs/vite-plugin在打包过程中自动添加**的。Chrome的Manifest V3允许在web_accessible_resources中配置这两个子字段，但Safari 17.1.2暂未支持。

2. 修改构建配置，禁用自动注入 #

在vite.config.ts中显式声明web_accessible_resources的配置，覆盖插件的默认行为，避免自动添加不兼容字段：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { crx } from '@crxjs/vite-plugin';
import baseManifest from './manifest.json';

export default defineConfig({
  plugins: [
    react(),
    crx({
      manifest: {
        ...baseManifest,
        web_accessible_resources: [
          {
            resources: ["assets/placeholder/image_placeholder.jpg"],
            matches: ["<all_urls>"],
            // 不添加type和use_dynamic_url，确保符合Safari要求
          }
        ]
      }
    })
  ]
});

3. 手动清理打包后的manifest（可选） #

如果构建后dist目录下的manifest.json仍包含这两个字段，直接编辑该文件，删除web_accessible_resources条目下的type和use_dynamic_url，再重新运行转换命令即可。

4. Safari Manifest V3兼容注意事项 #

Safari 17.1.2对Manifest V3的支持存在部分限制：

• 后台脚本：支持service_worker，但避免使用Chrome专属API，优先采用Web Extension标准API
• 内容脚本：确保使用标准DOM API，不要依赖Chrome独有的扩展特性
• 资源访问：web_accessible_resources仅支持resources和matches两个子字段，其他字段均不兼容

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