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

[MUHAMMAD-ALI-BILAL]

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.

[afansetyadi]

If you want to make a draggable component that works anywhere on the user's screen you need to inject your React component directly into the active webpage (not inside the popup).