2012
Dec
16





Chrome SSH 下載點

Google 幾年前發表了 chrome extension: SSH client,這個 extension 就相當於 putty ,主要是為了 chrome OS 開發的連線工具 , 等同一個 putty 直接內建於 Chrome Browser 裡,用起來感覺還蠻不錯的,我平常在公司是使用 Mac Retina 開發,而回到家會換成使用 Windows 或是 Mac Air ,每個不同的作業系統,都有不同的 SSH 工具,設定也不一樣 ,所以我選擇用 Chrome SSH client ,就可以在不同作業系統中使用同一種工具,不用再適應兩種不同環境。

如何連線 ptt (BBS)

  • host: ptt.cc
  • account: bbsu
  • port: 22

SSH Client demo

從 Chrome Apps 中點擊 Chrome Secure Shell,就會在 Chrome 分頁中自動開啟一個 SSH 頁面,一切操作就像 Putty 一樣,下圖是用 Chrome Secure Shell 連上我自已的伺服器範例 (我有將配色換成白底黑字)。

chrome secure shell client setting

畫面設定

Chrome SSH 還提供了一些基本設定,修改的途徑有兩種。

第一個方式比較簡單,在開啟 SSH Client 之前,先對著 Chrome SSH 的 Icon 按右鍵,然後點選「選項」,Chrome 就會自動開啟設定的視窗。

可以設定文字,背景色,以及字型大小,字體等等,另外打開 extension 中的 options 裡面有一個屬性是 user-css 可以讓你載入個人化的 CSS 。

第二個方式, 要先打開 console ,然後鍵入指令,就可以變更設定,打開 console 前 ,要先修改 Chrome SSH 成用一般視窗開啟,然後點擊「工具」->「開發人員工具」, 這樣 console 就會出現了。

用指令修改 SSH 設定的方式

  • 修改文字顏色 : term_.prefs_.set('foreground-color', '#000000')
  • 修改背景色 : term_.prefs_.set('background-color', 'black')
  • cursor 閃動: term_.prefs_.set('cursor-blink', true);
Example
  1. term_.prefs_.set('audible-bell-sound', '');
  2. term_.prefs_.set('foreground-color', '#000000');
  3. term_.prefs_.set('background-color', 'white');
  4. term_.prefs_.set('font-family', 'monaco');
  5. term_.prefs_.set('font-size', 15);
  6. term_.prefs_.set('font-smoothing', 'none');
  7. term_.prefs_.set('cursor-blink', true);

設定環境變數 term_.prefs_.set('environment', {TERM: 'hterm'})

Import Public/Private key

打開 SSH Tools 後,在 Identity 右邊點擊 「Import...」,然後要選擇兩個檔案,Public key [id_dsa.pub],以及 Private key [id_dsa]。

移除 chrome 中的 Private/Public key 的方式。

先打開 chrome console ,再打開 ssh tools ,接著輸入下列的指令

  • term_.command.removeDirectory('/.ssh/')

重要的選項

Chrome SSH 提供了一些個人化的選項,讓我們可以依個人嗜好來做設定。

option 說明
pass-ctrl-number 設定成 "1" : 這樣才能使用 "ctrl+n(數字)" 來切換至 Chrome 的視窗
ctrl-v-paste 打勾後才能使用 "ctrl+v" 貼上文字,這個會影響到 vim 操作,所以我個人是不會打開這個選項。
cursor-blink 遊標閃爍
ctrl-plus-minus-zero-zoom 使用 ctrl 與"加"、"減" 符號來放大與縮小文字。

傳送指令給 Terminal

打開 Google Chrome console ,就可以用 JavaScript 來傳送文字給 Terminal ,例如下面這個範例,我傳送 "aaa" 三個字進 Terminal,還有為了調整一些熱鍵,我想要設定其它熱鍵來當 ctrl+c , ctrl+c 的代碼為 "03",所以我可以用 JS 送出 "03" 的 ASCII 字元 。

Example
  1. term_.command.sendString_("aaa");
  2.  
  3. // Send [Ctrl+c]
  4. term_.command.sendString_(String.fromCharCode(3));

目前碰到的一些問題

  • 官方版本是不能輸入中文的 (可以安裝我自已改的 Secure shell 來解決這個問題,詳下文 )。
  • 使用 tmux 分格視窗時,分隔線會超格,並且速度會變很慢。
  • 速度比 putty 稍慢一點。
  • 能夠修改的熱鍵不多 。

Vim 與 Chrome 熱鍵衝突設定

我平常都用 Vim 這個 IDE 來編碼程式碼,但是 vim 的熱鍵與 chrome 會有些衝突,所以我修改了一些 Vim 熱鍵來讓自已操作能夠順蝪一些。

Split 切換

第一件事就是使用 vim split 功能,平常都是使用 Ctrl+w+方向右鍵 , Ctrl+w+<方向左鍵> 來切換,但是 Ctrl+w 已經被 chrome 用掉了,而且又沒辦法停用他,所以只好改成用 Ctrl+<方向鍵> 來控制,修改方式如下。

