Chrome扩展Manifest V3页面向扩展发送消息失败求助

排查要点与修复方案 #

1. 修正文件名不匹配问题 #

你的manifest.json中content_scripts指定的注入JS文件是index.js，但实际编写的是content.js，这会导致content script根本无法加载。修改manifest.json中的路径配置：

"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["content.js"], // 将index.js替换为content.js
        "css": ["index.css"],
        "run_at": "document_start"
    }
],

2. 统一使用Chrome专属API #

Chrome扩展MV3中，browserAPI存在兼容风险，建议直接使用Chrome原生的chromeAPI，并添加错误回调排查问题：

• content.js修改为：

chrome.runtime.sendMessage({
    name: 'Denis',
}, (response) => {
    // 增加回调排查发送状态
    if (chrome.runtime.lastError) {
        console.error('消息发送失败:', chrome.runtime.lastError);
    } else {
        console.log('消息发送成功');
    }
});

• background.js修改为：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log('收到消息:', message);
    // 如需回复可调用sendResponse
    // sendResponse({ status: '已接收' });
});

3. 正确查看Background Service Worker的日志 #

Background Service Worker的日志不在网页控制台，需通过扩展管理页面查看：

• 打开chrome://extensions/，开启开发者模式
• 找到目标扩展，点击「服务工作者」栏的「检查」，打开专属控制台查看日志

4. 调整Content Script注入时机 #

run_at: "document_start"会在页面DOM未构建、扩展环境未完全初始化时注入脚本，可能导致通信失败。建议改为默认的document_idle：

"run_at": "document_idle"

5. 清理冗余权限 #

manifest中permissions字段重复声明了storage，可删除其中一个，保持配置整洁：

"permissions": ["tabs", "storage", "webRequest", "<all_urls>", "scripting"]

验证步骤 #

1. 修改代码后，在扩展管理页面点击「重新加载」
2. 打开任意网页，查看网页控制台确认content script的执行状态
3. 打开Background Service Worker的控制台，检查是否收到消息

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