用 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=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=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 插件也算是本文分享的一個初衷了。