How to insert a persistent div without obscuring content in a Chrome extension?

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 with z-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 or padding-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.