As addon developer I have to say I really miss the PiP API.
For example, I would love to see a minimize button (or some “shrink” button), and some predefined resize buttons (like “Resize to 1920x1080”).
And all we need is some light API. Maybe even reuse existing API, like the browser.windows.update
and write a simple proxy that would translate those calls into native ones.
And for the DOM access we would use content scripts - although I can imagine this being a bit harder if the DOM is not sandboxed enough.
Proof of concept:
With some AI help, the code literally writes itself , so quickly I’ve manged to resize the window and move it to the corner by executing this in the Browser Console (Ctrl + Shift + J):
await (async () => {
const w = Array.from(Services.wm.getEnumerator("")).find(win => win.location.href === "chrome://global/content/pictureinpicture/player.xhtml");
if (w) {
const dpr = w.devicePixelRatio;
// Get current dimensions to calculate the aspect ratio
const currentWidth = w.innerWidth;
const currentHeight = w.innerHeight;
const aspectRatio = currentHeight / currentWidth;
console.log("Current dimensions:", currentWidth, currentHeight);
console.log("Current aspect ratio:", aspectRatio);
// Desired width in physical pixels
const desiredWidth = 1920;
// Calculate height based on the current aspect ratio
const desiredHeight = Math.round(desiredWidth * aspectRatio);
// Calculate dimensions accounting for the device pixel ratio
const targetWidth = Math.round(desiredWidth / dpr);
const targetHeight = Math.round(desiredHeight / dpr);
// Move the window to position (0,0) and resize it
w.moveTo(0, 0);
w.resizeTo(targetWidth, targetHeight);
// Verify the new size and position
console.log("Requested physical size:", desiredWidth, desiredHeight);
console.log("CSS pixel size:", targetWidth, targetHeight);
console.log("Actual size after resize:", w.innerWidth * dpr, w.innerHeight * dpr);
}
else {
console.log("PiP window not found");
}
})()
I have a feeling I’ll start hacking my Firefox soon .