0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-10-18

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?