把黑神话悟空视频设置为vscode背景，真的太炫酷了。 点击关注公众号，“技术干货”及时达！背景今天在掘金热榜上看到VSCode 天命人：边打代码边体验黑神话悟空 ?这篇文章，文章里说vscode里不能播放视频，我研究了一下，找到一个可以播放视频的方案，于是我写了一个vscode插件，把黑神话悟空宣传视频当前vscode背景，效果真的太炫酷了。 效果展示主题1 主题2 使用说明可以到vscode插件市场中安装，也可以本地vscode插件市场中搜索wukong-background-video安装，安装可能比较慢，大家耐心等待一下。 安装插件后，重启一下vscode，就能看到视频了。打开vscode会提示文件已损坏，修改修改了vscode源码，所以会有这个提示，可以不用管这个。 如果想卸载插件，需要先在命令面板中搜索background-video.uninstall命令，命令执行成功后，再卸载插件，然后重启vscode。 在设置里搜索background-video,可以设置透明度(0-1)和显示视频，目前内置了两个视频，视频来源为https://www.wegame.com.cn/wukong[1]。修改完成后，需要重启一下vscode。 如果想加载自己的视频，找到vscode安装目录，把里面的两个视频替换掉就行了，名字需要保持一致，video1.mp4或video2.mp4。 mac目录一般是/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench windows我不清楚 插件开发过程原理其实很简单，就是修改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我不清楚 实战创建vscode插件项目yocode 核心代码//Themodule'vscode'containstheVSCodeextensibilityAPI //Importthemoduleandreferenceitwiththealiasvscodeinyourcodebelow constvscode=require('vscode'); constpath=require('path'); const{readFileSync,writeFileSync,copyFileSync,unlinkSync}=require('fs'); //thismethodiscalledwhenyourextensionisactivated //yourextensionisactivatedtheveryfirsttimethecommandisexecuted /** *@param{vscode.ExtensionContext}context */ functionactivate(context){ letconfig=vscode.workspace.getConfiguration('background-video'); constopacity=config.get('opacity'); constvideoName=config.get('videoName'); //获取vscodejs目录 constworkbenchDirPath=path.join(path.dirname((require.main).filename),'vs','code','electron-sandbox','workbench'); constworkbenchFilePath=path.join(workbenchDirPath,'workbench.js'); constjsPath=path.resolve(context.extensionPath,'resources/main.js'); constvideo1Path=path.resolve(context.extensionPath,'resources/video1.mp4'); constvideo2Path=path.resolve(context.extensionPath,'resources/video2.mp4'); functionsetContent(opacity=0.4,videoName='video1.mp4'){ letjsCode=readFileSync(jsPath,'utf8').toString(); jsCode=jsCode.replace('{opacity}',opacity?+opacity:0.4); jsCode=jsCode.replace('{videoName}',videoName); letworkbenchCode=readFileSync(workbenchFilePath,'utf8').toString(); constre=newRegExp("\\/\\*background-video-start\\*\\/[\\s\\S]*?\\/\\*background-video-end\\*"+"\\/","g"); workbenchCode=workbenchCode.replace(re,''); workbenchCode=workbenchCode.replace(/\s*$/,''); writeFileSync(workbenchFilePath,`${workbenchCode} /*background-video-start*/ ${jsCode} /*background-video-end*/`); copyFileSync(video1Path,path.join(workbenchDirPath,'video1.mp4')); copyFileSync(video2Path,path.join(workbenchDirPath,'video2.mp4')); } setContent(opacity,videoName); vscode.workspace.onDidChangeConfiguration(event={ if(event.affectsConfiguration('background-video.opacity')||event.affectsConfiguration('background-video.videoName')){ config=vscode.workspace.getConfiguration('background-video'); constopacity=config.get('opacity'); constvideoName=config.get('videoName'); setContent(opacity,videoName); vscode.window.showInformationMessage('配置已更新，重启vscode后生效'); } context.subscriptions.push(vscode.commands.registerCommand('background-video.uninstall',()={ letworkbenchCode=readFileSync(workbenchFilePath,'utf8').toString(); constre=newRegExp("\\/\\*background-video-start\\*\\/[\\s\\S]*?\\/\\*background-video-end\\*"+"\\/","g"); workbenchCode=workbenchCode.replace(re,''); workbenchCode=workbenchCode.replace(/\s*$/,''); writeFileSync(workbenchFilePath,workbenchCode); //删除视频文件 unlinkSync(path.join(workbenchDirPath,'video1.mp4')); unlinkSync(path.join(workbenchDirPath,'video2.mp4')); vscode.window.showInformationMessage('内容删除成功, 可以卸载插件了。'); } //thismethodiscalledwhenyourextensionisdeactivated functiondeactivate(){} module.exports={ activate, deactivate } 插件启动的时候，把一段js写入到workbench.js中，顺便把2个视频也复制过去。因为这两个视频做了同源处理，不允许跨域访问，只能下载下来放本地。 需要注入的js代码varvideo=document.createElement('video'); video.src="{videoName}"; video.style.width='100vw'; video.style.height='100vh'; video.loop=true; video.autoplay=true; video.muted=true; video.style.position='absolute'; video.style.top=0; video.style.left=0; video.style.zIndex=100; video.style.opacity={opacity}; video.style.pointerEvents='none'; video.style.objectFit="fill"; document.body.appendChild(video); 这段代码创建一个video标签，然后把video挂到body上，这里有两个变量，注入的时候会被替换成真实的值。 效果安装插件后，workbench.js里被注入的js，workbench目录下会多出两个视频文件。 image.png 最后大家如果好的创意，可以给项目提PR。 仓库地址：https://github.com/dbfu/wukong-background-video Reference[1]https://www.wegame.com.cn/wukong: https://www.wegame.com.cn/wukong 点击关注公众号，“技术干货”及时达！ 阅读原文