我們要在電腦使用LINE目前就只有兩種方式，安裝APP版或是Chrome Extension版，如果我是Linux的使用者，我就只能使用Extension，這讓我不經好奇，擴充套件不就只是前端嗎？代表他的結構是前後端分離，既然是前後端分離，我不就應該能夠self-hosting在自己的主機上嗎？
關於LINE Chrome Extension
秉持著這樣的想法我開始研究LINE Extension的結構，其實所有的擴充套件都只是HTML、JS、CSS組成的也就是純前端，並且可以使用瀏覽器的API，如*chrome.runtime*這種語法，這些語法在前端是沒辦法運行的，所以當我們要把擴充套件搬到網頁前端時，必須改寫這些語法成前端能夠使用的。
那我們就先從電腦上複製出來LINE擴充的原始碼，要怎麼知道原始碼在哪呢？可以先到瀏覽器的擴充功能知道插件的ID。LINE 的插件ID是ophjlpahpchlmihnnnihgmmeilfjmjjc。擴充的原始碼就放在電腦的 *C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\Extensions\ophjlpahpchlmihnnnihgmmeilfjmjjc*。我把程式碼備份在Github上大家可以參考。
將擴充套件轉換成前端
接下我開始嘗試將LINE以本地的擴充套件加入瀏覽器，發現他更改ID後仍然可以使用，代表LINE後端的API並沒有檢查header的origin，然後嘗試更改看看JS會有甚麼效果，發現竟然神奇介面變成一片空白，這時候要慢慢翻Code才知道，原來LINE在載入的時候會去計算所有JS的大小是不是有被更改過，檢查點在src/GJkZY.js的uszSrBxZOs，簡單來說他使用chrome.runtime.getPackageDirectoryEntry來讀取套件中的檔案，那要怎麼跳過檢查讓我們可以修改程式呢，就把他全部註解掉就好。
要讓前端正常運行，我們得想辦法把chrome.XXX的相關語法都轉成前端看得懂的，好在我找到一個專案，他有把部分chrome語法轉成前端能使用的，我就把他拉進來用，接下來就要測試看看還會有哪些語法抱錯，不知道怎麼解的，就先都把他註解掉。
接下來把修改完的程式碼拿到Web server測試看看，結果噴了一堆CORS的錯誤，完了！他在擴充功能能打的API，在前端因為不同網域的關係無法使用，LINE用到以下三支API：
gf.line.naver.jp：所有訊息資料的交換，會加密
stickershop.line-scdn.net：貼圖
obs.line-apps.com：照片、影片、語音
分別觀察這三個API的格式，再將他轉換成NGINX的反向代理語法即可，到這邊就差不多大功告成，原本想用Caddy或是Cloudflare來做，但怎麼設定都不成功，這邊就先用NGINX演示。
有興趣的人可以研究一下修改那些地方，比較一下官方原始碼、修改過的版本，主要修改了/src/GJkZY.js，並加入shim.js，最後修改index.html，加入以上JS。再加上NGINX設定檔，NGINX結構如下圖。
安裝教學
這邊就來教大家怎麼安裝，你需要一台主機與一個網域，主機有安裝docker就好。
- 從 Github Clone 程式碼下來
- 修改
nginx.conf中 line.example.com 為要使用的網域 - 將 SSL 憑證
ssl.crt、ssl.key放到 ssl 資料夾 - 執行
sudo docker-compose up -d
這樣就安裝好了，本程式就只有修改過的LINE前端與反向代理API，不需要任何後端，使用上跟Chrome Extension版本完全相同。也因為他是一個獨立的網站，就能夠把他當作PWA新增到工具列上。如果有遇到登入QRCode顯示不出來的問題，代表CORS問題沒有被解決，就要看看是不是哪個步驟出錯。由於怕被質疑是不是偷偷記錄帳密或資料，我這邊就不提供Demo Page。
結語
透過這樣的方式架設的LINE會不會未來某一天就不能用了？或許會，但是因為他是透過Extension的機制去登入並收發訊息，要是LINE下架Extension並關閉API，那就可能無法使用。我是希望LINE能真的推出網頁版給大家用啦:)
這邊也要注意，透過這樣的方法，任何人都可以架設LINE的Web Client，就像是RocketChat一樣，任何自建Client都可以登入，這邊也要注意並嚴防是不是釣魚網站，就會有密碼與訊息被竊取的危險，要確定網址是正確的再登入。
之前，這個做法架設的網站只支援Chrome系的瀏覽器，原因在於，原始碼使用了 navigator.webkitTemporaryStorage 這個語法，導致Firefox、Safari不支援，目前已經解決支援各瀏覽器，詳見下篇。不過由於Andorid是使用Chrome引擎，所以在Android手機可以做到在LINE中打開超連結，登入別人的LINE這種事XD。
補更：由於被LINE查水表了，Repo就不公開了