Picture-in-Picture Anything - Place Any Element on Top of your screen

About

This extension allows you to place any web page element into an Always-on-Top window, similar to video Picture-in-Picture mode, but now for any element.

It utilizes a new Document Picture-in-Picture API (https://developer.chrome.com/docs/web-platform/document-picture-in-picture) and works natively in Chrome, Edge, and Opera browsers for desktop. Whether you want to have a video with proper controls and subtitles on top of your screen or an article that you are taking inspiration from before your eyes, this extension will help you.

Please note, however, that some pages will not behave correctly when their elements are in PiP mode.

How to use:

Press a keyboard shortcut (Ctrl-Shift-P)
or
Click on the extension icon in the toolbar
or 
Right-click on the page and select "Picture-in-Picture Anything" to open the Element Selection Overlay

Select an element by clicking the left mouse button on it.

Holding a Shift button when selecting an element will open a Precise Selection Panel. There, you can navigate the element tree and select precisely an element you want.

Pressing ESC before selecting an element will close the window.

Sometimes, you may want to play around with the element you choose to achieve the desired effect (selecting either a parent or child element may help you if an element doesn't behave correctly). 

Please let me know if something needs to be fixed or if you have ideas for improvement.


Github repository: 
https://github.com/boryssey/picture-in-picture-anything