基于百度图片搜索的vscode插件——超级鼓励师

简介

超级鼓励师是一款vscode插件，基于百度图片搜索服务，根据用户设置的关键字获取图片。并通过webview展示给用户。缓解程序猿/媛工作压力，给予你爱的鼓励。

vscode 插件市场搜索超级鼓励师立即使用

源码地址：github.com/weiweiwei25…

效果图：

广告做完了 说正事:P

---

百度搜索请求解析

1. 百度图片请求 打开百度图片网站或在搜索页面切换请求可以在开发者工具,network看到xhr请求 image.baidu.com/search/acjs…

   由于存在跨域限制，所以前端无法直接通过GET请求获取返回值。而vscode自带node环境，通过服务端访问就避免了跨域问题。通过node服务将获取的图片保存到本地，可以实现在没有网络的情况下工作。

   部分请求参数解析：

   • queryword和word 为搜索关键字 主要需要encodeURI编码
   • offset 偏移量 从第几张还是获取
   • rn 获取图片数量
   • hd 是否获取高清
   • lm 6为获取动图 1为获取正常 图片

其他的参数可通过不断更改网站参数，对比url自己探索。

返回参数主要看data,它包含图片的各种信息：

其中hoverURL，middleURL,thumbURL的值很多时候是相同的，可以选取其一。

注意: 这个地址是预览图片地址，图片真正的地址保存在objURL中,经过百度加密过。后面有详细说明。

实例数据：objURL: "ippr_z2C$qAzdH3FAzdH3Ft42n_z&e3B17tpwg2_z&e3Bv54AzdH3F7rs5w1fAzdH3Ftpj4AzdH3Fda8mamAzdH3Fd9AzdH3Fda8mamd9da9bc8_pQgti_z&e3B3rj2"

2. 获取百度动图

当通过百度搜索动图的时候，你会发现很多图并不动，只有悬浮时才会加载真正的动图。通过查看data.thumbUrl的图片发现是静止的，而且资源很小。可以进一步证实。

探索之路开始：

1. 通过悬浮功能，查看dom变化，发现image src发生改变，外层li增加class hactive。

2. 全局搜索hactive，sources只可以单文件搜索（也可能我见识浅陋）有由于百度加载文件较多，这样搜索会死人的。可以通过network ctrl+F从所以通过网络获取资源中搜索。这样就相当与全局搜索。如果有需要可以根据资源路径找到源码，断点调试。
3. 找到 data-objURL属性

4. 找到 objURL 属性 解析后

5. 百度检索 存在没有与时俱进的问题 百度返回的JSON数据解析返回的objURL

6. 再次搜索映射关键字，找到uncompile源码 授之以鱼不如授之以渔 再也不用担心百度修改编码了

通过解码后的objURL就可以获取真实地址。

[测试地址]（github.com/weiweiwei25…

自然时间鼓励

超级鼓励师支持自然时间（整点，半点）鼓励。采用node-cron 详情请参考最后链接

vscode 插件开发注意点

• 监控属性变化

vscode.workspace.onDidChangeConfiguration(function(event) {
    Promise.resolve(event.affectsConfiguration('superencourager.type'))
        .then(data => {
        if (data) {
            //true 代表这个属性已经被修改
            timeMeter = undefined
            initTimer(context)
        }
        })
        .then(undefined, err => {
        console.error('err', err)
        })
    })
复制代码

• output输出

let out;
if (!out) {
    out = vscode.window.createOutputChannel('super encourager')
    out.show()
  }
  out.appendLine(msg)
复制代码

• 属性类型设置为number 但是在window下读取是 string 记得转型。

有些入门博客也不错，请看参考链接

插件基本都是开源的，有啥需要的功能直接去找已经实现该功能的插件源码就行。我参考了很多LeetCode的代码

插件开发注意事项

参考链接

制作爬虫爬取百度图片

百度返回的JSON数据解析返回的objURL

node-cron github地址

vscode 扩展开发从入门到颈椎病康复

VSCode插件开发全攻略

vscode-extentions 官网

LeetCode github地址

转载于:https://juejin.im/post/5d4d138951882575595c44e0