Chrome扩展弹窗无法显示保存的选中单词问题求助

Chrome扩展的Popup页面是临时实例：只有用户点击扩展图标打开Popup时，它才会加载运行；关闭Popup后页面立即销毁，对应的消息监听器也会失效。这就是为什么只有在Popup打开时保存单词，消息才能被接收——关闭状态下根本没有接收方处理sendArray消息。

放弃直接向Popup发送消息的方式，改用chrome.storage.local持久化存储+存储变更监听的方案，确保数据在任何状态下都能同步到Popup。

1. 修改Popup.js：主动拉取+监听存储变化 #

document.addEventListener('DOMContentLoaded', function () {
  const wordList = document.getElementById('wordList');

  // 渲染单词列表的通用方法
  function renderWordList(arr) {
    wordList.innerHTML = "";
    arr.forEach(word => {
      const listItem = document.createElement('li');
      listItem.textContent = word;
      wordList.appendChild(listItem);
    });
  }

  // 初始化时从本地存储加载已有数据
  function loadSavedWords() {
    chrome.storage.local.get({ key: [] }, result => {
      const savedWords = result.key || [];
      renderWordList(savedWords);
    });
  }

  // 监听本地存储变化，实时更新列表
  chrome.storage.onChanged.addListener((changes, namespace) => {
    if (namespace === 'local' && changes.key) {
      renderWordList(changes.key.newValue || []);
    }
  });

  // 执行初始加载
  loadSavedWords();
});

2. 修改Content.js：移除无效消息发送，优化存储逻辑 #

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  const selectedWord = window.getSelection().toString().trim();

  if (request.action === 'saveSelectedWord' && selectedWord) {
    chrome.storage.local.get({ key: [] }, result => {
      let savedWords = result.key || [];

      // 可选：避免重复添加相同单词
      if (!savedWords.includes(selectedWord)) {
        savedWords.push(selectedWord);
        chrome.storage.local.set({ key: savedWords }, () => {
          console.log("单词已保存：", savedWords);
        });
      } else {
        console.log("该单词已存在");
      }
    });
  }
});

3. Background.js保持不变 #

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    title: '保存选中单词',
    contexts: ['selection'],
    id: 'saveSelectedWord'
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'saveSelectedWord') {
    chrome.tabs.sendMessage(tab.id, { action: 'saveSelectedWord' });
  }
});

4. 确保Manifest.json声明权限 #

在manifest.json中添加必要权限：

{
  "permissions": ["storage", "contextMenus", "activeTab"]
}

• 数据持久化：不管Popup是否打开，保存的单词都会存在本地存储中
• 实时同步：Popup打开时自动加载历史数据，打开后新增单词也会实时更新列表
• 可靠性高：避免了Popup关闭时消息丢失的问题，逻辑更稳定

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