[chrome插件]content_script和页面js通信

content_script和页面js通信

content_script不能访问web页面或其它content script中定义的函数和变量，但是可以操作界面dom。我们可以通过dom事件实现界面script和content_script的通信。

1.在界面script定义一个自定义事件msgEvent

// 注册一个自定事件
var event = document.createEvent('Event');
event.initEvent('msgEvent', true, true);

2.在界面script中监听自定义事件，我们把事件绑定在document上

// detail是事件数据
document.addEventListener('msgEvent', ({detail}) => {
	// 接受数据
	let { type, data } = detail;
	console.log(type. data);
});

3.在content_script触发事件msgEvent

// 构造数据
let data = { 
	type: 'send',
	data: { a: 1 }
};
// 自定义事件
const cEvt = new CustomEvent('msgEvent', { detail: data });
// 触发事件
document.dispatchEvent(cEvt);