How It Works

Visual Studio Code does not provide a native API for deep customization of its user interface with custom CSS or JavaScript. This extension works by directly modifying one of VS Code's core files responsible for rendering the workbench (the main editor window).

This approach, often called "monkey-patching," is powerful but also the reason why administrative permissions are required and why VS Code shows a "corrupted" warning.

The Patching Process

When you run the Enable Custom CSS and JS command, the extension performs a series of automated steps:

  1. Locate the Workbench HTML: The extension first needs to find the correct HTML file. It searches for workbench.html (or variants like workbench.esm.html) in likely VS Code installation directories, such as .../vs/code/electron-browser/workbench.

  2. Create a Backup: Before making any modifications, the extension creates a clean backup of the original workbench.html file. This backup is named workbench.<SESSION_ID>.bak-custom-css and is stored in the same directory. This ensures that the Disable Custom CSS and JS command can reliably restore VS Code to its original state.

  3. Fetch and Inline Content: The extension iterates through the URLs specified in your vscode_custom_css.imports setting. For each URL:

    • It fetches the content of the file (either by reading it from the local disk or downloading it from the web).
    • The content is then prepared for injection. CSS content is wrapped in <style> tags, and JavaScript content is wrapped in <script> tags.

  4. Inject into HTML: The inlined <style> and <script> blocks are injected into the workbench.html file just before the closing </html> tag. A unique session ID comment is also added to track that the file has been patched.

  5. Remove Content Security Policy (CSP): To allow the newly injected inline styles and scripts to execute, the extension removes the <meta http-equiv="Content-Security-Policy" ... /> tag from the HTML file's header. This is a crucial step that relaxes VS Code's security model for the workbench.

The Disabling Process

When you run the Disable Custom CSS and JS command, the process is simple and safe:

  1. The extension locates the backup file (workbench.<SESSION_ID>.bak-custom-css).
  2. It replaces the modified workbench.html with the original content from the backup file.
  3. It deletes the backup file to clean up.

After a restart, VS Code is back to its original, unmodified state.