vscode摸鱼插件开发

不知道大家在写代码的时候,摸不摸鱼,是不是时不时得打开一下微博,看看今天发生了什么大事,又有谁塌房,而你没有及时赶上。

为此,我决定开发一个vscode插件,来查看微博热搜

插件名称:Fish Tools
vscode扩展可搜索安装

1、热搜

首先实现在侧边栏中展示前20个热搜,没必要太多

1、package.json 增加配置

"views": {"fish-activityBar": [{"id": "fishView","name": "fish weibo"}]},"viewsContainers": {"activitybar": [{"id": "fish-activityBar","title": "Fish Weibo","icon": "resources/dark/weibo.svg"}]},

如此,侧边栏就会展示微博按钮

按钮有了,内容可以通过树视图展示,vscode.window.createTreeView 可以创建树视图

 const customView = vscode.window.createTreeView("fishView", {treeDataProvider: customTreeDataProvider,});
class CustomTreeDataProvider implements vscode.TreeDataProvider<CustomItem>

这里官方文档中有树视图的例子

热搜内容,可以在CustomTreeDataProvider类的getChildren方法中,通过调微博的接口获取

const data = await getHotSearch();
const top20Hot = (data?.data?.realtime || []).slice(0, 20);
const treeData = top10Hot.map((item: any) => {return { label: item?.note, id: item?.mid };
});

到这里,完成情况如图所示,
在这里插入图片描述

只有热搜当然还是不够的,因为我们想了解具体内容的时候,还是需要打开浏览器,所以这里给每条热搜增加点击功能

2、热搜内容

