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

小鱼儿 2024-02-17 08:45 4阅读 0赞

**为什么要进行消息通信？**

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
     })

## 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
      }
    })

不推荐使用`window.postMessage`进行消息广播：  
来源CSDN论坛评论：[https://blog.csdn.net/dongzi\_yu/article/details/128441466\#comments\_28957465][https_blog.csdn.net_dongzi_yu_article_details_128441466_comments_28957465]  
![image.png][]

[https_blog.csdn.net_dongzi_yu_article_details_128441466_comments_28957465]: https://blog.csdn.net/dongzi_yu/article/details/128441466#comments_28957465
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/120147616550454e8d43692bc0056e1a.png