Chrome Extension V3 Offscreen音频无法播放：接收端不存在问题求助

问题分析 #

你遇到的两个错误核心原因如下：

1. 接收端未正确监听消息：offscreen.js中存在变量名错误，导致消息无法被识别，触发“Could not establish connection. Receiving end does not exist.”。
2. 上下文失效与消息时机问题：Service Worker会因闲置自动销毁，同时创建offscreen文档后立即发送消息，可能存在页面脚本未加载完成的情况，进而触发“Extension context invalidated.”。
3. 资源路径错误：直接使用相对路径加载音频，offscreen页面无法正确获取扩展内的资源文件。

修复方案 #

1. 修正offscreen.js的变量名错误

// 页面加载完成后主动通知background脚本已就绪
window.addEventListener('load', () => {
    chrome.runtime.sendMessage({ type: "offscreenReady" });
});

// 监听消息时使用正确的参数名msg
chrome.runtime.onMessage.addListener(msg => {
    if (msg.type === "playSoundPlease2") playAudio(msg.play);
});

function playAudio({ source, volume }) {
    const audio = new Audio(source);
    audio.volume = volume;
    // 捕获播放可能出现的错误，避免控制台报错
    audio.play().catch(err => console.error('音频播放失败:', err));
}

2. 优化background.js的消息处理与offscreen加载逻辑

let offscreenReady = false;

// 异步回调返回true，保持消息通道开放
chrome.runtime.onMessage.addListener(async (message, sender) => {
    if (message.type === "playSoundPlease") {
        await playSound();
    } else if (message.type === "offscreenReady") {
        offscreenReady = true;
    }
    return true;
});

async function playSound(source = 'notification.mp3', volume = 1) {
    await createOffscreen();
    // 等待offscreen页面脚本就绪后再发送消息
    await waitForOffscreenReady();
    // 生成扩展资源的绝对路径
    const audioUrl = chrome.runtime.getURL(source);
    await chrome.runtime.sendMessage({ 
        play: { source: audioUrl, volume }, 
        type: "playSoundPlease2" 
    });
}

async function createOffscreen() {
    if (await chrome.offscreen.hasDocument()) return;
    await chrome.offscreen.createDocument({
        url: 'offscreen.html',
        reasons: ['AUDIO_PLAYBACK'],
        justification: '播放通知音频'
    });
    offscreenReady = false;
}

// 等待offscreen就绪的辅助函数
function waitForOffscreenReady() {
    return new Promise(resolve => {
        if (offscreenReady) return resolve();
        const checkInterval = setInterval(() => {
            if (offscreenReady) {
                clearInterval(checkInterval);
                resolve();
            }
        }, 100);
    });
}

3. 优化content.js的定时器管理

避免页面卸载后定时器仍残留，导致无效消息发送：

function checkAndClick() {
    chrome.runtime.sendMessage({type: "playSoundPlease"});
}

// 保存定时器ID，页面卸载时清除
const intervalId = setInterval(checkAndClick, 5000);
window.addEventListener('beforeunload', () => {
    clearInterval(intervalId);
});

额外测试建议 #

• 在Chrome扩展开发者工具中，开启Service Worker的“不暂停”选项，避免调试时Service Worker被销毁。
• 检查manifest.json中的文件路径是否与实际文件结构一致（比如background.js是否在scripts目录下）。

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