boryssey.com

An extension that allows you to use Picture-in-Picture mode on any element of any website.

Latest Version

Version

1.0.1

Update

August 6, 2024

Size

502KiB

Developer

boryssey.com

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

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

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Picture-in-Picture Anything - Place Any Element on Top of your screen", "version": "1.0.1", "description": "An extension that allows you to use Picture-in-Picture mode on any element of any website.", "permissions": ["storage", "activeTab", "scripting", "contextMenus"], "action": { "enable_pip_overlay": "Enable Screenshot Overlay" }, "commands": { "run-pip": { "suggested_key": { "default": "Ctrl+Shift+P", "mac": "MacCtrl+Shift+P" }, "description": "Run Picture-in-Picture Anything on current page" } }, "icons": { "16": "icons/16.png", "32": "icons/32.png", "48": "icons/48.png", "128": "icons/128.png" }, "web_accessible_resources": [ { "resources": ["fonts/Inter.ttf"], "matches": [""] } ], "background": { "service_worker": "background.js" }}

Download CRX(502KiB)

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

An extension that allows you to use Picture-in-Picture mode on any element of any website.

Latest Version

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

Source Manifest.json

Get source code (.Zip)

Latest Updates

Top Rated