浏览器插件在content_script和top窗口之间进行消息通信

为什么要进行消息通信？

        content_script和top窗口之间除了DOM共享之外，window对象是不共享的。如果content_script需要获得top窗口中window对象的数据，就需要使用到通信。反之，也是相同的情况。

1、自定义监听事件（推荐）

// 广播：浏览器原生网页（top）位置进行消息广播

// 发送广播: top
let customEvent = new CustomEvent('my-message-type', { details: 'this is a message!'})
window.dispatchEvent(customEvent)

// 消息监听：content_script内容脚本进行监听
 window.addEventListener('my-message-type', (e) => {
   console.log(e)
   console.log(e?.details) // this is a message!
   // do something
 })

1
2
3
4
5
6
7
8
9
10
11
12
13

2、监听广播事件

// 发送广播消息：top
window.postMessage({'type': 'my-message-type', 'data': 'message!'}, '*')

// 监听消息：content_script
window.addEventListener('message', (e) => {
  console.log('e:', e)
  console.log('e.data:', e?.data)
  console.log('e.data.type:', e?.data?.type)
  console.log('e.data.data:', e?.data?.data)

  if (e?.data?.type === 'my-message-type') {
    // do something
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

不推荐使用window.postMessage进行消息广播：
来源CSDN论坛评论：https://blog.csdn.net/dongzi_yu/article/details/128441466#comments_28957465