Use events on elements to exchange data with the pageScript

[fregante]

Initially discussed in https://github.com/pixiebrix/pixiebrix-extension/issues/7779, but it turned out not to be the reason of the issue.

This would avoid having to "create a selector" and pass it to the pageScript for it to find it again.

https://github.com/pixiebrix/pixiebrix-extension/blob/cef1dba42b725dcaf964ab9a41d0380ae2236153/src/contentScript/textEditorDom.ts#L63-L66

Extracted from that issue:

I think the whole communication looks like this:

// content script
elementWeAlreadyHaveAReferenceTo.dispatchEvent(new CustomEvent('pb-input', {
	bubble: true,
	detail: data,
}))

// page script
document.body.addEventListener('pb-input', (event) => {
  insertIntoAdvancedEditor(event.target, event.detail.text)
});