vscode-cats: A VSCode Extension for Adding a Live2D Cat to the Editor
The article introduces the vscode‑cats VSCode extension that embeds a Live2D cat into the editor, explains its motivation, installation steps, configuration options, core implementation using HTML and TypeScript, and provides troubleshooting tips for checksum warnings, offering a practical guide for developers.
This article presents vscode-cats, a VSCode extension that adds a Live2D cat animation to the editor. The idea originated from a previous blog about integrating a cat into VSCode and personal websites, which received strong community interest but suffered from a clunky user experience.
To improve usability, the author packaged the functionality into the vscode-cats extension (version 0.0.1) and published it on the VSCode Marketplace. Users can install it directly from the marketplace search.
Implementation approach : The extension works by modifying VSCode’s own files, a technique similar to the vscode-background project. Specifically, it alters files under the workbench directory, such as workbench.html, to inject the Live2D widget.
Configuration options (editable in VSCode settings):
Setting
Description vscode-cats.enabled Enable (true) or disable (false) the extension vscode-cats.model Choose the cat model vscode-cats.modelWidth Custom width of the cat vscode-cats.modelHeight Custom height of the cat vscode-cats.moveX Horizontal offset vscode-cats.moveY Vertical offset vscode-cats.opacity Transparency level vscode-cats.position Left/right positioning
Future development ideas include adding dialogue that praises the user while coding, background music, and alternative Live2D characters (e.g., anime girls or boys).
Important notes :
To uninstall, disable vscode-cats.enabled before removal.
The extension modifies VSCode’s internal files, which may trigger checksum warnings after installation or after VSCode updates. Users can select “Don’t show again”, but if they are uncomfortable with the warning they should avoid installing.
Potential bugs may exist due to the author’s limited extension‑development experience.
Resolving the “Do not show again” warning :
Method 1 – install the Fix VSCode Checksums extension and run the command Fix Checksums:Apply via the Command Palette (Ctrl + Shift + P).
Method 2 – search for “Fix VSCode Checksums” in the VSCode Marketplace and install it manually.
Core implementation (getHTML.ts) :
export default function (config: any, extName: string, version: string): string {
let model: string = config.model;
let modelWidth: number = config.modelWidth;
let modelHeight: number = config.modelHeight;
let moveX: number = config.moveX;
let moveY: number = config.moveY;
let opacity: number = config.opacity;
let position: string = config.position;
return `<!-- /*ext-${extName}-start*/ -->
<!-- /*ext.${extName}.ver.${version}*/ -->
<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*.vscode-webview-test.com; object-src 'self'; script-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote-resource:" />
</head>
<style type="text/css">
#live2dcanvas { border: 0 !important; }
</style>
<body aria-label="">
<div id="live2d-widget">
<canvas id="live2dcanvas" width="${modelWidth}" height="${modelHeight}" style="
position: fixed;
width: ${modelWidth}px;
height: ${modelHeight}px;
opacity: ${opacity};
transition: opacity 300ms ease-in-out;
${position}: ${moveX + 20}px;
bottom: ${moveY + 20}px;
z-index: 99999;
pointer-events: none;
border: 0;
"></canvas>
</div>
</body>
<!-- Init Bootstrap Helpers -->
<script src="../../../../bootstrap.js"></script>
<script src="../../../../vs/loader.js"></script>
<script src="../../../../bootstrap-window.js"></script>
<!-- Startup via workbench.js -->
<script src="workbench.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js?_=1557308476616"></script>
<script type="text/javascript">
L2Dwidget.init({
model: { jsonPath: "https://unpkg.com/live2d-widget-model-${model}/assets/${model}.model.json" },
display: { superSample: 2, width: ${modelHeight}, height: ${modelHeight}, position: "${position}", hOffset: ${moveX + 20}, vOffset: ${moveY + 20} },
react: { opacityDefault: ${opacity} }
});
</script>
</html>
`;
}File operation utilities :
/**
* Set file content
* @param {string} filePath - file path
* @param {string} content - new content
*/
export const saveContent = function (filePath, content: string): void {
fs.writeFileSync(filePath, content, "utf-8");
};
/**
* Get file content
* @param {string} filePath - file path
*/
export const getContent = function (filePath): string {
return fs.readFileSync(filePath, "utf-8");
};
/**
* Retrieve original workbench HTML
*/
export const renewHTML = function (): string {
let nowContent = originHtml();
return nowContent;
};With these utilities and the getHTML function, developers can easily read, modify, and write back the workbench.html file to inject the Live2D cat. The author promises to share additional implementation details in future posts.
References :
VSCode Marketplace: https://marketplace.visualstudio.com/items?itemName=zcxiaobao.vscode-cats
GitHub repository: https://github.com/zcxiaobao/vscode-cats
vscode‑background project: https://github.com/shalldie/vscode-background
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.