如何从Next.js应用向Chrome扩展发送信息

这正是chrome.runtime.sendMessage的典型应用场景——网页应用向Chrome扩展发送消息，下面是具体实现步骤：

一、扩展端配置与代码 #

1. 配置manifest.json #

首先在扩展的manifest.json中声明externally_connectable，指定允许发送消息的应用域名，同时配置后台服务worker：

{
  "manifest_version": 3,
  "name": "调试日志接收扩展",
  "version": "1.0",
  "externally_connectable": {
    "matches": ["https://你的应用域名/*"] // 本地开发可改为"http://localhost:*"
  },
  "background": {
    "service_worker": "background.js"
  }
}

2. 后台监听消息 #

在background.js中使用chrome.runtime.onMessageExternal监听来自应用的消息：

chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
  // 处理接收到的调试日志，比如打印到扩展后台控制台
  console.log("[扩展接收] 应用日志:", message);
  // 可选：回复应用表示已接收
  sendResponse({ code: 200, msg: "日志已接收" });
  // 服务worker环境下，若需要异步处理需返回true
  return true;
});

二、应用端代码改造 #

替换原有的console.log，改为向扩展发送消息：

// 封装发送日志的工具函数
function sendDebugLogToExtension(logContent) {
  // 替换为你的扩展ID（在chrome://extensions/开发者模式下查看）
  const EXTENSION_ID = "abcdefghijklmnopqrstuvwxyzabcdef";
  
  chrome.runtime.sendMessage(EXTENSION_ID, logContent, (response) => {
    // 处理发送失败的情况（比如扩展未安装、域名不匹配），降级回console.log
    if (chrome.runtime.lastError) {
      console.log("[降级输出]", logContent);
      return;
    }
    // 可选：处理扩展的回复
    console.log("[扩展回复]", response);
  });
}

// 替换原console.log调用
// 原代码：console.log("用户触发了登录操作");
sendDebugLogToExtension("用户触发了登录操作");

// 也可以发送结构化日志
sendDebugLogToExtension({
  type: "api_error",
  url: "/api/login",
  errorMsg: "用户名或密码错误",
  timestamp: new Date().toISOString()
});

关键注意事项 #

• 必须保证manifest.json中externally_connectable.matches的域名与应用域名完全匹配，否则消息会被拦截
• 扩展ID要准确复制，在扩展管理页面开启开发者模式后即可查看
• 本地开发时，应用域名如果是localhost，需要在matches中明确添加（如"http://localhost:3000/*"）
• 扩展需以开发者模式加载（已解压扩展）或正常安装，才能接收外部消息

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