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

前言

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

语法

chrome.runtime.onMessage.addListener(
  callback: function,
)
1
2
3

callback参数如下：

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

基本示例

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

在这个例子中，我们监听来自任何发送者的消息；
每当有消息发送时，监听函数(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'}, ()=>{})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

实现

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
      )
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

---

Chrome Developers官方接口文档：

• chrome.runtime.onMessage.addListener