如何一键开启画中画模式：Chrome扩展终极指南

发布时间：2026-07-28 08:05

如何在Chrome中开启无痕浏览模式 #生活技巧# #数码产品使用技巧# #电脑设置指南#

如何一键开启画中画模式：Chrome扩展终极指南

【免费下载链接】picture-in-picture-chrome-extension 项目地址: https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension

你是否经常需要在看视频的同时处理其他工作？传统的全屏视频会占用整个浏览器窗口，让你无法同时查看其他内容。画中画（Picture-in-Picture）技术正是解决这个问题的完美方案！通过这个简单实用的Chrome扩展，你可以轻松将视频变成悬浮小窗口，实现真正的多任务处理。这个免费的开源项目基于最新的Web API标准，让你在任何支持视频播放的网站上都能享受画中画带来的便利。

什么是画中画功能？

画中画（Picture-in-Picture，简称PiP）是一种创新的视频播放模式，允许视频以悬浮小窗口的形式显示在屏幕一角，而你可以继续浏览其他网页或使用其他应用程序。这意味着你可以：

边看教程边写代码：学习编程时，视频教程在角落播放，主窗口编写代码边追剧边聊天：视频在角落继续播放，主窗口与朋友聊天边开会边查资料：会议视频在小窗口，主窗口查阅相关文档

3分钟快速安装指南 ⚡

方法一：Chrome商店安装（最简单）打开Chrome浏览器访问Chrome网上应用店搜索"Picture-in-Picture Extension"点击"添加到Chrome"按钮确认权限后即可使用方法二：手动安装（开发者首选）

如果你想要最新版本或想了解扩展的工作原理，可以手动安装：

git clone https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension

cd picture-in-picture-chrome-extension

bash

然后在Chrome中：

打开chrome://extensions/启用右上角的"开发者模式"点击"加载已解压的扩展程序"选择项目中的src文件夹

使用教程：从新手到高手

基础操作：一键开启画中画

使用这个扩展非常简单，只需要三个步骤：

播放视频：在任何网站（YouTube、Bilibili、腾讯视频等）播放视频激活扩展：点击浏览器工具栏中的扩展图标享受多任务：视频会自动变成悬浮小窗口

快捷键操作：更快捷的方式是使用默认快捷键Alt+P（Windows/Linux/Mac通用）

画中画窗口控制技巧

一旦进入画中画模式，你可以：

操作	方法	效果
移动窗口	拖动标题栏	将视频放在屏幕任意位置
调整大小	拖动窗口边缘	自定义视频窗口尺寸
播放控制	点击窗口中央	暂停/继续播放
关闭窗口	点击右上角×	返回正常播放模式

智能视频切换功能

这个扩展还有一个智能功能：当页面中有多个视频时，它会自动选择最大的播放中视频进入画中画模式。如果你切换了正在播放的视频，扩展会自动更新画中画窗口的内容。

技术原理：深入了解画中画API

核心文件结构

让我们看看这个扩展是如何工作的：

picture-in-picture-chrome-extension/

├── src/

│ ├── manifest.json # 扩展配置文件

│ ├── background.js # 后台服务脚本

│ ├── script.js # 核心功能实现

│ └── assets/ # 图标资源

智能视频检测算法

扩展的核心逻辑在src/script.js中，它会：

查找页面中所有<video>元素过滤掉未加载完成或禁用了PiP的视频按视频面积从大到小排序选择最大的播放中视频配置详解

src/manifest.json文件定义了扩展的基本信息：

名称：Picture-in-Picture Extension (by Google)快捷键：Alt+P（可在Chrome设置中修改）权限：需要在所有网站上运行以检测视频版本：采用最新的Manifest V3标准

高级配置与个性化设置 ⚙️

自定义快捷键

如果你不喜欢默认的Alt+P快捷键，可以轻松修改：

在Chrome地址栏输入：chrome://extensions/shortcuts找到"Picture-in-Picture Extension"点击快捷键旁边的铅笔图标输入你喜欢的新快捷键组合解决常见问题

问题	解决方案
快捷键不起作用	检查是否有其他扩展冲突，或重新设置快捷键
某些网站不支持	确保网站没有禁用PiP功能，尝试刷新页面
视频无法进入PiP	确认视频已开始播放，且不是直播流

开发者调试技巧

如果你是开发者，想要深入了解或修改扩展：

查看后台日志：访问chrome://extensions/，点击扩展的"服务工作线程"调试内容脚本：在目标网页打开开发者工具，查看Sources标签测试API：在控制台输入document.querySelector('video').requestPictureInPicture()