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

前言

上周写了个 vscode 的小插件后，突然想整个 webview 的插件。

于是乎开始搜罗相关的资料，开搞！这里记录下几个踩过的坑。

问题

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 允许的资源格式！！！

//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需要打包成单独文件

// 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'
    }
  },
},
},

png这类静态图片直接打包成base64(参考上面的 assetsInlineLimit)
svg 用 vite-svg-loader, 默认转换为 Component

// path: webview-ui/vite.config.ts
svgLoader({ defaultImport: 'component' }),

// 在使用层面可以通过 query(?) 来转换 svg 为内联或者其他
// 具体可以去看这个插件的介绍，挺强大的

开发模式 dev

从项目结构上来看，里面就是两个工程，所以要运行两条命令；

一条是打包 webview 网站输出静态资源
一条是编译插件源码输出插件入口文件

那有什么可以同时运行并输出信息的呢？我用concurrently来解决了我的这个困扰。

webview的 debug

基本绝大多数异常都是在开发者工具里面的控制台看，vscode 本身就是基于 electron 搞的，内核 chromium。做了一些系统交互接口和更加严格的资源策略模式，类似各种沙盒机制！！但本质上还是“浏览器”！！

仓库

开源项目名称	vscode-webview-vite-vue-boilerplate
开源项目地址	github.com/crper/vscod…
Demo视频	www.yuque.com/crper/blog/…

tips: webview-ui（仓库内）

这是一个基于Vite 5 + Vue3 + TypeScript + UnoCSS + Vue Router + Pinia + Naive UI的项目模板，相关的初始化和配置都有，“五脏俱全”，算是一个 mvp demo 项目，有兴趣的可以看看瞅瞅。

结语

有不对之处请留言，谢谢阅读