Web前端►Extension►WebExtension

browser.runtime.onMessage

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/26/browser-runtime-onMessage/

摘要

本文主要讲述了：

  1. 作用
  2. 接收消息
  3. 回复消息
  4. Chrome

正文

作用

接收从background.scripts或 ContentScripts 发送过来的消息，收到消息之后可以回复消息。

接收消息

示例：

content_script.js

1
2
3
browser.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
});

回复消息

注意：

  1. 这里的sendResponse，就是sendMessage中的回调函数
  2. 如果要异步回复消息，必须在onMessage的回调函数中返回true。否则等到回调函数执行完毕时，sendResponse将随之失效
  3. 接收端使用sendResponse()回复的消息，只能被发送端的browser.runtime.sendMessage()或browser.tabs.sendMessage()的回调函数接收，不会被发送端的browser.runtime.onMessage接收
  4. 如果多个 iframe 中的 ContentScripts 同时使用sendResponse()向background.scripts回复消息，则background.scripts只能收到其中一个消息

同步回复

以sendResponse()形式回复消息。

示例：

content_script.js

1
2
3
4
5
6
browser.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
  sendResponse({
    msg: 'Hi',
  });
});

以Promise形式回复消息。

示例：

content_script.js

1
2
3
4
5
6
browser.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
  return Promise.resolve({
    msg: 'Hi',
  });
});

异步回复

以sendResponse()形式回复消息。

示例：

content_script.js

1
2
3
4
5
6
7
8
9
browser.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
  setTimeout(function () {
    sendResponse({
      msg: 'Hi',
    });
  }, 1e3);
  return true;
});

以Promise形式回复消息。

示例：

content_script.js

1
2
3
4
5
6
7
8
9
10
browser.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve({
        msg: 'Hi',
      });
    }, 1e3);
  });
});

Chrome

示例：接收并同步回复消息

content_script.js

1
2
3
4
5
6
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
  sendResponse({
    message: 'success',
  });
});

示例：接收并异步回复消息

content_script.js

1
2
3
4
5
6
7
8
9
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
  setTimeout(function () {
    sendResponse({
      msg: 'Hi',
    });
  }, 1e3);
  return true;
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/26/browser-runtime-onMessage/

本文对你有帮助？请支持我

支付宝
微信