当前位置： 首页 > news >正文

【VS Code插件开发】Webview面板（三）

news 2026/2/9 12:19:50

🐱 个人主页：不叫猫先生，公众号：前端舵手
🙋‍♂️ 作者简介：前端领域优质作者、阿里云专家博主，共同学习共同进步，一起加油呀！
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼(文末有我wx或者私信)

在这里插入图片描述

目录

  • 前言
  • 一、createWebviewPanel
  • 二、Webview案例
    • 面板动态切换
  • 三、Theming webview content（主题化视图内容）

前言

Webview API 允许扩展在 VS Code 中创建完全可自定义的视图。例如，内置的 Markdown 扩展使用 webview 来渲染 Markdown 预览。Webview 还可以用于构建超出 VS Code 原生 API 支持范围的复杂用户界面。在视图中，会将 Webview 视为iframe。

Webview官方文档讲解
Webview官方案例

一、createWebviewPanel

vscode.window.createWebviewPanel 是 VS Code 扩展 API 中的一个方法，用于创建和管理 Webview 面板。Webview 面板允许您在 VS Code 的用户界面中嵌入一个基于 Web 技术的交互式内容。具体用法如下：

vscode.window.createWebviewPanel(viewType: string,        // 唯一的视图类型标识符，用于在插件中识别不同的 Webview 面板title: string,           // 面板的标题viewColumn: vscode.ViewColumn, // 面板要显示在哪一列options?: vscode.WebviewPanelOptions & { enableScripts?: boolean } // 配置选项
): vscode.WebviewPanel;

参数详解：

  • viewType：唯一的视图类型标识符，用于在插件中区分不同的 Webview 面板。可以在插件的不同部分使用这个标识符来识别和操作特定的面板
  • title：面板的标题，显示在面板的顶部
  • viewColumn：是一个枚举类型，表示面板显示在编辑器中的第几列，枚举包括下面几个选项
    • ViewColumn.One：在第一列显示面板
    • ViewColumn.Two：在第二列显示面板
    • ViewColumn.Three：在第三列显示面板
    • ViewColumn.Active：在当前活动的列显示面板
    • ViewColumn.Beside：在当前列的旁边显示面板
  • options：可选的配置选项，设置Webview面板的各种属性，其中
    • enableScripts：是一个布尔值，表示是否在Webview中运行JS

二、Webview案例

使用registerCommand注册一个启动面板的命令（demoPlugin.start），然后创建一个面板。案例实现了创建一个带有猫的图片面板：面板的唯一标识catCoding，面板的标题为Cat Coding ，面板展示在编辑器中的第一列，配置选项为一个空对象。注意我们这里设置的webview.html会被视为iframe

  • 声明图片
const cats = {'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif','Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif'
};
  • 注册命令以及创建面板
		vscode.commands.registerCommand('demoPlugin.start', () => {// Create and show a new webviewconst panel = vscode.window.createWebviewPanel('catCoding', // Identifies the type of the webview. Used internally'Cat Coding', // Title of the panel displayed to the uservscode.ViewColumn.One, // Editor column to show the new webview panel in.{} // Webview options. More on these later.);const cat = "Coding Cat";//panel.title = cat; 重新定义面板的标题panel.webview.html = getWebviewContent(cat);
})
  • 面板具体的Html
