Chrome 130 のドキュメント ピクチャー イン ピクチャーを簡単に使う

開発者ツールに以下の 3 行をコピペすると対象の要素をピクチャーインピクチャーで表示できて便利。
以下の例だと Google スプレッドシートの表の部分のみを表示できる。（Google スプレッドシートを開いて以下をコピペすると試せる）
何かのチャットとか株価とか何かしらある程度リアルタイムに目視で確認できるようにしておきたいけど、通知機能とかがなくて見張れないとか、サブモニターがないから常に表示しておくのが大変だとかいう場合に、ずっと表示できるようになるから便利。

const target = document.querySelector('canvas'); // PiP で表示したい要素
const pipWindow = await documentPictureInPicture.requestWindow();
pipWindow.document.body.append(target);

pipWindow.window.location.href = '...' で表示する URL を変更しようとしたけどこれはダメだった。

API の使い方は以下を見ればわかる。
https://developer.mozilla.org/ja/docs/Web/API/Window/documentPictureInPicture