如何在VS Code中注入自定义脚本或样式？遇TrustedScriptURL错误求解

错误原因 #

VS Code基于Electron构建，其网页环境启用了Trusted Types API和严格的内容安全策略（CSP），直接给<script>标签设置外部CDN的src会被拦截——这类URL不在信任列表中，因此触发TrustedScriptURL类型错误。

解决方案 #

方案1：直接在DevTools中注入脚本代码（临时实验） #

跳过通过src加载外部脚本的步骤，直接将目标脚本的代码复制到控制台执行：

1. 获取对应版本的lume全局脚本代码。
2. 打开VS Code的Chrome开发者工具（按Ctrl+Shift+I/Cmd+Opt+I），切换到控制台面板。
3. 粘贴脚本代码并回车执行，即可绕开src的信任限制。

方案2：通过VS Code扩展实现持久化自定义（推荐） #

这是官方支持的自定义方式，不会被VS Code更新覆盖：

• 用yo code命令（需先安装Yeoman和VS Code扩展生成器）创建新扩展项目。
• 在扩展代码中，利用VS Code提供的API实现自定义效果：
  • 使用vscode.window.createWebviewPanel创建独立的WebGL面板，直接在webview中编写WebGL动画代码。
  • 使用vscode.TextEditorDecorationType创建编辑器装饰器，通过CSS背景或嵌入webview的方式，在编辑器文本后方添加动画元素。
• 执行vsce package生成扩展安装包（.vsix），在VS Code中通过“从VSIX安装”功能加载自定义扩展。

方案3：修改VS Code本地资源文件（临时实验，不推荐） #

适合快速测试，但VS Code更新后会被覆盖：

1. 找到VS Code的安装目录：
   • Windows：C:\Program Files\Microsoft VS Code\resources\app
   • Mac：/Applications/Visual Studio Code.app/Contents/Resources/app
2. 找到工作区HTML文件（如out/vs/code/electron-browser/workbench/workbench.html），备份原文件后，在<head>或<body>中添加自定义<script>标签，直接写入你的WebGL动画代码或lume脚本内容。
3. 重启VS Code，修改的代码会被自动加载，且本地资源不受Trusted Types限制。

内容的提问来源于stack exchange，提问作者trusktr