把黑神话悟空视频设置为vscode背景，真的太炫酷了。

背景

最近黑神话悟空比较火，宣传视频也非常炫酷，于是我写了一个vscode插件，把黑神话悟空宣传视频当前vscode背景，效果真的太炫酷了。

效果展示

主题1

黑神话悟空vscode插件演示

主题2

黑神话悟空vscode插件演示1

使用说明

可以到vscode插件市场中安装，也可以本地vscode插件市场中搜索wukong-background-video安装，安装可能比较慢，大家耐心等待一下。

安装插件后，重启一下vscode，就能看到视频了。打开vscode会提示文件已损坏，因为修改了vscode源码，所以会有这个提示，可以不用管这个。

如果想卸载插件，需要先在命令面板中搜索background-video.uninstall命令，命令执行成功后，再卸载插件，然后重启vscode。

在设置里搜索 background-video,可以设置透明度(0-1)和显示的视频，目前内置了六个视频，视频来源为https://www.wegame.com.cn/wukong。视频设置为随机每次打开都会随机选择一个视频。

修改完成后，需要重启一下vscode。

如果想加载自己的视频，找到vscode安装目录，把里面的视频替换掉就行了，名字不要改。

mac目录一般是/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench

windows: vscode安装目录\resources\app\out\vs\code\electron-sandbox\workbench

插件开发过程

原理

其实很简单，就是修改vscode的源码，大家应该都知道vscode是使用Electron开发的，所以前端页面都是使用html和js写的，找到对应的js源码，然后自己写一段js代码，这个js实现的功能就是动态创建一个video标签，设置一下样式，然后把这个js注入到源码中，vscode启动时会自动执行这段代码。

这里有两种实现方式，一个是脚本，写一个脚本动态把js注入到vscode源码中，还有一种方式写一个vscode插件，运行插件时中往vscode源码中注入代码。

这里我采用第二种方式，因为让其他人也可以方便使用，脚本方式不易传播。

mac中可以往这个文件里写入js代码，/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.js

windows中可以往这个文件里写入js代码, vscode安装目录\resources\app\out\vs\code\electron-sandbox\workbench\workbench.js

实战

创建vscode插件项目

yo code

核心代码

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');

const path = require('path');
const {
    readFileSync, writeFileSync, copyFileSync, unlinkSync, existsSync } = require('fs');

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
   

	let config = vscode.workspace.getConfiguration('background-video');

	const opacity = config.get('opacity');
	const videoName = config.get('videoName');

	// 获取vscode js目录
	const workbenchDirPath = path.join(path