Chrome扩展content.js向background.js发消息异常问题

核心问题原因 #

1. Manifest.json 背景服务工作者配置错误：这是导致消息仅在打开弹窗后生效的关键原因。配置使用了错误的键名 background.service_worker，保留了MV3中已废弃的persistent字段，还错误使用scripts数组（MV3服务工作者仅支持单个脚本文件）。
2. Background.js 消息监听器语法错误：if语句缺少大括号，导致sendResponse()始终执行，且未正确处理异步操作的消息通道保持逻辑。
3. Content.js 重复添加点击事件监听器：每次页面导航完成都会给按钮新增监听器，可能引发多次重复发送消息。
4. 服务工作者内存变量丢失：lastMusics和music等变量存储在内存中，服务工作者闲置终止后数据会丢失。

具体修复步骤 #

1. 修正 Manifest.json 背景配置 #

替换错误的背景配置为MV3标准格式：

"background": {
    "service_worker": "/js/background.js"
},

同时优化内容脚本的匹配范围（仅在YouTube运行）：

"content_scripts": [{
    "matches": ["*://*.youtube.com/*"],
    "js": ["/js/content.js"],
    "css": ["/css/content.css"],
    "run_at": "document_end"
}],

2. 修复 Background.js 消息监听器与异步逻辑 #

修正语法错误，改用存储API持久化数据（避免内存丢失）：

async function openMusic() {
    // 改用原生tabs API确保异步处理
    await chrome.tabs.create({ url: `https://www.youtube.com/${music}` });
    
    // 从存储读取历史记录
    let { lastMusics } = await chrome.storage.local.get('lastMusics');
    lastMusics = lastMusics || [];
    
    if (lastMusics.length >= 10) {
        lastMusics.shift();
    }
    if (!lastMusics.includes(music)) {
        lastMusics.push(music);
    }
    
    // 保存到存储
    await chrome.storage.local.set({ lastMusics });
}

chrome.runtime.onMessage.addListener((response, sender, sendResponse) => {
    if (response.request === "call-func_openMusic") {
        openMusic().then(sendResponse).catch(err => {
            console.error("打开音乐失败:", err);
            sendResponse({ error: err.message });
        });
        // 返回true保持消息通道开放，等待异步响应
        return true;
    }
});

3. 优化 Content.js 避免重复监听器 #

仅在创建按钮时添加一次点击监听器，并增加错误处理：

document.addEventListener('yt-navigate-finish', process);
document.addEventListener('DOMContentLoaded', process);

function process() {
    if (!location.pathname.startsWith('/watch')) {
        return;
    }

    let yt_btn_music = document.getElementById("yt-btn-music-12atv");
    if (!yt_btn_music) {
        yt_btn_music = document.createElement("button");
        yt_btn_music.innerHTML = "Keşif Kuyruğu";
        yt_btn_music.id = "yt-btn-music-12atv";
        
        // 仅在创建按钮时添加一次监听器
        yt_btn_music.addEventListener("click", () => {
            chrome.runtime.sendMessage(
                { request: "call-func_openMusic" },
                (response) => {
                    // 捕获消息发送错误，便于调试
                    if (chrome.runtime.lastError) {
                        console.error("消息发送失败:", chrome.runtime.lastError);
                    }
                }
            );
        });
        
        document.getElementById("below").insertBefore(yt_btn_music, document.getElementById("below").firstChild);
    }
}

关键说明 #

• MV3服务工作者是无状态的，所有需要持久化的数据必须使用chrome.storageAPI，不能依赖内存变量。
• chrome.runtime.sendMessage会自动唤醒休眠的服务工作者，修正manifest配置后无需依赖弹窗激活。
• 添加错误回调可以快速定位消息发送失败的原因。

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