How can I make a Extension Draggable page that can be moved anywhere on the screen?

[Interview-Prep1]

Body

I’m building a Chrome Extension using React and react-draggable.
Right now, my draggable

only moves inside the extension popup — but I want it to be draggable anywhere on the user’s whole screen, not just inside the popup window.

I tried:
1- Wrapping my whole page in (with nodeRef and ref to fix findDOMNode errors).
2- Setting position: fixed and z-index styles.
3- But it’s still limited to the popup window’s size — I can’t drag it outside.

I just want to make this draggable page:

return ( <Draggable nodeRef={dragRef}> <div ref={dragRef} className={styles.container} style={{ zIndex: 9999, cursor: 'move' }} > . . . </div> <Draggable/> )

IT Still limited to the popup window’s size — I can’t drag it outside.

Guidelines

• I have read and understood this category's guidelines before making this post.

[mecodeatlas]

Hi there @Interview-Prep1! 👋

Thanks for bringing this up - it looks like there's already an open thread discussing this exact topic: How to make a Chrome Extension draggable outside the popup.

To keep things organized and avoid splitting the conversation, I’ll go ahead and close this discussion. Feel free to join the conversation in the linked thread and share your experience or follow along for updates! 💬

Thanks for your understanding!