Chrome扩展：内容脚本向弹窗页面发消息失败的解决方案咨询

问题根源 #

弹窗关闭后，popup.js的上下文会被销毁，此时不存在消息监听的接收端，直接调用chrome.runtime.sendMessage自然会抛出「接收端不存在」的错误。

解决方案1：后台脚本中转+暂存数据 #

后台脚本（Service Worker）在扩展激活状态下持续运行，可作为中间层接收内容脚本的消息并暂存，等弹窗打开后再将数据传递给弹窗。

1. 配置manifest.json #

确保注册后台脚本：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 修改content.js #

将消息发送至后台脚本，而非直接发给弹窗：

// 创建按钮
var button = document.createElement("button");
button.innerHTML = "发送页面信息";

button.addEventListener("click", function(){
  // 向后台脚本发送页面信息
  chrome.runtime.sendMessage({type: "PAGE_DATA", data: "来自内容脚本的消息！"});
});

document.body.appendChild(button);

3. 编写background.js #

接收内容脚本的消息并暂存，同时监听弹窗的数据请求：

let cachedPageData = null;

// 监听内容脚本的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "PAGE_DATA") {
    cachedPageData = request.data;
    console.log("后台已暂存页面数据：", cachedPageData);
  }
  // 响应弹窗的数据请求
  if (request.type === "FETCH_PAGE_DATA") {
    sendResponse(cachedPageData);
  }
});

4. 修改popup.js #

弹窗加载时主动向后台请求暂存的数据：

document.addEventListener('DOMContentLoaded', () => {
  // 向后台请求页面数据
  chrome.runtime.sendMessage({type: "FETCH_PAGE_DATA"}, (response) => {
    if (response) {
      console.log("获取到页面数据：", response);
      // 将数据展示在弹窗中
      document.body.innerHTML += `<p>页面信息：${response}</p>`;
    }
  });
});

解决方案2：用chrome.storage直接存储数据 #

借助Chrome的本地存储API，内容脚本将数据存入存储，弹窗打开时直接读取存储内容。

1. 修改content.js #

点击按钮时将数据存入本地存储：

var button = document.createElement("button");
button.innerHTML = "发送页面信息";

button.addEventListener("click", function(){
  const pageData = "来自内容脚本的消息！";
  // 存入本地存储
  chrome.storage.local.set({pageData: pageData}, () => {
    console.log("页面数据已存储");
  });
});

document.body.appendChild(button);

2. 修改popup.js #

弹窗加载时读取存储的数据：

document.addEventListener('DOMContentLoaded', () => {
  // 读取本地存储的页面数据
  chrome.storage.local.get('pageData', (result) => {
    if (result.pageData) {
      console.log("读取到页面数据：", result.pageData);
      // 展示数据到弹窗
      document.body.innerHTML += `<p>页面信息：${result.pageData}</p>`;
      // 可选：读取后清空存储，避免重复展示
      chrome.storage.local.remove('pageData');
    }
  });
});

3. 配置manifest.json #

添加storage权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["storage"]
}

方案对比 #

• 方案1适合需要处理复杂逻辑、暂存多条数据的场景，后台脚本可做额外的业务处理；
• 方案2更简洁，无需后台脚本，适合简单数据的传递存储。

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