建议阅读时间：8 分钟
前言
本篇文章适用于 VSCode 用户
正文
废话不多说我们先直接看成品效果
效果简单描述：VSCode 每个编辑区域中都会随机展示一个视频壁纸
操作教程（照着做就好）
在 VSCode 安装目录下找到这个目录
如果没找到的话可能是 VSCode 版本不同的原因，可以在 app/out/vs/code 目录中看看其它目录哪个目录有 workbench
然后在其中新增 img 和 js 两个文件夹
在 img 文件夹中增加 1.mp4 ~ x.mp4 视频文件
然后在
js 文件夹中增加 video.js 文件
video.js 文件中写入这些代码（请根据自己的需求自行替换 config 中的值）
{
const config = {
videoCount: 5, // 视频个数
opacity: 0.1, // 视频透明度 0 ~ 1
};
const videClassName = "video60ravvbj";
const { videoCount, opacity } = config;
let timer = setInterval(() => {
let main = document.querySelectorAll(".editor-container");
for (let i = 0; i < main.length; i++) {
if (main[i].querySelector(`.${videClassName}`)) {
continue;
}
let video = document.createElement("video");
video.setAttribute("class", videClassName);
video.muted = true;
video.loop = true;
video.autoplay = true;
video.style.pointerEvents = "none";
video.style.position = "absolute";
video.style.top = "0px";
video.style.left = "0px";
video.style.zIndex = "10000";
video.style.opacity = opacity;
video.style.objectFit = "cover";
main[i].insertBefore(video, main[i].querySelector(".editor-instance"));
video.src = "img/" + parseInt(Math.random() * videoCount + 1) + ".mp4";
let width = video.offsetWidth;
let height = video.offsetHeight;
let f = main[i];
f.style.position = "relative";
(function (video, f, width, height) {
function resize() {
video.style.width = f.offsetWidth + "px";
video.style.height = f.offsetHeight + "px";
}
resize();
new ResizeObserver(resize).observe(f);
})(video, f, width, height);
}
}, 1000);
}
然后在 workbench.html 中引用刚刚的 js 文件
<script src="js/video.js"></script>
然后重启 VSCode 就可以用了！！！
注意！！！因为我们改了 VSCode 的代码，所以 VSCode 打开时会检测到代码被改动了，打开之后就会在右下角提示 VSCode 文件已损坏，我们不用理它，点不再提示即可
原理（需要一些前端基础）
VSCode 是基于 Electron 开发的，相当于在 HTML 页面外面包了一层应用程序的壳
通过开发者工具的帮助与观察 VSCode 安装目录中的文件，我们可以发现 ${VSCode 安装目录}\resources\app\out\vs\code\electron-sandbox\workbench\workbench.html 文件是 VSCode 页面的入口，所以我们只需要像开发网页一样自己写一些 JS 逻辑代码就可以了，于是就有了上面那一段代码
代码的原理大概是每隔一秒就会去查一下所有编辑器 dom 元素，如果某个编辑器 dom 元素里面没有我们添加的 video 标签，我们就创建一个 video，然后从资源中随机引用一个视频文件，然后把 video 加上一些绝对定位、透明度、循环播放之类的属性，把 video 标签插入到编辑器 dom 元素中，这样每个编辑器窗口中就都会有我们添加的视频壁纸啦
如果有懂前端基础的同学，可以根据自己的喜好自由的改代码
可以通过 VSCode 中 帮助 → 切换开发人员工具 打开开发者工具，就和浏览器的 F12 一样，然后就可以进行代码的调试，也能自由的查看 VSCode 中每一部分的 dom 元素结构
如何获得好看的视频壁纸呢？
视频壁纸门槛低，只需要是视频文件即可
如今视频壁纸软件有很多，我们可以简单在网上搜索
这些视频壁纸软件里面都有丰富的视频壁纸资源，可以满足大家各种不同的喜好
结语
若文章中存在错误、缺漏、不足或讲的不清晰的地方，可以帮忙指出，提供一些意见或建议，帮助作者在掘金中一起构建更好的生态环境
希望这篇文章对你能够有所帮助，感谢你的喜欢
