【chrome扩展开发】消息通讯之onMessage消息监听

最新推荐文章于 2025-07-23 09:25:10 发布

转悠的陀螺

最新推荐文章于 2025-07-23 09:25:10 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： # Chrome 文章标签： chrome 前端 javascript

本文链接：https://blog.youkuaiyun.com/u011159821/article/details/132823875

Chrome 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Chrome扩展程序中的onMessage.addListenerAPI，如何监听和处理来自不同源的消息，以及安全限制。还展示了如何封装和在背景脚本中使用该功能，以及官方文档链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

chrome.runtime.onMessage.addListener 是 Chrome 扩展程序中用于监听其他模块发送的消息并做出响应的 API
当从扩展进程 (by runtime.sendMessage) 或内容脚本 (by tabs.sendMessage)发送消息时触发

语法

chrome.runtime.onMessage.addListener(
  callback: function,
)

callback参数如下：

(message: any, sender: MessageSender, sendResponse: function) => boolean | undefined

参数	类型	说明
request	Any	包含发送者的信息和请求的内容
sender	MessageSender	包含发送者的详细信息
sendResponse	Function	是一个可以用来向发送者发送响应的函数

基本示例

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.id + " 发送了请求：" + request.data);
    // 你可以在这里处理接收到的消息
    // 如果需要，你可以通过 sendResponse 函数发送响应给发送者
    // sendResponse({data: "回复消息"});
  }
);

在这个例子中，我们监听来自任何发送者的消息；
每当有消息发送时，监听函数(callback)就会被调用；

注意

出于安全考虑，发送的消息和响应必须在相同的扩展程序内传递，不能跨越扩展程序。
onMessage方法需要在background脚本中注册

封装

示例

const listenerList = {
	token: function({ request, response }){
		// code...
	},
	/**
	 * 创建与项目的共享变量数据
	 */
	createPluginVariable: function({ request, response }){
		let name = SystemEnum.APP_PLUGIN_KEY;
	    let value = '1';
	    let _cf = {url: SysConfig.APP_URL, name}
	    chrome.cookies.remove(_cf,function (res) {
	      _cf.domain = SysConfig.APP_DOMAIN;
	      _cf.value = value;
	      _cf.expirationDate = new Date().setDate(new Date().getDate() + 7);
	      chrome.cookies.set(_cf, function (res) {
	        response({name, value, config: request, res})
	      });
	    });
	}
};

const message = new MessageListener();
for (let messageKey in listenerList){
  message.addListener(messageKey, listenerList[messageKey]);
}
message.start();

// content script脚本中发送消息
// chrome.runtime.sendMessage({contentRequest:'createPluginVariable'}, ()=>{})

实现

class MessageListener {
  /**
   * @var chrome.runtime.onMessage|null
   */
  _message
  /**
   * @var Object
   */
  _listener

  constructor() {
    this._listener = {}
    this._message = chrome.runtime.onMessage || null
    return {
      addListener: (messageKey, request) => this.addListener(messageKey, request),
      start: () => this.start(),
    }
  }

  addListener(messageKey, request) {
    this._listener[messageKey] = request
  }

  start() {
    if (!this._message) return
    let that = this
    that._message.addListener(function (request, sender, response) {
      return (
        chrome.tabs.query({ currentWindow: !0, active: !0 }, function () {
          if (!!that._listener[request.contentRequest]) {
            that._listener[request.contentRequest]({
              request,
              response,
            })
          }
        }),
        !0
      )
    })
  }
}