Chrome扩展Popup页面消息异常：需开DevTools/无法追加内容

问题1：消息仅在打开开发者工具时渲染 #

原因 #

Popup默认关闭后会被销毁，只有处于打开状态时才会存在chrome.runtime.onMessage监听器。Content Script发送消息时若Popup未打开，消息会直接丢失；打开开发者工具会强制保留Popup实例，因此能收到后续消息。

解决办法（推荐用storage暂存历史消息） #

修改Content Script，发送消息同时将消息存入本地存储：

// Content JS
chrome.runtime.sendMessage(message);
// 存入storage保存历史消息
chrome.storage.local.get('messageHistory', (res) => {
  const history = res.messageHistory || [];
  history.push(message);
  chrome.storage.local.set({ messageHistory: history });
});

修改Popup，打开时先读取历史消息，再监听新消息：

// Popup JS
document.addEventListener('DOMContentLoaded', () => {
  const textEl = document.getElementById("text");
  // 加载历史消息
  chrome.storage.local.get('messageHistory', (res) => {
    const history = res.messageHistory || [];
    history.forEach(msg => {
      textEl.innerHTML += `<br>${msg}`;
    });
  });
  // 监听新消息
  chrome.runtime.onMessage.addListener((request) => {
    textEl.innerHTML += `<br>${request}`;
    // 更新storage
    chrome.storage.local.get('messageHistory', (res) => {
      const history = res.messageHistory || [];
      history.push(request);
      chrome.storage.local.set({ messageHistory: history });
    });
  });
});

问题2：无法追加内容，仅显示第一条消息 #

原因 #

1. Popup中的chrome.tabs.sendMessage仅在Popup打开时执行一次，只能获取当前的message，无法捕获后续动态生成的消息；
2. 代码存在字段不匹配问题：Content Script返回的是{getmessage: message}，但Popup中读取的是response.farewell，会导致获取不到有效内容。

解决办法（结合主动推送+主动查询） #

修改Content Script，动态生成message时主动推送，同时保留查询接口：

// Content JS
// 假设这是你动态生成message的逻辑
let message = '';
function generateNewMessage(newContent) {
  message = newContent;
  // 主动向Popup推送新消息
  chrome.runtime.sendMessage({ type: 'newMsg', content: message });
}

// 保留供Popup主动查询的接口
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.greeting === "hello") {
    sendResponse({ getmessage: message });
  }
});

修改Popup，打开时先查询当前消息，再监听后续推送的消息：

// Popup JS
document.addEventListener('DOMContentLoaded', () => {
  const listEl = document.getElementById("MyData");
  // 封装添加列表项的函数
  function addListItem(content) {
    const li = document.createElement("li");
    li.textContent = content;
    listEl.appendChild(li);
  }

  // 打开时先获取当前消息
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { greeting: "hello" }, (response) => {
      if (response?.getmessage) {
        addListItem(response.getmessage);
      }
    });
  });

  // 监听Content Script推送的新消息
  chrome.runtime.onMessage.addListener((request) => {
    if (request.type === 'newMsg') {
      addListItem(request.content);
    }
  });
});

额外注意事项 #

• 确保在manifest.json中声明必要权限：

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

• Popup的所有DOM操作必须放在DOMContentLoaded事件回调中，避免元素未加载完成导致的null错误。

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