Chrome扩展后台文件问题：右键菜单无响应及Popup不显示

问题说明 #

正在开发的Chrome扩展Inglesando 😎 - The Word Catcher用于捕获网页英文单词，当前存在两个核心问题：

• 右键点击上下文菜单添加单词时无任何反应；
• Inspect视图处于“Inactive”状态时，点击扩展图标无法显示Popup，必须切换到扩展后台控制台才能激活。

核心问题分析 #

1. Manifest V3配置错误：V3版本中Service Worker不支持persistent: true参数（该参数仅适用于V2的后台页面），错误配置会导致Service Worker无法正常工作；
2. 消息传递逻辑缺陷：右键添加单词时直接用chrome.runtime.sendMessage发送给Popup，但Popup仅在打开时存在，未打开时消息会丢失；
3. 无持久化存储：未将单词保存到chrome.storage，导致Popup打开后无法加载之前添加的单词；
4. 冗余上下文菜单：创建了多种上下文类型的菜单，但实际只需要捕获选中的文本，多余菜单会干扰逻辑。

修复方案 #

1. 修正Manifest配置 #

移除无效的persistent: true参数，确保符合V3规范：

{
    "manifest_version": 3,
    "name": "Inglesando 😎 - The Word Catcher",
    "version": "1.0",
    "description": "像抓宝可梦一样捕获英文单词，扩充你的词汇量。",
    "permissions": ["contextMenus", "storage"],
    "action": {
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "background.js"
    },
    "icons": {
        "16": "images/flag.png"
    }
}

2. 重构后台逻辑（background.js） #

将右键选中的单词保存到Chrome本地存储，而非直接发送给Popup：

// 监听上下文菜单点击事件
chrome.contextMenus.onClicked.addListener(genericOnClick);

function genericOnClick(info) {
    // 仅处理选中的文本，过滤空内容
    if (!info.selectionText) return;
    const selectedWord = info.selectionText.trim();
    if (!selectedWord) return;

    console.log(`选中的单词: ${selectedWord}`);

    // 从存储中获取现有单词列表，避免重复添加
    chrome.storage.local.get('wordList', (result) => {
        const currentWords = result.wordList || [];
        if (!currentWords.includes(selectedWord)) {
            currentWords.push(selectedWord);
            // 更新存储中的单词列表
            chrome.storage.local.set({ wordList: currentWords }, () => {
                console.log('单词已成功添加');
            });
        }
    });
}

// 扩展安装/更新时创建上下文菜单（仅保留选中文本的上下文）
chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
        title: "Inglesando 😎 - 添加单词",
        contexts: ["selection"],
        id: "addWord"
    });
});

3. 优化Popup逻辑（popup.js） #

Popup打开时自动加载存储中的单词，同时监听存储变化实时更新列表：

document.addEventListener('DOMContentLoaded', () => {
    const wordListElement = document.getElementById("wordList");
    if (!wordListElement) return;

    // 初始化加载单词列表
    loadWordList();

    // 监听存储变化，实时更新界面
    chrome.storage.onChanged.addListener((changes) => {
        if (changes.wordList) {
            loadWordList();
        }
    });
});

// 从存储加载并渲染单词列表
function loadWordList() {
    const wordListElement = document.getElementById("wordList");
    chrome.storage.local.get('wordList', (result) => {
        const wordList = result.wordList || [];
        // 清空现有列表
        wordListElement.innerHTML = '';
        // 逐个渲染单词项
        wordList.forEach((word, index) => {
            const listItem = document.createElement('li');
            listItem.textContent = `${index + 1} - ${word}`;
            wordListElement.appendChild(listItem);
        });
    });
}

4. 修正Popup HTML标签错误 #

将原代码中不匹配的<h3>和</h2>标签修正：

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Inglesando 😎 - The Word Catcher</title>
    <link rel="stylesheet" href="popup.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="content">
        <h3>添加新单词</h3>
        <img src="./images/extension-icon.png" id="iconImage">
    </div>

    <p>你的单词:</p>
    
    <ul id="wordList"></ul>

    <script src="popup.js"></script>
</body>
</html>

效果说明 #

• 右键选中单词后，点击上下文菜单即可将单词保存到本地存储，无需Popup处于打开状态；
• 任何时候点击扩展图标，Popup都会自动加载所有已保存的单词；
• Service Worker会按照V3规范正常工作，无需手动激活，始终响应上下文菜单事件。

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