为什么要进行消息通信?
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