I am developing a Chrome extension where a content script, written in React (with TypeScript), inserts a div at the bottom of the window. This div spans the entire width of the window and is intended to serve as a persistent notification bar. However, I’m encountering an issue where the div obscures content on various websites, despite trying several methods to prevent this.
I’m looking for a way to ensure this div is always visible and doesn’t interfere with the page’s content, no matter the site. Here’s a simplified version of my current code:
const MyNotificationDiv = () => (
<div style={{position: 'fixed', bottom: 0, left: 0, width: '100%', zIndex: '1000'}}>
{/* Content */}
</div>
);
export default MyNotificationDiv;
I’d greatly appreciate any advice on how to make this div coexist peacefully with all types of web content or if there’s a better approach to displaying a persistent bar in a Chrome extension.
Thank you in advance!
Here are the approaches I’ve attempted:
-
Using position:
fixed
withz-index
: I’ve tried fixing the div to the bottom of the window and adjusting the z-index, but it still overlaps with some page elements. -
Adding
margin-bottom
orpadding-bottom
to the body: I’ve attempted to push the content up, but the dynamic nature of some sites makes this unreliable. -
Inserting the
div
at the top of the page: I’ve also tried placing the div at the top, but this hasn’t resolved the issue either.