Chrome扩展Manifest V3中chrome.scripting.executeScript执行失败求助

你遇到的CSP错误核心原因：使用chrome.scripting.executeScript的func参数时，Chrome会自动将函数序列化为内联脚本注入目标页面，而你的http://localhost:3001/cv页面的CSP规则禁止内联脚本，所以即便你没手动写内联代码，也会触发这个报错。

推荐采用「独立脚本文件+消息传递」的方式彻底规避内联脚本的CSP限制，具体步骤如下：

1. 提取函数到独立脚本文件 #

创建post-data.js文件，把postJson函数和消息监听逻辑移进去：

function postJson(url, jsonData) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  xhr.send(JSON.stringify(jsonData));
  
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log('XHR POST请求成功:', xhr.responseText);
      } else {
        console.error('XHR POST请求失败:', xhr.statusText);
      }
    }
  }
}

// 监听扩展发来的消息，执行请求逻辑
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'submitCvData') {
    postJson(message.url, message.jsonData);
    sendResponse({status: '请求已执行'});
  }
});

2. 修改扩展注入逻辑 #

替换openTabAndPostData函数，先注入独立脚本，再通过消息传递数据：

async function openTabAndPostData(jsonData) {
  const tab = await chrome.tabs.create({url: CV_URL});
  
  // 注入独立脚本文件（非内联，符合CSP规则）
  await chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['post-data.js']
  });
  
  // 通过消息传递数据给注入的脚本
  chrome.tabs.sendMessage(tab.id, {
    action: 'submitCvData',
    url: tab.url,
    jsonData: jsonData
  }, (response) => {
    if (chrome.runtime.lastError) {
      console.error('发送数据失败:', chrome.runtime.lastError);
    } else {
      console.log('数据发送成功');
    }
  });
}

3. 修正Manifest配置错误 #

你的Manifest里把background.js放到了content_scripts的js数组中，这是错误的——background.js是Service Worker，不能作为内容脚本注入页面。请移除这一项：

"content_scripts": [
  {
    "matches": [
      "https://www.linkedin.com/in/*"
    ],
    "js": [
      "content.js",
      // 移除此行 → "background.js",
      "static/js/main.[HASH].js"
    ]
  }
]

可选：添加资源访问声明 #

如果注入脚本时出现权限问题，可在Manifest中添加web_accessible_resources，允许目标页面访问你的脚本：

"web_accessible_resources": [
  {
    "resources": ["post-data.js"],
    "matches": ["http://localhost:3001/*"]
  }
]

如果你有权修改目标页面（localhost:3001/cv）的CSP，可以临时添加'unsafe-inline'或者报错提示的哈希值，但这种做法会降低页面安全性，仅适合测试环境：

• 在页面CSP头中添加：script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' 'unsafe-inline';
• 或者使用报错中的哈希：script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' 'sha256-l0EBls9+5sHTJ5FqNSzs3FP1dCE2sL/MgTgPGh29hSg=';

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