Chrome扩展开发中如何获取网站favicon且避免CORS错误

你遇到的CORS报错核心原因是：在扩展弹窗上下文用XMLHttpRequest请求跨域资源时，目标资源服务没有返回匹配你扩展源的Access-Control-Allow-Origin响应头，请求被浏览器安全策略拦截。
以下是可直接落地的无CORS问题的实现方式：

• 优先用成本最低的展示方案：不要用XHR/fetch请求favicon资源，直接将favicon地址填入<img>标签的src属性即可。img标签加载跨域静态资源用于普通展示时，默认不会触发CORS校验，完全不会报错。你之前的实现逻辑冗余——favicon属于静态图片资源，仅用于展示的话完全不需要通过XHR发起请求拉取，XHR请求会强制做CORS校验，而直接通过img标签加载图片属于浏览器允许的跨域资源加载场景，不会触发拦截。
  示例代码：

  <!-- 直接在popup.html里写，不需要额外写JS请求逻辑 -->
  <img src="https://www.google.com/s2/favicons?domain=stackoverflow.com&sz=32" alt="站点favicon">
  

• 如果需要在扩展逻辑里获取favicon的二进制数据（比如做本地缓存），有两种合规实现方式：
  1. 使用Chrome原生提供的favicon API，先在manifest.json中声明favicon权限：

  {
    "manifest_version": 3,
    "permissions": ["favicon"],
    // 其余业务配置项省略
  }
  

  之后可以直接通过固定格式的URL获取对应站点的favicon，格式为：

  chrome-extension://<你的扩展实际ID>/_favicon/?pageUrl=${encodeURIComponent(目标站点完整URL)}&size=32
  

  这个地址是扩展本地上下文提供的，不存在跨域问题，既可以直接填到img的src里展示，也可以通过fetch/XHR请求拿到二进制数据。
  2. 在manifest.json的host_permissions字段中声明你要请求的favicon服务对应的域名权限，扩展申请了对应host权限后，在后台service worker中发起的请求会自动绕过CORS限制，不会被拦截。配置示例：

  {
    "manifest_version": 3,
    "host_permissions": ["https://www.google.com/"],
    // 其余业务配置项省略
  }
  

注意：你原来的代码用了同步模式的XMLHttpRequest，这类同步请求在新版Chrome的扩展上下文里本身就已经被逐步弃用，就算解决了CORS问题也会有性能和兼容性问题，建议替换为直接img标签渲染或者异步请求的方式。

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