VSCode Webview 插件开发的模板的踩坑记录

这是一个基于Vite 5 + Vue3 + TypeScript + UnoCSS + Vue Router + Pinia + Naive UI的项目模板，相关的初始化和配置都有，“五脏俱全”，算是一个 mvp demo 项目，有兴趣的可以看看瞅瞅。因为内嵌 webview 不像浏览器有路由导航栏这些，一般 webview 没有前进后退的概念，这种我们的路由跳转优先采用内存路由（memory r

weixin_47588164

1331人浏览 · 2024-09-04 15:52:54

weixin_47588164 · 2024-09-04 15:52:54 发布

问题

CSP: refused xxxxxx

常见的几类报错（打开开发者工具，在控制台就会自动输出）

refused to apply inline style because it violates the following Content Security Policy directive xxxxxx
refused to load the script '' because it violates the following Content Security Policy directiv

VSCode webview 对于资源的注入很严格！！

目前的策略是把 web 站点打包成一个index.js和 index.css去注入！

资源链接必须转换成 vscode 允许的资源格式！！！

typescript

代码解读

复制代码

//path: src/panels/VueBoilerplatePanel.ts private _getWebviewContent(webview: Webview, extensionUri: Uri) { // The CSS file from the Vue build output const stylesUri = getUri(webview, extensionUri, ["webview-ui", "build", "assets", "index.css"]); // The JS file from the Vue build output const scriptUri = getUri(webview, extensionUri, ["webview-ui", "build", "assets", "index.js"]); const nonce = getNonce(); // Tip: Install the es6-string-html VS Code extension to enable code highlighting below return /*html*/ ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Security-Policy" content="default-src 'none';connect-src https:; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} https: data:; script-src 'nonce-${nonce}';"> <link rel="stylesheet" crossorigin nonce="${nonce}" type="text/css" href="${stylesUri}"> <script type="module" nonce="${nonce}" src="${scriptUri}"></script> <title>Hello World</title> </head> <body> <div id="app"></div> </body> </html> `; }

meta的 csp 策略进行了修改，允许加载部分资源，而不是默认各种卡死，对 web 开发友好
index.html的 script 和 link 标签的 src 和 href 都进行了转换，还有 hash 防缓存

上面的 csp 设置值的简单介绍

施加策略的目录	允许潜在的源列表	描述
default-src	'none'	默认情况下，禁止所有资源类型的加载。
connect-src	https:	仅允许通过 https 协议进行 XMLHttpRequest，Fetch 加载资源等操作。
style-src	${webview.cspSource} 'unsafe-inline'	允许从 webview.cspSource 和内联样式加载样式。
img-src	${webview.cspSource} https: data:	允许从 webview.cspSource、https 协议和 data 协议(即base64 编码的图片)加载图片。
script-src	'nonce-${nonce}'	仅允许加载具有特定 nonce 值的脚本。

如何打包所有文件到一个index.js 和 index.css

css和js需要打包成单独文件

typescript

代码解读

复制代码

// path: webview-ui/vite.config.ts build: { modulePreload: false, // 关闭预加载 outDir: "build", // 打包输出目录 emptyOutDir: true, // 打包之前清空build 文件夹 assetsInlineLimit: 99999999999, // 默认是4096 rollupOptions: { output: { entryFileNames: `assets/[name].js`, // 打包后的入口文件 chunkFileNames: `assets/[name].js`, assetFileNames: `assets/[name].[ext]`, manualChunks: (id: string) => { // 打包后的静态资源,自定义策略，全部合并到 index return 'index' } }, }, },