Chrome扩展自定义光标图片加载报错：Content Security Policy问题

一、核心问题分析 #

结合你的manifest配置和报错现象，存在两个关键问题：

1. Manifest V3禁止'unsafe-eval'：你在CSP的script-src中添加了'unsafe-eval'，这违反了Manifest V3的安全规则，会直接导致扩展加载报错。
2. 扩展内资源未声明可访问：自定义光标图片属于扩展包内资源，未通过web_accessible_resources声明允许页面访问，导致content script注入的CSS无法加载该图片。

二、修复步骤 #

1. 修正Content Security Policy配置 #

移除script-src中的'unsafe-eval'，Manifest V3严格禁止该指令，若代码中使用了eval相关逻辑，需重构代码替换为安全写法。修改后的CSP配置如下：

"content_security_policy": {
  "script-src": ["'self'", "https://www.gstatic.com"], 
  "object-src": ["'self'"],
  "img-src": ["'self'", "data:", "https://www.gstatic.com"]
}

2. 添加web_accessible_resources声明 #

在manifest.json中新增该字段，允许所有页面访问你的光标图片资源（假设图片名为cursor.png，放在扩展根目录）：

"web_accessible_resources": [
  {
    "resources": ["cursor.png"],
    "matches": ["<all_urls>"]
  }
]

如果有多个光标图片，可在resources数组中添加多个文件名，比如["cursor1.png", "cursor2.png"]。

3. 验证CSS中的图片路径 #

确保style.css中光标图片的引用路径正确，比如：

body {
  cursor: url('cursor.png'), auto;
}

若图片放在子目录（如images/cursor.png），路径需对应调整为url('images/cursor.png')。

三、完整修复后的manifest.json示例 #

{
  "name": "Custom Cursor Extension",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Adds a custom cursor on developer.chrome.com.",
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "/background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["style.css"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "image.png"
  },
  "content_security_policy": {
    "script-src": ["'self'", "https://www.gstatic.com"], 
    "object-src": ["'self'"],
    "img-src": ["'self'", "data:", "https://www.gstatic.com"]
  },
  "web_accessible_resources": [
    {
      "resources": ["cursor.png"],
      "matches": ["<all_urls>"]
    }
  ]
}

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