啊 Electron 不就好棒棒

Electron 簡單來說就是加料版的 Chromium，可以跑 node 環境，還能讓 Web App 也能使用原生桌面環境的 API。我的桌面早就被一堆 Electron App 攻佔，最常用的就有：

  • Nylas N1 - Email 軟體
  • Visual Studio Code - 微軟出的輕量級編輯器，兼具某種程度的 IDE 功能
  • Postman - API 輔助工具
  • Slack - 社內通訊
  • Notion - 筆記，雜想
  • Hyper - 終端機，不過不能輸入中文所以就沒再用了。開發的 zeit 社也滿猛的
  • Caprine - Facebook messenger 桌面版

裝了這麼多 Electron App，相當於電腦裝了十幾個 Chrome，有夠肥一個就一百多 MB 😅，根本快速開發的代價（誒）。

Electron App 相對於傳統的桌面軟體迭代應該算十分快速了啦，光 Flexbox Layout 就不知道方便多少了…好啦其實我唯一寫過的傳統桌面軟體也只有用 JavaFX 學校作業，也只花了三天趕工哈哈哈…也是沒慢到哪裡去啦（？）

Nativefier

有段時間我很喜歡用瀏覽器的「Pin Tab」功能，現在 SPA 又那麼猖狂，App 用 Chrome 開就行了，只要用 Chrome 的快速鍵 cmd + 1/2 就能直接切換於瀏覽的網站和 Web App。不過因為我自己裝的擴充功能實在太多 拖慢了 Chrome，如果用 Electron App 就相當於用一個乾淨的瀏覽器，速度快了許多。其實你把擴充功能移乾淨不就得了。

社群前陣子也有大大推了一個叫 nativefier 的工具，只要敲幾行指令，就能把網站包到 Electron 的 WebView，立馬變桌面應用程式。

通常用 Electron 將現有網站包成桌面程式時，除了用 BrowserWindow 或 webview API 載入 Web App 網址外，還需要外載一些額外的 JavaScript 或 CSS，來整合原生桌面功能、送通知、快捷鍵綁定、自訂介面等等。

大神 sindresorhus 的 Caprine 便是個好例子，在 Facebook Messenger App 上另外加了許多功能，甚至還有防止已讀功能 XDD。terkelg 的 Ramme 插入 CSS 改變 Instagram 手機版網頁的排版、再加入了快速鍵綁定，便是一個堪用的 Instragm 桌面應用軟體了。BTW，真正好用的 IG 桌面版還是非原生莫屬，在此推薦一下 Flume for Instagram，還是免費的 w。

Trello feat. Electron

進入正題。最近重回了 Trello 懷抱，配合我的使用習慣，就去找了找對應的桌面軟體來用。找了兩個：

這兩個 App 看起來就是把 macOS 的 titlebar 藏起來讓紅綠燈好看一些。儘管前者在 App Store 上架，但感覺功能沒比後者多多少哈哈。

（更新：Paws for Trello 後來實作了一個漂亮的設定頁還有其它功能，嘴硬如我最後還是買了） （再更：Paws 後來被 Trello 買走了，現在 Trello 推出了官方版的 macOS App，嗯，當然是免費下載 XDDD）

後者 Trello Desktop 雖然免費，目前有個最大的問題：沒辦法拖拉視窗。

當然也有開發者直接發了 Pull Request ，不過專案好像已經被放生了一樣，坑主都不回的。作為一個略懂 Electron 的開發者就來自行修正一下吧。(更新：已經 merge 啦)

仔細看下 PR#13 也就加三行到 css，我要做的就是把這個 PR patch 到本機的 Trello Desktop App 裡。

做法有兩種，其中一種是 clone 改完的版本，重新建構 Electron 程式，不過太麻煩了，直接 patch 本機的 css 比較快。

Patch Elecron Client code

asar 是 electron 封裝 client code 的格式，一般在建構 Electron App 會預設使用。我們先安裝下：

npm install asar -g

現在就可以用 asar 指令解開 .asar 檔了，進到 App Package 裡：

cd /Applications/Trello.app/Contents/Resources/
asar extract app.asar app # 解開 app.asar 檔案到 app 目錄
cd app # 進去 app 目錄

編輯 browser.css 加入更改的 css

#header {
  -webkit-app-region: drag;
}

Electron 會讀取 app 目錄或 app.asar 檔案，重新開啟 App 後就可以自由移動視窗啦，跟桌面軟體有 87% 像！

（完）