I'm developing a Chrome extension with React that overlays custom UI elements on top of video players across various websites. The extension works as expected in standard view, but I encounter issues when the video enters fullscreen mode. My overlay gets pushed to the background, behind the fullscreen video, making it invisible to the user.
To address this, I've implemented a workaround where I dynamically insert the overlay into the DOM tree of the fullscreen element, effectively bringing the overlay to the foreground. While this solves the visibility issue, it introduces a new problem: the loss of React's event handling capabilities (e.g., onClick) on the overlay's elements. It seems like once the overlay is manually inserted into the DOM, React no longer manages these elements, and thus, the React-specific event handlers stop working.
Here's an example of how I'm adding the overlay to the fullscreen element:
if (fullscreenElement && canvasParentRef.current) {
fullscreenElement.appendChild(canvasParentRef.current);
}
Questions:
How can I add my React-based overlay to a fullscreen video in a way that keeps the React functionality intact, especially for event handlers like onClick? Is there a more React-friendly approach to ensure that overlays remain functional and interactive atop fullscreen video players within a Chrome extension?
PS: Not a native english speaker. Used chatgpt to rephrase properly