您的位置:首頁>正文

用 Node.js 把玩一番 Alfred Workflow

外掛程式地址(集成Github、掘金、知乎、淘寶等搜索)

作為 Mac 上常年位居神器榜第一位的軟體來說, Alfred 給我們帶來的便利是不言而喻的, 其中 workflow(工作流) 功不可沒, 在它上面可以輕鬆地查找任何 api;可以快速在豆瓣上搜到自己喜歡的電影、圖書、音樂;可以快速把圖片上傳到圖床 等等。

一些安利

附上一張個人裝著的外掛程式的截圖。 Caffeinate 外掛程式能在指定時間使電腦不黑屏;在 Dash 外掛程式上能輕鬆查任何文檔;Youdao Translate 外掛程式比系統自帶的翻譯方便許多。 外掛程式也是因人而異, 大家可以在 Workflow List上逛逛, 各取所需。

在用了別人的外掛程式感覺高大上後, 便萌發了也寫一個外掛程式的想法, 計畫把自己常逛的網站集合成一個外掛程式, 使用特定的縮略詞便可快速進行搜索資料, 又看了官方稱可以使用 bash, zsh, PHP, Ruby, Python, Perl, Apple Script 開發 Alfred Workflow。 於是我選擇了 Node.js 作為開發語言, 開發了一款 commonSearch, 開發完效果如下(集成了Github、掘金、知乎、淘寶等搜索)。

開發階段

在開發前, 得先對一些特定的操作步驟和知識點有一定的認知, 這樣開發時就基本上沒有大礙了。

前置步驟

可以先參考 如何去寫一個協力廠商的 workflow的開始部分, 完成基本工作流的搭建, 如下圖是我搭建好的基本工作流連線。

在 Script 中, 可以看到 /usr/local/bin/node common_search.js相當於就是在調用該外掛程式的時候起了一個 node 服務, 後面的1是為了區分當前調用的是哪個搜索手動傳入common_search.js的, {query}則是用戶查詢的名稱。

使用 Node.js 調用 JSON API

最初開發參考了 知乎搜索這個項目, 它是基於cheerio這個模組對請求到的網頁數據進行分析爬取, 但是引入了 cheerio 後, 外掛程式體積多了 2M 多, 這對於一個外掛程式來說太不友好了, 所以這可能是 python 之類的語言更適合開發類似外掛程式的原因吧(猜想:python 不需要引人協力廠商庫就能進行爬蟲), 於是我開始選擇提供 JSON API 的介面, 比如找尋掘金返回資料的介面。

首先打開 chrome 控制台, 這可能對前端工程師比較熟悉了。

從而找到了掘金返回搜索資料的介面是 https://search-merger-ms.juejin.im/v1/search?query={query}&page=0&raw_result=false&src=http://post.xxxssk.com/api/web

接著愉快地使用 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=http://post.xxxssk.com/api/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=http://post.xxxssk.com/api/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 外掛程式也算是本文分享的一個初衷了。

當然也可以引人協力廠商模組 request 後解析 JSON,示例如下:

var request = require('request')var url = 'search-merger-ms.juejin.im/v1/search?query=' + encodeURI(keyword) + '&page=0&raw_result=false&src=http://post.xxxssk.com/api/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 外掛程式也算是本文分享的一個初衷了。

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示