vscode摸鱼学习插件开发

不知道大家在摸鱼的时候,会不会想要学习?

或者有没有考公人,下班要学习的?

上班时间摸鱼,下班时间不够学习?

为此,我决定开发一个vscode插件,来刷粉笔题

粉笔插件名称:Fenbi Tools

vscode扩展可搜索安装

摸鱼插件:Fish Tools

1、展示题库分类

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

1、package.json 增加配置

json 复制代码
"views": {
      "fenbiBar": [
        {
          "type": "webview",
          "id": "openFenbiWebview",
          "name": "container"
        }
      ]
    },
"viewsContainers": {
      "activitybar": [
        {
          "id": "fenbiBar",
          "title": "fenbi",
          "icon": "resources/dark/fenbi.svg"
        }
      ]
    },

如此,侧边栏就会展示粉笔按钮

按钮有了,内容可以通过webview视图展示,vscode.window.registerWebviewViewProvider 可以注册webview视图

typescript 复制代码
 vscode.window.registerWebviewViewProvider("openFenbiWebview", provider)

粉笔分类内容,可以通过调粉笔的接口获取,传递到webview内

typescript 复制代码
const cacheResult = await getCache();
const res = await getCategories()
webview.postMessage({
   command: "init",
   data: modifyArray(res, cacheResult.keypointIds),
 });

到这里,完成情况如图所示,

只有分类当然还是不够的,因为我们需要实际参与做题

2、题目内容

通过vscode扩展与webview 进行消息传递获取数据。具体实现可参考vscode摸鱼插件开发消息传递

typescript 复制代码
let postExerciseId = exerciseId;
if (!postExerciseId) {
  const res = await getExercisesId({ keypointId: id });
  postExerciseId = res.id;
}
const exerciseResult = await getExercises(postExerciseId);
const questionResult = await getQuestion(postExerciseId);

webview.postMessage({
  command: "getQuestion",
  data: {
    exerciseId: postExerciseId,
    ...questionResult,
  },
});

这里通过分析粉笔网站获取,以及webview中的点击事件,调用接口(不在webview中),获取题目内容。通过postMessage 传递到webview

这里分析粉笔网站的答题情况,发现每次点击都会触发studyTime接口,点击下一题才会触发inc接口,提交自己的选项。

3、题目答案

在完成做题,并交卷的情况下,查看答案是必要的,具体实现类似获取题目内容,返回字段大多数一致,只是增加了solutions数组(解析),

4、配置

上述只简单概述插件功能,配置方面,这里增加了cookie的配置

相关推荐
浏览器爱好者7 分钟前
Chrome与火狐哪个浏览器的性能表现更好
前端·chrome
Topstip9 分钟前
在 Google Chrome 上查找并安装 SearchGPT 扩展
前端·人工智能·chrome·gpt·ai·chatgpt
gqkmiss10 分钟前
Chrome 130 版本开发者工具(DevTools)更新内容
前端·chrome·chrome devtools·开发者工具·chrome 130
爱做ppt的阿伟16 分钟前
11.5学习swing
学习
小远yyds25 分钟前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
Pioneer000011 小时前
IDE 使用技巧与插件推荐
ide
weixin_516875651 小时前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js
皮卡穆1 小时前
JavaScript 变量作用域与函数调用机制:var 示例详解
javascript
_oP_i1 小时前
Unity 中使用 WebGL 构建并运行时使用的图片必须使用web服务器上的
前端·unity·webgl
H_HX1261 小时前
https服务器访问http资源报Mixed Content混合内容错误
前端·vue.js·安全策略·https访问http