getTreeItem(element: CustomItem): vscode.TreeItem {const treeItem = new vscode.TreeItem(element?.label);// 配置点击行为treeItem.command = {command: "treeView.openContent",title: "Open Content",arguments: [element],};return treeItem;}

这里增加了command,需要注册该命令,并且点击之后打开一个webview,(简单版的也可以直接打开一个文档,展示内容即可)

vscode.commands.registerCommand("treeView.openContent",(treeItem: vscode.TreeItem) => {const panel = vscode.window.createWebviewPanel(webviewId,webviewTitle || "详情",vscode.ViewColumn.One,{enableScripts: true,});// webview内容const scriptPath = vscode.Uri.file(path.join(extensionPath, jsPath));const scriptUri = panel.webview.asWebviewUri(scriptPath);panel.webview.html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>详情</title></head><body><div id="loading">页面初始化中...</div><div id="root"></div><script src=${scriptUri}></script></body></html>`}
)

webview内容,实现方式可以多种,这里scriptUri 直接写路径,是不生效的,详情可以看官方文档。

3、消息传递

这里实现了,热搜,点击事件以及打开了webview窗口,那么数据如何在webview传递,这里因为直接调的微博的接口,所以在webview中,是调不通的,所以调接口查数据的过程在vscode扩展这边实现

这里第一个问题是热搜的详细内容,是需要登录的,所以这里需要一个cookie,cookie的获取,也比较简单,随便找一个接口,就能查询到

第二个问题是详细内容,并不是通过调xhr接口返回的,需要自行去解析dom结构,来获取自己需要的内容。

1、消息的传递,vscode扩展传递到webview,可以通过postMessage

panel.webview.postMessage({command,text
});

2、webview中可以通过 window.addEventListener监听消息

window.addEventListener("message", (event) => {if (message.command === "getMessage") {setContent(message.text);}
}

3、webview传递到vscode中,通过postMessage方法

const vscode = acquireVsCodeApi();
vscode.postMessage({command: "pageUp",text: { page: page - 1 },
});

4、vscode中通过onDidReceiveMessage监听

panel.webview.onDidReceiveMessage((message) => {if (message.command === "pageUp") {getHotDetail();}
});

这里在给webview.html赋值之后,可以调接口拿到微博内容,通过上述方式传到webview中,webview中只需要展示即可。其他的上一页,下一页,刷新,也可以通过相同方式实现。

最后完成情况如下
在这里插入图片描述

4、配置

上述只简单概述插件功能,配置方面,这里增加了cookie的配置,以及热搜的刷新间隔。
在这里插入图片描述

后续可以考虑评论、点赞等功能实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113512.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

influxDB学习记录

一、官网 influxdb官方英文文档&#xff1a;https://docs.influxdata.com/influxdb/v1.8/query_language/spec/influxdb中文文档&#xff1a;https://jasper-zhang1.gitbooks.io/influxdb/content/ 二、centos安装与基本配置 influxdb安装与基本配置&#xff08;centos) 三…

论文阅读[51]通过深度学习快速识别荧光组分

【论文基本信息】 标题&#xff1a;Fast identification of fluorescent components in three-dimensional excitation-emission matrix fluorescence spectra via deep learning 标题译名&#xff1a;通过深度学习快速识别 三维激发-发射矩阵荧光光谱中的荧光组分 期刊与年份&…

【量化交易笔记】10.建立最简单的交易策略

概述 量化说得简单一些用策略进行股票交易&#xff0c;在实施交易之前&#xff0c;需要制定策略&#xff0c;并回测试共效果 为了把交易说明清楚&#xff0c;将这个过程&#xff0c;能简单&#xff0c;就简单&#xff0c;总之&#xff0c;简单&#xff0c;简单再简单。 以下主…

unity NPR 卡通渲染

文章目录 一、 介绍二、 素材准备三、 步骤四、 shader代码五、工程链接 一、 介绍 NPR是计算机图形学中的一类&#xff0c;即非真实感绘制(Non-photorealistic rendering)&#xff0c;主要用于模拟艺术式的绘制风格&#xff0c;也用于发展新绘制风格&#xff0c;形式一般是卡…

owasp top 10

1、访问控制的崩溃&#xff1a; 通过身份验证的用户可以访问其他用户的信息&#xff0c;越权 达成方式&#xff1a;通过修改url、内部应用程序状态或html页面绕过 防范&#xff1a;除了公有资源外&#xff0c;默认情况下拒绝访问&#xff0c;严格判断权限&#xff0c;记录失败的…

冰蝎默认加密的流量解密

破解冰蝎的默认加密 流量包分析 上传的冰蝎流量包 POST /web-zh/DVWA/vulnerabilities/upload/ HTTP/1.1 Host: 192.168.197.111 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0 Accept: text/html,application/xhtmlxml,a…

Ansible定义各类变量,引用变量方式介绍及注册变量和vars_prompt的用法示例

目录 一.Ansible定义变量 1.用途 2.定义规则 3.变量优先级 二.命令行定义变量 三.定义主机和主机组变量 1.主机变量 &#xff08;1&#xff09;内置主机变量 &#xff08;2&#xff09;简单示例 2.主机组变量 四.定义playbook变量 1.通过vars表示定义变量&#xff…

HTML 实现 点击按钮切换 整张界面 点击按钮切换局部界面

点击按钮实现页面切换 点击按钮切换全局界面方法一&#xff1a; 使用a标签进行跳转连接 href方法二&#xff1a;在button标签中加上onclick属性&#xff0c;赋值为Javascript方法三&#xff1a;触发一个函数跳转方法四&#xff1a;表单的action定向提交跳转 点击按钮切换局部界…

shell条件测试与条件测试操作符

shell条件测试与条件测试操作符 条件测试变量#&#xff1f;test与条件测试语句方括号测试表达式字符串测试操作符逻辑测试操作符整数测试操作符双小括号的整数测试操作符与含义文件测试操作符条件测试举例 条件测试 条件测试是可以根据某个特定条件是否满足&#xff0c;来选择…

vscode调试container(进行rocksdb调试)+vscode比较git项目不同分支和fork的哪个分支

vscode调试container&#xff08;进行rocksdb调试&#xff09; 参考链接&#xff1a; https://blog.csdn.net/qq_29809823/article/details/128445308#t5 https://blog.csdn.net/qq_29809823/article/details/121978762#t7 使用vscode中的插件dev containners->点击左侧的…

zmq封装

ZmqBindlib zmq常用封装 使用方法 基本使用 1.简单请求回复 ZmqRequest request new ZmqRequest();request.RemoteAddress localaddes;request.PubClient "A";int num 0;while (true){// Thread.Sleep(1000);//string msg request.Request("hi"…

【微信小程序开发】小程序微信用户授权登录(用户信息手机号)

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 授权流程讲解 一.用户信息授权登录 1.w…

MD-MTSP:粒子群优化算法PSO求解多仓库多旅行商问题MATLAB(可更改数据集,旅行商的数量和起点)

一、多仓库多旅行商问题MD-MTSP 多旅行商问题&#xff08;Multiple Traveling Salesman Problem, MTSP&#xff09;是著名的旅行商问题&#xff08;Traveling Salesman Problem, TSP&#xff09;的延伸&#xff0c;多旅行商问题定义为&#xff1a;给定一个&#x1d45b;座城市…

LabVIEW中管理大型数据

LabVIEW中管理大数据 LabVIEW的最大优势之一是自动内存管理。这种内存管理允许用户轻松创建字符串、数组和集群&#xff0c;而无需C/C用户经常担心。但是&#xff0c;这种内存管理设计为绝对安全&#xff0c;因此数据被非常频繁地复制。这通常不会造成任何问题&#xff0c;但是…

vue3 列表页开发【选择展示列】功能

目录 背景描述&#xff1a; 开发流程&#xff1a; 详细开发流程&#xff1a; 总结&#xff1a; 背景描述&#xff1a; 这个功能是基于之前写的 封装列表页 的功能继续写的&#xff0c;加了一个选择展示列的功能&#xff0c;可以随时控制表格里展示那些列的数据&#xf…

【算法教程】排列与组合的实现

数据准备 在讲排列与组合之前&#xff0c;我们先定义数据元素类型Fruit class Fruit{constructor(name,price){this.name namethis.price price} }排列 对N个不同元素进行排序&#xff0c;总共有多少不同的排列方式&#xff1f; Step1: 从N个元素中取1个&#xff0c;共N种…

Pandas 数据处理分析系列1--SeriesDataFrame数据结构详解

Pandas 概述 Pandas 是一个开源的数据分析和数据处理库,是基于 NumPy 开发的。它提供了灵活且高效的数据结构,使得处理和分析结构化、缺失和时间序列数据变得更加容易。其在数据分析和数据处理领域广泛应用,在金融、社交媒体、科学研究等领域都有很高的使用率和广泛的应用场…

系列十一、Redis中分布式缓存实现

一、缓存 1.1、什么是缓存 内存就是计算机内存中的一段数据。 1.2、内存中的数据特点 读写快断电数据丢失 1.3、缓存解决了什么问题 提高了网站的吞吐量和运行效率减轻了数据库的访问压力 1.4、哪些数据适合加缓存 使用缓存时&#xff0c;一定是数据库中的数据极少发生改…

【Vue】Element开发笔记

Element开发笔记 前言 官网 https://element.eleme.cn/#/zh-CN/component/upload 其它项目网站 https://www.cnblogs.com/qq2806933146xiaobai/p/17180878.html 表格 序号列添加 <el-table-column type"index" :index"handleIndexCalc" label&qu…

深度强化学习 第 4 章 DQN 与 Q 学习

4.1 DQN 最优动作价值函数的用途 假如我们知道 Q ⋆ Q_⋆ Q⋆​&#xff0c;我们就能用它做控制。 我们希望知道 Q ⋆ Q_⋆ Q⋆​&#xff0c;因为它就像是先知一般&#xff0c;可以预见未来&#xff0c;在 t t t 时刻就预见 t t t 到 n n n时刻之间的累计奖励的期望。假如…