本文首發(fā)在個人博客:http://muyunyun.cn/posts/4c23be51/
插件地址(集成Github榨婆、掘金顺少、知乎枢赔、淘寶等搜索)
作為 Mac 上常年位居神器榜第一位的軟件來說桅咆,Alfred 給我們帶來的便利是不言而喻的括授,其中 workflow(工作流) 功不可沒,在它上面可以輕松地查找任何 api;可以快速在豆瓣上搜到自己喜歡的電影荚虚、圖書薛夜、音樂;可以快速把圖片上傳到圖床 等等版述。
一些安利
附上一張個人裝著的插件的截圖梯澜。Caffeinate 插件能在指定時間使電腦不黑屏;在 Dash 插件上能輕松查任何文檔渴析;Youdao Translate 插件比系統(tǒng)自帶的翻譯方便許多腊徙。插件也是因人而異,大家可以在 Workflow List 上逛逛檬某,各取所需。
在用了別人的插件感覺高大上后螟蝙,便萌發(fā)了也寫一個插件的想法恢恼,計劃把自己常逛的網(wǎng)站集合成一個插件,使用特定的縮略詞便可快速進行搜索數(shù)據(jù)胰默,又看了官方稱可以使用 bash, zsh, PHP, Ruby, Python, Perl, Apple Script 開發(fā) Alfred Workflow场斑。于是我選擇了 Node.js 作為開發(fā)語言,開發(fā)了一款 commonSearch, 開發(fā)完效果如下(集成了Github牵署、掘金漏隐、知乎、淘寶等搜索)奴迅。
開發(fā)階段
在開發(fā)前青责,得先對一些特定的操作步驟和知識點有一定的認知,這樣開發(fā)時就基本上沒有大礙了取具。
前置步驟
可以先參考 如何去寫一個第三方的 workflow 的開始部分, 完成基本工作流的搭建脖隶,如下圖是我搭建好的基本工作流連線。
在 Script 中暇检,可以看到 /usr/local/bin/node common_search.js
相當于就是在調(diào)用該插件的時候起了一個 node 服務(wù)产阱,后面的 1
是為了區(qū)分當前調(diào)用的是哪個搜索手動傳入 common_search.js
的,{query}
則是用戶查詢的名稱块仆。
使用 Node.js 調(diào)用 JSON API
最初開發(fā)參考了 知乎搜索 這個項目构蹬,它是基于 cheerio 這個模塊對請求到的網(wǎng)頁數(shù)據(jù)進行分析爬取,但是引入了 cheerio 后悔据,插件體積多了 2M 多庄敛,這對于一個插件來說太不友好了,所以這可能是 python 之類的語言更適合開發(fā)類似插件的原因吧(猜想:python 不需要引人第三方庫就能進行爬蟲)蜜暑,于是我開始選擇提供 JSON API 的接口铐姚,比如找尋掘金返回數(shù)據(jù)的接口。首先打開 chrome 控制臺,這可能對前端工程師比較熟悉了隐绵。
從而找到了掘金返回搜索數(shù)據(jù)的接口是 https://search-merger-ms.juejin.im/v1/search?query={query}&page=0&raw_result=false&src=web
接著愉快地使用 node 提供的 https 模塊之众,這里有一個注意點,http.get() 回調(diào)中的 res 參數(shù)不是正文依许,而是 http.ClientResponse 對象棺禾,所以我們需要組裝內(nèi)容秸架。
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
}))
})
})
這種方法應(yīng)該是最直接的調(diào)用 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: 內(nèi)容行
arg: 跳轉(zhuǎn)鏈接
icons: 圖標
mods:定制鍵盤按鍵的方法
對于 Github缓窜、掘金藤违、知乎拯刁、淘寶的搜索都是基于以上思路進行開發(fā)的脊岳,就是對于具體返回的 JSON 數(shù)據(jù)進行了不同處理,雖然粗糙垛玻,但也算完成了第一個 Alfred Workflow 插件的開發(fā)割捅。
尾聲
本文的知識點寫的不是特別豐滿,一是就是對開發(fā)這個插件的小結(jié)帚桩,另外就是拋磚引玉了亿驾,能讓更多的小伙伴了解開發(fā)一個插件并不是難事,同時讓更多的朋友開發(fā)出更多有意義账嚎,有趣的 alfred-workflow 插件也算是本文分享的一個初衷了莫瞬。