编写第一个vscode插件,扩展webview


之前已经打下了基础

我们直到vscode扩展主要就是登记command

然后我们登记在treeview上面的动作也是通过command来完成


之前我们给每个item点击登记了一个command

image

现在在这个command触发时显示一个webview


image


这个webview什么也没有干,就是显示了一个html而已。


vscode 对webview是完全隔离的,webview中无法直接操作任何东西。

如果webview需要读取数据,必须先通过aswebviewuri函数转换,这个地址才可以用来读取

如果webview需要写入本地数据,那是根本不能实现的。

webview 里的内容是一个另一个网页,所以该演示需要两个项目,一个是webview项目,一个是插件项目。

只能用一个曲线救国的方式,通讯


vscode插件侧,发的是json,string number array object 都算json,如果发复杂的类型 uint8array啥的,也会变成json

收到的也是json

image


webview内部的网页测,发送需要定义一个简单的接口,一共也就只有仨。

image

postMessage就是向vscode一侧发送消息。getState setState 可以保存一个json,即使webview关闭也会保存。

image

在webview内部一侧接收message直接用window内建message事件


插件代码见

ttplugin02 · lights li/vscodeext - 码云 - 开源中国 (gitee.com)

内部webview代码见

simple_webview · lights li/vscodeext - 码云 - 开源中国 (gitee.com)

posted @ 2022-05-10 19:16  疯光无线  阅读(7)  评论(0编辑  收藏  举报