VSCode Webview 插件开发的模板的踩坑记录
crper 2024-06-11 08:33:03 阅读 94
前言
上周写了个 vscode 的小插件后，突然想整个 webview 的插件。
于是乎开始搜罗相关的资料，开搞！这里记录下几个踩过的坑。
问题
CSP: refused xxxxxx
常见的几类报错（打开开发者工具，在控制台就会自动输出）
refused to apply inline style because it violates the following Content Security Policy directive xxxxxxrefused to load the script ‘’ because it violates the following Content Security Policy directiv
VSCode webview 对于资源的注入很严格！！
目前的策略是把 web 站点打包成一个index.js和 index.css去注入！
资源链接必须转换成 vscode 允许的资源格式！！！
//path: src/panels/VueBoilerplatePanel.tsprivate _getWebviewContent(webview: Webview, extensionUri: Uri) { // The CSS file from the Vue build outputconst stylesUri = getUri(webview, extensionUri, ["webview-ui", "build", "assets", "index.css"]);// The JS file from the Vue build outputconst 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 belowreturn /*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需要打包成单独文件// path: webview-ui/vite.config.tsbuild: { modulePreload: false, // 关闭预加载outDir: "build", // 打包输出目录emptyOutDir: true, // 打包之前清空build 文件夹assetsInlineLimit: 99999999999, // 默认是4096rollupOptions: { output: { entryFileNames: `assets/[name].js`, // 打包后的入口文件 chunkFileNames: `assets/[name].js`, assetFileNames: `assets/[name].[ext]`, manualChunks: (id: string) => { // 打包后的静态资源,自定义策略，全部合并到 index return 'index' } },},},
png这类静态图片直接打包成base64(参考上面的 assetsInlineLimit)
svg 用 vite-svg-loader, 默认转换为 Component
// path: webview-ui/vite.config.tssvgLoader({ defaultImport: 'component' }),// 在使用层面可以通过 query(?) 来转换 svg 为内联或者其他// 具体可以去看这个插件的介绍，挺强大的
路由模式
因为内嵌 webview 不像浏览器有路由导航栏这些，一般 webview 没有前进后退的概念，这种我们的路由跳转优先采用内存路由（memory router）, 它非常适合需要完全控制历史堆栈的场景, 类似 Vue 或者 React 都有提供！！
Vue Memory-modeReact Memory-mode
开发模式 dev
从项目结构上来看，里面就是两个工程，所以要运行两条命令；
一条是打包 webview 网站输出静态资源一条是编译插件源码输出插件入口文件
那有什么可以同时运行并输出信息的呢？
我用concurrently来解决了我的这个困扰。
webview的 debug
基本绝大多数异常都是在开发者工具里面的控制台看，vscode 本身就是基于 electron 搞的，内核 chromium。
做了一些系统交互接口和更加严格的资源策略模式，类似各种沙盒机制！！但本质上还是“浏览器”！！
仓库
| 开源项目名称 | vscode-webview-vite-vue-boilerplate |
|---|---|
| 开源项目地址 | https://github.com/crper/vscode-webview-vite-vue-boilerplate |
| Demo视频 | https://www.yuque.com/crper/blog/ithzqu45gd6y2ts5 |
tips: webview-ui（仓库内）
这是一个基于Vite 5 + Vue3 + TypeScript + UnoCSS + Vue Router + Pinia + Naive UI的项目模板，相关的初始化和配置都有，“五脏俱全”，算是一个 mvp demo 项目，有兴趣的可以看看瞅瞅。
结语
有不对之处请留言，谢谢阅读
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。