function getWebviewContent(cat: keyof typeof cats) {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cat Coding</title><style>/* 根据主题更改文本颜色 */body.vscode-light {color: #ff0;}body.vscode-dark {color: white;}body.vscode-high-contrast {color: red;}</style></head><body><img src="${cats[cat]}" width="300" /></body></html>`;
}
  • package.json中，需要在contributes中的commands进行配置。
"contributes": {"commands": [{"command": "demoPlugin.start","title": "Start new cat coding session","category": "Cat Coding"}]
}
  • 展示
    最后我们就可以cmd/ctrl+shift+p在命令列表中选择配置的Cat Coding:Start new cat coding session命令。
    在这里插入图片描述
    在这里插入图片描述

面板动态切换

我们设置一秒对面板的内容和标题进行切换。这里是用定时器，1s切换面板的内容，并且在面板关闭时（使用onDidDispose监听）清除更新内容的定时器，避免内存泄漏。getWebviewConten方法还是上面的不变。
其中解释一下onDidDispose，该方法用于监听 Webview 面板被关闭。

语法：

currentPanel.onDidDispose(() => { 
// 这里是面板关闭要执行的逻辑 
}, undefined, context.subscriptions)

参数详解：

  • 第一个参数是一个函数，表示面板被关闭时要执行的逻辑。在这个例子中，函数体内的代码将 currentPanel 设置为 undefined，以表示面板已经被关闭。
  • 第二个参数是一个可选的 this 上下文，这里设置为 undefined。
  • 第三个参数 context.subscriptions 是一个数组，通常包含了注册的事件和资源的句柄。在扩展被停用时，VS Code 将会自动清理这些资源，避免内存泄漏。
		vscode.commands.registerCommand('demoPlugin.start', () => {// Create and show a new webviewconst panel = vscode.window.createWebviewPanel('catCoding', // Identifies the type of the webview. Used internally'Cat Coding', // Title of the panel displayed to the uservscode.ViewColumn.One, // Editor column to show the new webview panel in.{} // Webview options. More on these later.);panel.webview.html = getWebviewContent(cat);const cat = "Coding Cat";let iteration = 0;const updateWebview = () => {const cat = iteration++ % 2 ? 'Compiling Cat' : 'Coding Cat';panel.title = cat;panel.webview.html = getWebviewContent(cat);};// And schedule updates to the content every secondconst interval = setInterval(updateWebview, 1000);panel.onDidDispose(() => {// When the panel is closed, cancel any future updates to the webview contentclearInterval(interval);},null,context.subscriptions);// Set initial contentupdateWebview();})

最终结果如下所示：

在这里插入图片描述

三、Theming webview content（主题化视图内容）

Webview 可以使用 CSS 根据 VS Code 的当前主题更改其外观。VS Code 将主题分为三类，并向body元素添加一个特殊的类来指示当前主题：

  • vscode-light：浅色主题
  • vscode-dark：黑暗主题
  • vscode-high-contrast：高对比度主题

在Web.html中添加主题样式，如下

function getWebviewContent(cat: keyof typeof cats) {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cat Coding</title><style>/* 根据主题更改文本颜色 */body.vscode-light {color: blue;}body.vscode-dark {color: green;}body.vscode-high-contrast {color: yellow;}</style></head><body><img src="${cats[cat]}" width="300" /></body></html>`;
}

  • body.vscode-light
    在这里插入图片描述

  • body.vscode-dark
    在这里插入图片描述

  • body.vscode-high-contrast
    在这里插入图片描述

相关文章：

【VS Code插件开发】Webview面板（三）

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端舵手 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域优质作者、阿里云专家博主&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4e2; 资料领取&#xff1a;前端…...

编程日记 2023/8/21 10:56:33

WebDriver API及对象识别技术

html页面的iframe的切换 定位到客户管理 新增客户 会无法定位到新增客户&#xff0c;因为在另外一个iframe框架之中。 iframe是html中的框架标签&#xff0c;表示文档中可以嵌入文档&#xff0c;或者说是浮动的框架。在selenium中iframe同样如此&#xff0c;如果驱动器对…...

编程日记 2023/8/21 10:55:32

计算机视觉之三维重建(一)(摄像机几何)

针孔摄像机 添加屏障&#xff1a; 使用针孔(o光圈针孔摄像机中心)&#xff0c;实现现实与成像一对一映射&#xff0c;减少模糊。其中针孔与像平面的距离为f(焦距)&#xff1b;虚拟像平面位于针孔与真实物体之间&#xff0c;与像平面互为倒立关系。位置映射&#xff1a;利用相似…...

编程日记 2023/8/21 10:54:28

机器学习算法-随机森林

目录 机器学习算法-随机森林 &#xff08;1&#xff09;构建单棵决策树。 决策树的构建过程 决策树的构建一般包含三个部分&#xff1a;特征选择、树的生成、剪枝。 机器学习算法-随机森林 机器学习算法-随机森林 随机森林是一种监督式学习算法&#xff0c;适用于分类和回…...

编程日记 2023/8/21 10:53:27

Springboot 实践（10）spring cloud 与consul配置运用之服务的注册与发现

前文讲解&#xff0c;完成了springboot、spring security、Oauth2.0的继承&#xff0c;实现了对系统资源的安全授权、允许获得授权的用户访问&#xff0c;也就是实现了单一系统的全部技术开发内容。 Springboot是微服务框架&#xff0c;单一系统只能完成指定系统的功能&#xf…...

编程日记 2023/8/21 10:52:26

解决方案：如何在 Amazon EMR Serverless 上执行纯 SQL 文件？

《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书由博主历时三年精心创作&#xff0c;现已通过知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详…...

编程日记 2023/8/21 10:51:23

pytorch lightning和pytorch版本对应

参见官方文档&#xff1a; https://lightning.ai/docs/pytorch/latest/versioning.html#compatibility-matrix 下图左一列&#xff08;lightning.pytorch&#xff09;安装命令&#xff1a;pip install lightning --use-feature2020-resolver 下图左一列&#xff08;pytorch_lig…...

编程日记 2023/8/21 10:50:21

Postman返回了一个html页面

问题记录 调用公司的测试环境接口&#xff0c;从浏览器控制台接口处cCopy as cURL(cmd)&#xff0c;获取完整的请求内容&#xff0c;然后导入postman发起请求 提测时发现返回一个html页面&#xff0c;明显是被请求在网管处被拦截了&#xff0c;网关返回的这个报错html页面 …...

编程日记 2023/8/21 10:49:19

centos服务器搭建宝塔面板

因为电脑无线网无法登录宝塔&#xff0c;也无法ssh到服务器&#xff0c;但是热点可以连接&#xff0c;网上没找到解决方法&#xff0c;重装下。 解决办法&#xff0c;先追路由&#xff0c;结果是被防火墙拦截了&#xff0c;解封以后还不行&#xff0c;重新查&#xff0c;联动的…...

编程日记 2023/8/21 10:48:18

【微信小程序】记一次自定义微信小程序组件的思路

最近来个需求&#xff0c;要求给小程序的 modal 增加个关闭按钮&#xff0c;上网一查发现原来 2018 年就有人给出解决方案了&#xff0c;于是总结下微信小程序自定义组件的思路&#xff1a;一句话&#xff0c;用 wxml css实现和原生组件类似的样式和效果&#xff0c;之后用 JS…...

编程日记 2023/8/21 10:47:16

TiDB数据库从入门到精通系列之四：SQL 基本操作

TiDB数据库从入门到精通系列之四&#xff1a;SQL 基本操作 一、SQL 语言分类二、查看、创建和删除数据库三、创建、查看和删除表四、创建、查看和删除索引五、记录的增删改六、查询数据七、创建、授权和删除用户 成功部署 TiDB 集群之后&#xff0c;便可以在 TiDB 中执行 SQL 语…...

编程日记 2023/8/21 10:46:15

Azure创建自定义VM镜像

创建一个虚拟机&#xff0c;参考 https://blog.csdn.net/m0_48468018/article/details/132267096&#xff0c;入站端口开启80&#xff0c;22 进行远程远程连接 使用CLI命令部署NGINX,输入如下命令 sudo su apt-get update -y apt-get install nginx git -y最后的效果 4. 关闭…...

编程日记 2023/8/21 10:45:13

react 10之状态管理工具2 redux + react-redux +redux-saga

目录 react 10之状态管理工具2 redux store / index.js 入口文件actionType.js actions常量的文件rootReducer.js 总的reducer 用于聚合所有模块的 reducerrootSaga.js 总的saga 用于聚合所有模块的 sagastore / form / formActions.js 同步修改 isShowstore / form / formRedu…...

编程日记 2023/8/21 10:44:12

gor工具http流量复制、流量回放，生产运维生气

gor是一款流量复制回放工具&#xff0c;gor工具的官网&#xff1a;https://goreplay.org/ 1、对某个端口的http流量进行打印 ./gor --input-raw :8000 --output-stdout 2、对流量实时转发&#xff0c;把81端口流量转发到192.168.3.221:80端口 ./gor --input-raw :81--output-ht…...

编程日记 2023/8/21 10:43:08

设计模式之单例设计模式

单例设计模式 2.1 孤独的太阳盘古开天&#xff0c;造日月星辰。2.2 饿汉造日2.3 懒汉的队伍2.4 大道至简 读《秒懂设计模式总结》 单例模式(Singleton)是一种非常简单且容易理解的设计模式。顾名思义&#xff0c;单例即单一的实例&#xff0c;确切地讲就是指在某个系统中只存在…...

编程日记 2023/8/21 10:42:07

Java自学到什么程度就可以去找工作了?

引言 Java作为一门广泛应用于软件开发领域的编程语言&#xff0c;对于初学者来说&#xff0c;了解到什么程度才能开始寻找实习和入职机会是一个常见的问题。 本文将从实习和入职这两个方面&#xff0c;分点详细介绍Java学习到什么程度才能够开始进入职场。并在文章末尾给大家安…...

编程日记 2023/8/21 10:41:04

三、Kafka生产者

目录 3.1 生产者消息发送流程3.1.1 发送原理 3.2 异步发送 API3.3 同步发送数据3.4 生产者分区3.4.1 kafka分区的好处3.4.2 生产者发送消息的分区策略3.4.3 自定义分区器 3.5 生产者如何提高吞吐量3.6 数据可靠性 3.1 生产者消息发送流程 3.1.1 发送原理 3.2 异步发送 API 3…...

编程日记 2023/8/21 10:40:03

【SA8295P 源码分析】19 - QNX Host NFS 文件系统配置

【SA8295P 源码分析】19 - QNX Host NFS 文件系统配置 一、NFS Server二、NFS Client三、NFS 相关的文件及目录四、将文件放入QNX 文件系统中五、编译下载验证系列文章汇总见：《【SA8295P 源码分析】00 - 系列文章链接汇总》 本文链接：《【SA8295P 源码分析】19 - QNX Host N…...

编程日记 2023/8/21 10:39:00

JRE、JDK、JVM及JIT之间有什么不同?_java基础知识总结

当涉及Java编程和执行时&#xff0c;以下术语具有不同的含义&#xff1a; 1.JRE (Java Runtime Environment) JRE是Java运行时环境的缩写。它是一个包含用于在计算机上运行Java应用程序所需的组件集合。JRE包括了以下几个主要部分&#xff1a; Java虚拟机(JVM)&#xff1a;用…...

编程日记 2023/8/21 10:37:58

sqlite3数据库的实现

sqlite3代码实现数据库的插入、删除、修改、退出功能 #include <head.h> #include <sqlite3.h> #include <unistd.h> int do_insert(sqlite3 *db); int do_delete(sqlite3 *db); int do_update(sqlite3 *db);int main(int argc, const char *argv[]) {sqlit…...

编程日记 2023/8/21 10:36:56

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/12/18 6:00:45

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/11/27 20:15:13

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2026/2/8 0:47:08