Web前端►Extension►WebExtension

browser.tabs.sendMessage

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/24/browser-tabs-sendMessage/

摘要

本文主要讲述了：

  1. 作用
  2. Chrome

正文

作用

从background.scripts向 ContentScripts 发消息。

注意：若对应标签页中存在 iframe，且all_frames，那么对应标签页和对应标签页中所有非空白 iframe 都能收到同一条消息

示例：

background_script.js

1
2
3
4
5
6
7
8
9
10
11
12
browser.browserAction.onClicked.addListener(function (tab) {
  browser.tabs
    .sendMessage(tab.id, {
      msg: 'Hello, world!',
    })
    .then(function (message) {
      console.log(message);
    })
    .catch(function (error) {
      console.log(error);
    });
});

Chrome

注意：

  1. 这里的回调函数，就是onMessage中的sendResponse
  2. 如果要使用回调函数，必须在onMessage的回调函数中返回true。否则会报错

示例：发送并接收消息

background_script.js

1
2
3
4
5
6
7
8
9
10
11
chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.sendMessage(
    tab.id,
    {
      msg: 'Hello, world!',
    },
    function (message) {
      console.log(message);
    }
  );
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/24/browser-tabs-sendMessage/

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

支付宝
微信