Chrome扩展Content Security Policy指令错误：原可用扩展突然失效

问题原因 #

你遇到的报错是因为目标网站自身的Content Security Policy（CSP）限制，而非扩展的CSP配置。扩展的content_security_policy仅约束扩展自身的页面（如popup、后台脚本页面），而内容脚本运行在目标页面的上下文里，加载外部图片时会受目标网站CSP的管控——目标网站的img-src规则未包含*.redd.it，所以图片被拦截。

解决方案 #

方案一：通过后台脚本转存图片为Data URL（推荐） #

核心思路是让扩展后台脚本获取外部图片，转为Data URL后再传给内容脚本，这样绕过目标网站的CSP限制（Data URL属于data:协议，一般网站CSP都会允许）。

步骤1：更新Manifest配置

修正后台脚本配置，添加图片域名的权限，移除无效的SCSS引用：

{
    "manifest_version": 3,
    "name": "扩展名称",
    "description": "描述内容",
    "version": "1.2.2",
    "icons": {"128": "icon_128.png"},
    "permissions": ["storage"],
    "host_permissions": ["https://*.redd.it/*"], // 按需添加用户可能使用的图片域名
    "content_scripts": [{
        "css": ["style.css"], // SCSS需编译为CSS后才能注入
        "js": ["content.js"], // 原background.js作为内容脚本，建议改名避免混淆
        "matches": ["https://www.website.com/*"]
    }],
    "background": {
        "service_worker": "background.js" // Manifest V3使用Service Worker作为后台脚本
    },
    "action": {
        "default_icon": "icon_128.png",
        "default_title": "Extension",
        "default_popup": "popup.html"
    }
}

步骤2：修改内容脚本（content.js）

将直接设置图片URL的逻辑改为请求后台转换为Data URL：

// 初始化UI部分代码保留（创建 dropdown、输入框、按钮等）

// 保存按钮逻辑
document.getElementById("save-url").onclick = function () {
  const value = input.value.trim();
  if (!value) return;
  
  chrome.storage.sync.set({ url: value }, () => {
    // 向后台发送图片转换请求
    chrome.runtime.sendMessage({ action: "getImageDataUrl", url: value }, (response) => {
      if (response?.dataUrl) {
        const background = document.querySelector(".container-main");
        background.style.backgroundImage = `linear-gradient(transparent 40%, #20283c 90%),url(${response.dataUrl})`;
      }
    });
  });
};

// 页面加载时恢复背景
chrome.storage.sync.get("url", (data) => {
  if (!data.url) return;
  
  chrome.runtime.sendMessage({ action: "getImageDataUrl", url: data.url }, (response) => {
    if (response?.dataUrl) {
      const background = document.querySelector(".container-main");
      background.style.backgroundImage = `linear-gradient(transparent 40%, #20283c 90%),url(${response.dataUrl})`;
    }
  });
});

// 其他逻辑（下拉菜单显示/隐藏、更新按钮）保留不变

步骤3：后台脚本（background.js）实现图片转换

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action !== "getImageDataUrl") return;
  
  fetch(message.url)
    .then(res => {
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      return res.blob();
    })
    .then(blob => {
      const reader = new FileReader();
      reader.onloadend = () => sendResponse({ dataUrl: reader.result });
      reader.readAsDataURL(blob);
    })
    .catch(err => {
      console.error("图片转换失败:", err);
      sendResponse({ dataUrl: null });
    });
  
  return true; // 保持消息通道开放，异步返回结果
});

方案二：修改目标网站CSP（不推荐） #

直接注入脚本修改页面CSP会降低网站安全性，且Manifest V3中需要特殊权限，大概率无法通过Chrome应用商店审核，因此不建议使用。

额外修复点 #

1. 原代码中保存按钮逻辑里的url变量未定义，已在方案中修正为response.dataUrl。
2. 原Manifest将SCSS文件直接作为content script的CSS注入，SCSS需先编译为普通CSS才能使用。
3. 原Manifest错误地将后台脚本作为content script注入，已修正为Service Worker配置。

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