本文首发在我的博客:http://muyunyun.cn/posts/4c23...html
插件地址(集成Github、掘金、知乎、淘宝等搜索)前端
做为 Mac 上常年位居神器榜第一位的软件来讲,Alfred 给咱们带来的便利是不言而喻的,其中 workflow(工做流) 功不可没,在它上面能够轻松地查找任何 api;能够快速在豆瓣上搜到本身喜欢的电影、图书、音乐;能够快速把图片上传到图床 等等。node
附上一张我的装着的插件的截图。Caffeinate 插件能在指定时间使电脑不黑屏;在 Dash 插件上能轻松查任何文档;Youdao Translate 插件比系统自带的翻译方便许多。插件也是因人而异,你们能够在 Workflow List 上逛逛,各取所需。python
在用了别人的插件感受高大上后,便萌发了也写一个插件的想法,计划把本身常逛的网站集合成一个插件,使用特定的缩略词即可快速进行搜索数据,又看了官方称可使用 bash, zsh, PHP, Ruby, Python, Perl, Apple Script 开发 Alfred Workflow。因而我选择了 Node.js 做为开发语言,开发了一款 commonSearch, 开发完效果以下(集成了Github、掘金、知乎、淘宝等搜索)。git
在开发前,得先对一些特定的操做步骤和知识点有必定的认知,这样开发时就基本上没有大碍了。github
能够先参考 如何去写一个第三方的 workflow 的开始部分, 完成基本工做流的搭建,以下图是我搭建好的基本工做流连线。web
在 Script 中,能够看到 /usr/local/bin/node common_search.js
至关于就是在调用该插件的时候起了一个 node 服务,后面的 1
是为了区分当前调用的是哪一个搜索手动传入 common_search.js
的,{query}
则是用户查询的名称。chrome
最初开发参考了 知乎搜索 这个项目,它是基于 cheerio 这个模块对请求到的网页数据进行分析爬取,可是引入了 cheerio 后,插件体积多了 2M 多,这对于一个插件来讲太不友好了,因此这多是 python 之类的语言更适合开发相似插件的缘由吧(猜测:python 不须要引人第三方库就能进行爬虫),因而我开始选择提供 JSON API 的接口,好比找寻掘金返回数据的接口。首先打开 chrome 控制台,这可能对前端工程师比较熟悉了。json
从而找到了掘金返回搜索数据的接口是 https://search-merger-ms.juejin.im/v1/search?query={query}&page=0&raw_result=false&src=web
api
接着愉快地使用 node 提供的 https 模块,这里有一个注意点,http.get() 回调中的 res 参数不是正文,而是 http.ClientResponse 对象,因此咱们须要组装内容。
var options = { host: 'search-merger-ms.juejin.im', path: '/v1/search?query=' + encodeURI(keyword) + '&page=0&raw_result=false&src=web' } https.get(options, function (res) { res.on('data', (chunk) => { var content += chunk }).on('end', function () { var jsonContent = JSON.parse(content) && JSON.parse(content).d var result_array = [] for (var i = 0; i < jsonContent.length; i++) { if (jsonContent[i].user.jobTitle === '') { result_array.push({ title: subtitle: arg: icon: { path: join(__dirname, 'xx.png'), }, mods: { cmd: {} } }) } } content = '' console.log(JSON.stringify({ items: result_array })) }) })
这种方法应该是最直接的调用 JSON API 的方案了,固然也能够引人第三方模块 request 后解析 JSON,示例以下:
var request = require('request') var url = 'search-merger-ms.juejin.im/v1/search?query=' + encodeURI(keyword) + '&page=0&raw_result=false&src=web' request.get({ url: url, json: true, headers: {'User-Agent': 'request'} }, (err, res, data) => { if (err) { console.log('Error:', err); } else if (res.statusCode !== 200) { console.log('Status:', res.statusCode); } else { // data is already parsed as JSON: console.log(data.html_url); } });
还有一点要注意的是返回值的字段是固定的,具体能够参考它的官方解释,琢磨了很久才把 JS 中的 Icon 自定义的格式找出来。
title: 主标题 subtitle: 内容行 arg: 跳转连接 icons: 图标 mods:定制键盘按键的方法
对于 Github、掘金、知乎、淘宝的搜索都是基于以上思路进行开发的,就是对于具体返回的 JSON 数据进行了不一样处理,虽然粗糙,但也算完成了第一个 Alfred Workflow 插件的开发。
本文的知识点写的不是特别丰满,一是就是对开发这个插件的小结,另外就是抛砖引玉了,能让更多的小伙伴了解开发一个插件并非难事,同时让更多的朋友开发出更多有意义,有趣的 alfred-workflow 插件也算是本文分享的一个初衷了。