增加 ~/.vimrc 的內容
  1. nmap <ESC>[1;5C <C-w>l
  2. nmap <ESC>[1;5D <C-w>h
  3. nmap <ESC>[1;5A <C-w>k
  4. nmap <ESC>[1;5B <C-w>j

vim tab 切換

平常使用 vim7.2 內建就有 tab 的功能用,這裡我增加 Shift+<方向鍵> 來切換 vim Tab,另外加也可以使用 "Tab 鍵"來切換。

增加 ~/.vimrc 的內容
  1. nmap <ESC>[1;2D :tabp<CR>
  2. nmap <ESC>[1;2C :tabn<CR>
  3. nmap <Tab> <C-w>w

numpad 數字鍵 (新版 SSH Client 已經修好)

chrome SSH tool 的數字鍵有點小 bug ,在 tab 模示下,進入 screen 後,數字鍵就無法使用了,得輸入指令設定 applicationKeypad = false 才行,而且每次打開 ssh client 都要重新設定

  • term_.keyboard.applicationKeypad = false

自已修改 Chrome Secure Shell !

因為個人習慣,我把 Mac 的 command 鍵改成 ctrl ,原先的 ctrl 改成 command 鍵,而 Chrome SSH 預設 "ctrl+c" 是中斷指令,我的這個修改剛好與 Chrome SSH 有衝突,造成 ctrl+c 不能中斷指令,command+v 不能貼上,所以我只好直接複製一份 Chrome SSH extension ,加入自已想要的功能,並且也加入了記憶密碼的功能,修改後的原始碼如下。


如果你安裝我自已改的 Chrome SSH ,就會多出以下幾個選項可以使用。

option 說明
meta-as-ctrl 將 Mac 的 command 鍵對應到 ctrl
ctrl-v-paste-hacky 強迫將 "ctrl+v" 改成貼上的指令
(因為我習慣將 Mac 的 Ctrl 與 Cmd 交換熱鍵,所以要 hack 成 ctrl +v 也會貼上,負負得正)
meta-plus-arrow-switch-tab 使用 Mac command+ [方向鍵] 來左右切換視窗
( window 也可以使用,先安裝 AutoHotkey 這套軟體,將熱鍵 map 成 #Left::!^Left )
ctrl-plus-arrow-switch-tab 使用 ctrl+ [方向鍵] 來左右切換視窗
enable-input-method 啟用輸入中文的功能

安裝方式如下:

  • git clone [email protected]:puritys/chromeSecureShell.git
  • 打開 Chrome 瀏覽器,並在網址輸入 "chrome://extensions/" 。
  • 接著打開 "開發者模式(Developer mode)"
  • 點擊按鈕: 載入未封裝程式 (Load unpacked extension)
  • 選擇資料夾 chromeSecureShell ,這樣就安裝完成囉。

儲存登入密碼或 Private Key PassPhrase

Chrome SSH 並沒有儲存密碼的功能,如果你要一次打開好幾個 Terminal ,那麼你就得輸入很多次密碼,我自已修改的這一套 Chrome SSH 增加了密碼的欄位,當你輸入密碼後,程式就會將密碼加密後,儲存在 Local 端,下次登入 SSH 就不用在輸入密碼囉,這個功能也支援 Private Key Passphrase 所以你也可以在密碼欄位輸入 Passphrase 。

安全性方面:所有的密碼都會加密過,再儲存在本機的 Local Storage 上,並沒有上傳到 Google Cloud Storage ,所以不用擔心密碼外漏。

範例如下圖多了一個 password 的欄位.

Developer guide line

這個連結裡的說明,包含了 Google Chrome ssh developer guide,有興趣的話,就可以自行研究 Google 是怎麼寫出這個工具的。

參考資料


目前回應 Comments(4 comments)

  • iLinux 2016/09/22

    0.8.34和chrom54不兼容,能不能更新一下?

    Reply

    Admin

    感謝提醒,我已經更新一版可以在 chrome 54 正常使用,請執行 git pull 即可。

  • andy 2016/09/07

    為何不用terminal 自带的 ssh

    Reply

    Admin

    我除了使用 Mac 之外,還有再使用 Windows ,兩個環境都需要用到 SSH ,以前 Windows 我都是裝 putty 或 cygwin , Mac 會使用 iterm2  ,面對不同軟體就有不同的設定,例如  [Ctrl + 方向鍵] 在不同環境會有不同的輸出值。

     

    會改用 Chrome SSH Client  ,是為了統一設定,不管在 Windows 或是 Mac 都有一致的使用者體驗,另外文字配色也可以一致,如果我今天突然心血來潮,想要把 ssh terminal 改成紅色背景,那麼我只要在 Mac 環境改一次,然後將配色表輸出,複製到 Windows 環境即可。

     

  • evoup 2016/07/30

    感谢,支持简体中文输入

  • Chan 2014/08/06

    剛用了一下還不錯,請問一下他可以記憶密碼,另外是能貼上文字嗎?

    Reply

    Admin

    1. 我有把 Chrome SSH 原始碼拿來修改,加上了一些我想要的功能,另外也加上了記憶密碼的功能,你可以參考本篇文章中的方式安裝,或是直接參考我 github 的說明。
     
    2. Windows 貼上文字方式,可以按 Ctrl + v  或是  shift + insert 貼上就可以了,另外 Chrome SSH Options 中有兩個選項 ctrl-v-paste 與  shift-insert-paste ,必須先打開,貼上的功能才能生效 。
     
    3. Mac 則是用 Command + v 來貼上文字,一樣 Chrome SSH Options 中的選項 ctrl-v-paste  必須打開。
     
     
     
     

回應 (Leave a comment)