如何让视频永远跟着你一个Chrome画中画扩展就够了【免费下载链接】picture-in-picture-chrome-extension项目地址: https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension边看视频边写文档你是不是也总在窗口之间来回折腾picture-in-picture-chrome-extension 是一款轻量级 Chrome 扩展它调用浏览器原生的画中画能力让任意网页里的视频直接变成悬浮小窗——无论你切到哪个标签页画面都稳稳钉在屏幕角落随看随停。它没有花哨的设置界面也没有复杂的配置项。装上之后你的日常会多一个动作按下快捷键视频跳到角落继续播再按一下它又回到原处。仅此而已。窗口切换 vs 悬浮窗画中画模式帮你省下多少注意力先说说它解决的是什么麻烦。以前跟教程学东西时你的手基本长在键盘上切到编辑器写两行切回去看两眼再切回来……一个十分钟的视频来回点了十几次窗口注意力早被切碎了。更难受的是视频窗口一缩小字幕看不清进度条找不着一切全乱套。画中画模式Picture-in-Picture简称 PiP把这套流程彻底翻了个个儿视频不再占用整个标签页而是缩成一个可以随意拖动的悬浮窗口永远盖在其他窗口之上。你把它拖到屏幕右下角调到合适的大小然后放心地把编辑器和文档开到最大。眼睛余光一瞟进度和画面尽在掌握双手不用离开键盘。上面这张图就是它工作时的样子YouTube 里的视频已经弹出到右下角的悬浮窗口页面本身则彻底让位给其他工作。三分钟让第一个悬浮窗出现在屏幕上安装过程简单到不需要任何前置知识。先拿到项目源码打开终端执行git clone https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension接着打开 Chrome在地址栏输入 chrome://extensions 并回车把右上角的开发者模式开关打开点击加载已解压的扩展程序选中项目里 src 目录manifest.json 所在的那一层确认即可。整个过程不用注册账号、不用填写任何配置工具栏上立刻就会出现扩展图标。然后随便打开一个带视频的网页按下默认快捷键 AltP。看悬浮窗出现了。再按一次 AltP或者点一下扩展图标视频就会回到原页面。两个进阶操作把悬浮窗用出效率基础玩法一分钟就学会了接下来这两招能让体验再上一个台阶。第一招换一个顺手的快捷键。默认的 AltP 不一定符合你的习惯打开 chrome://extensions/shortcuts找到这个扩展把激活扩展的快捷键改成任意组合比如 CtrlShiftP。从此画中画模式真的可以盲操作。第二招开启自动画中画。在扩展图标上点右键勾选Automatic picture-in-picture (BETA)图标上会出现一个 ★ 角标表示自动模式已生效。开启后当你点击视频媒体控制里的画中画按钮时扩展会自动在当前页面里找到正在播放的那个最大视频把它送进悬浮窗——哪怕页面上同时有好几个视频它也知道该抓哪一个。✨还有个小细节值得提悬浮窗播放期间如果你又在页面里点开了另一个视频扩展会追踪到新视频并自动切换悬浮窗里的画面无缝更新绝不跟丢。它在背后做了什么一个随身小屏幕的故事把扩展想象成你浏览器里的一位随身小屏幕管家几个文件各司其职src/manifest.json 是它的身份证声明了权限、图标和默认快捷键src/background.js 是前台负责接收你的指令——点击图标时把脚本注入当前页面同时管理自动画中画这个总开关src/script.js 是执行专员进到页面后找出正在播放的视频调用浏览器原生的 requestPictureInPicture() API 把视频拎进悬浮窗并负责来回切换src/autoPip.js 是自动值守的小助手让浏览器媒体控制里的画中画按钮自动关联到扩展。说白了扩展本身并不碰视频流它做的事就两件替你选中该悬浮的那个视频然后按下浏览器早就准备好的画中画开关。逻辑不复杂胜在顺手。最适合装上它的是这些人跟着教程敲代码、记笔记的学习者悬浮窗里的教学视频永远在视线范围内边看直播边回消息的娱乐党比赛和聊天互不耽误开着线上会议同时整理资料的上班族屏幕利用率直接翻倍。一句话只要你的日常里同时存在一个视频和另一件事它就值得装。从下载到按下第一个 AltP全程不超过三分钟。今天就可以试一次clone 源码、加载扩展、打开你最爱看的视频然后放心地把窗口切走——让视频跟着你走而不是你跟着窗口走。【免费下载链接】picture-in-picture-chrome-extension项目地址: https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何让视频永远跟着你？一个Chrome画中画扩展就够了
如何让视频永远跟着你一个Chrome画中画扩展就够了【免费下载链接】picture-in-picture-chrome-extension项目地址: https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension边看视频边写文档你是不是也总在窗口之间来回折腾picture-in-picture-chrome-extension 是一款轻量级 Chrome 扩展它调用浏览器原生的画中画能力让任意网页里的视频直接变成悬浮小窗——无论你切到哪个标签页画面都稳稳钉在屏幕角落随看随停。它没有花哨的设置界面也没有复杂的配置项。装上之后你的日常会多一个动作按下快捷键视频跳到角落继续播再按一下它又回到原处。仅此而已。窗口切换 vs 悬浮窗画中画模式帮你省下多少注意力先说说它解决的是什么麻烦。以前跟教程学东西时你的手基本长在键盘上切到编辑器写两行切回去看两眼再切回来……一个十分钟的视频来回点了十几次窗口注意力早被切碎了。更难受的是视频窗口一缩小字幕看不清进度条找不着一切全乱套。画中画模式Picture-in-Picture简称 PiP把这套流程彻底翻了个个儿视频不再占用整个标签页而是缩成一个可以随意拖动的悬浮窗口永远盖在其他窗口之上。你把它拖到屏幕右下角调到合适的大小然后放心地把编辑器和文档开到最大。眼睛余光一瞟进度和画面尽在掌握双手不用离开键盘。上面这张图就是它工作时的样子YouTube 里的视频已经弹出到右下角的悬浮窗口页面本身则彻底让位给其他工作。三分钟让第一个悬浮窗出现在屏幕上安装过程简单到不需要任何前置知识。先拿到项目源码打开终端执行git clone https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension接着打开 Chrome在地址栏输入 chrome://extensions 并回车把右上角的开发者模式开关打开点击加载已解压的扩展程序选中项目里 src 目录manifest.json 所在的那一层确认即可。整个过程不用注册账号、不用填写任何配置工具栏上立刻就会出现扩展图标。然后随便打开一个带视频的网页按下默认快捷键 AltP。看悬浮窗出现了。再按一次 AltP或者点一下扩展图标视频就会回到原页面。两个进阶操作把悬浮窗用出效率基础玩法一分钟就学会了接下来这两招能让体验再上一个台阶。第一招换一个顺手的快捷键。默认的 AltP 不一定符合你的习惯打开 chrome://extensions/shortcuts找到这个扩展把激活扩展的快捷键改成任意组合比如 CtrlShiftP。从此画中画模式真的可以盲操作。第二招开启自动画中画。在扩展图标上点右键勾选Automatic picture-in-picture (BETA)图标上会出现一个 ★ 角标表示自动模式已生效。开启后当你点击视频媒体控制里的画中画按钮时扩展会自动在当前页面里找到正在播放的那个最大视频把它送进悬浮窗——哪怕页面上同时有好几个视频它也知道该抓哪一个。✨还有个小细节值得提悬浮窗播放期间如果你又在页面里点开了另一个视频扩展会追踪到新视频并自动切换悬浮窗里的画面无缝更新绝不跟丢。它在背后做了什么一个随身小屏幕的故事把扩展想象成你浏览器里的一位随身小屏幕管家几个文件各司其职src/manifest.json 是它的身份证声明了权限、图标和默认快捷键src/background.js 是前台负责接收你的指令——点击图标时把脚本注入当前页面同时管理自动画中画这个总开关src/script.js 是执行专员进到页面后找出正在播放的视频调用浏览器原生的 requestPictureInPicture() API 把视频拎进悬浮窗并负责来回切换src/autoPip.js 是自动值守的小助手让浏览器媒体控制里的画中画按钮自动关联到扩展。说白了扩展本身并不碰视频流它做的事就两件替你选中该悬浮的那个视频然后按下浏览器早就准备好的画中画开关。逻辑不复杂胜在顺手。最适合装上它的是这些人跟着教程敲代码、记笔记的学习者悬浮窗里的教学视频永远在视线范围内边看直播边回消息的娱乐党比赛和聊天互不耽误开着线上会议同时整理资料的上班族屏幕利用率直接翻倍。一句话只要你的日常里同时存在一个视频和另一件事它就值得装。从下载到按下第一个 AltP全程不超过三分钟。今天就可以试一次clone 源码、加载扩展、打开你最爱看的视频然后放心地把窗口切走——让视频跟着你走而不是你跟着窗口走。【免费下载链接】picture-in-picture-chrome-extension项目地址: https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考