Chrome扩展Manifest V3中字体、CSS、JS及图片加载问题咨询

1. 当前现象的原因 #

• 字体加载的CORS错误：你通过@import引入的远程CSS会触发Gmail页面（origin为https://mail.google.com）向cdnfonts服务器请求字体文件，但该服务器未配置Access-Control-Allow-Origin响应头，浏览器的CORS策略会拦截这种跨域字体请求，导致加载失败。
• 字体样式显示但有变化：元素面板里的font-family是CSS规则本身生效了，但Google Sans字体实际没加载成功，浏览器自动 fallback 到后面的Roboto等Gmail原生字体。当你取消该样式时，fallback逻辑变化，所以字体看起来有差异，并非Google Sans加载成功。
• 远程图片能正常显示：浏览器对不同资源的跨域策略不同，<img>标签的跨域加载默认不受CORS限制（只要服务器没有主动阻止），而字体文件属于“可执行资源”范畴，浏览器会强制检查CORS头。

2. Chrome扩展（Manifest V3）加载资源的正确方式 #

JS文件 #

Manifest V3严格禁止加载远程JS代码，所有JS必须打包到扩展本地目录中，使用相对路径引用，比如：

// 在manifest.json的content_scripts中配置本地JS
"content_scripts": [
  {
    "matches": ["https://mail.google.com/*"],
    "js": ["js/content.js"]
  }
]

CSS文件 #

• 优先本地打包：将CSS文件放到扩展目录，通过content_scripts的css字段引用，或在扩展页面（popup/options）用本地路径引入，完全避免CORS问题。
• 若必须远程加载：确保远程服务器配置了Access-Control-Allow-Origin头（允许https://mail.google.com或*），同时在manifest的content_security_policy中添加对应的style-src规则，比如：

"content_security_policy": {
  "extension_pages": "style-src 'self' https://fonts.cdnfonts.com;",
  "content_scripts": "style-src 'self' https://fonts.cdnfonts.com;"
}

字体文件 #

• 推荐本地打包：将字体文件（如woff2）放到扩展的fonts目录，在本地CSS中用相对路径引用：

@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/ProductSans-Regular.woff2') format('woff2');
}

• 若远程加载：除了服务器配置CORS头，还需在CSP中添加font-src规则，允许对应源，比如：

"content_security_policy": {
  "content_scripts": "font-src 'self' https://fonts.cdnfonts.com;"
}

3. Manifest V3中自定义CSP的意义 #

Manifest V3禁止的是远程代码（JS）的执行，而非所有远程资源。自定义CSP的核心作用是精细化控制扩展可加载的资源类型与来源，提升安全性：

• 限制非代码类资源的加载范围：比如允许从特定CDN加载图片、字体，但禁止其他未知源，避免恶意资源注入。
• 强化默认安全策略：V3的默认CSP已经很严格，但你可以根据需求调整，比如允许特定的style-src或img-src，同时保持script-src仅允许本地资源。
• 适配特殊场景：比如某些合法的远程资源（如可信CDN的字体、样式），需要通过CSP明确授权才能加载，避免被默认策略拦截。

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