上手技客的浪漫! cVim 讓 Chrome 全鍵盤快捷操作


讓我先從非程式設計者的角度來做個解釋,「 Vim 」是程式設計師中很有名的文字編輯器,它的一大特色就是「全鍵盤操作」,無論編輯程式碼,或是進行任何選單操作,全部都在鍵盤上就能完成,熟練之後就能十指飛快鍵入來完成所有工作,不需空出手去移動滑鼠。

而在 Firefox 年代,有擴充套件讓 Firefox 瀏覽器可以像是 Vim 一樣,在鍵盤上完成所有網頁瀏覽操作,包含開啟網頁中連結、切換分頁、開啟新網頁,或是操控游標去圈選複製文字等等,都能不需要動到滑鼠,全部用鍵盤完成。

這大概就是技客的浪漫,追求一種與眾不同又高速享受的操作方式,當然,它會需要一些上手練習的時間。

今天要介紹的「 cVim 」,看其評論被推薦是 Google Chrome 年代最好的模擬 Vim 操作套件,同樣可以讓我們丟掉滑鼠,用鍵盤快手完成絕大多數的 Chrome 瀏覽網頁操作。




什麼時候?什麼樣的人?會需要一款像是「 cVim 」這樣的擴充套件呢?我設想大概有幾個可能性:

  • 1. 常常使用筆電,而且通常沒有配備滑鼠時。
  • 2. 想要減少移動滑鼠距離、減少從鍵盤移開手指次數時。
  • 3. 想要試試看技客獨特的操作風格,而且確實也能加快一些速度時。

我這篇文章不打算深入「 cVim 」複雜的自訂功能中,那是留給真正的程式開發者用的。

相對的,我要從一般人也能上手技客浪漫的角度,介紹「 cVim 」不須設定,立刻可以使用的上手步驟,看看學會這些操作方式,如何加快我們在 Google Chrome 上的網頁瀏覽速度。

想要一起嘗試看看的朋友,首先,讓我們在 Google Chrome 瀏覽器上安裝「 cVim 」套件,安裝完成後直接就可使用,一般用戶也不需更改什麼設定,就依照我下面的上手流程來感受一下全鍵盤操作的快感吧!





1. 當需要捲動網頁時:


瀏覽網頁時最常用滑鼠進行的操作之一可能是捲動網頁,而這個操作本來就可以用鍵盤的方向鍵取代,只是「 cVim 」提供了更多細緻的操作,我們可以在網頁中直接鍵入鍵盤的下面按鈕,獲得相應的動作(注意!英文大小寫是有差別的喔!):

  • 往下捲動: j 
  • 往上捲動:k 
  • 往左右捲動:h l
  • 往上下捲動半頁:e d
  • 跳到頁首:gg
  • 跳到頁尾:G

其中比較關鍵的是「e」與「d」,可以幫助我們一次看完視窗畫面內整頁內容後,往下捲動下一個半頁的幅度。

另外直接捲動到網頁最上方的「gg」,或是直接跳到網頁最下方的大寫「G」,也都是一開始應該熟練的快捷鍵。





2. 需要跳到輸入欄輸入內容時:


接下來我們可能遇到網頁中需要在輸入欄輸入內容的情況,例如電腦玩物網頁右上方的搜尋欄,這時候也不需要用滑鼠操作游標,只要直接鍵入下面的按鍵:

  • 切換到第一個輸入欄:gi

就會把游標跳到網頁的第一個輸入欄,按[ Tab ]可以依序切換下一個輸入欄。

而按[ Esc ]可以調出輸入欄,回到網頁操作。





3. 需要圈選文字、複製文字時:


然後我們可能遇到想要複製網頁中的某一段文字,或是圈選網頁中某個關鍵字後進行搜尋,這個常常需要依賴滑鼠的動作,在安裝「 cVim 」後也可以完全用鍵盤執行,相關的按鍵如下:

  • 切換 Visual Mode(圈選模式) 、Caret Mode(移動游標模式): v
  • 移動游標:h(左)j(下)k(上)l(右)
  • 複製圈選內容:y
  • 打開圈選內容在新分頁:P

操作方式是這樣的,先按下[v]切換到 Caret Mode(移動游標模式),這時候用「h(左)j(下)k(上)l(右)」調整游標的位置。

然後再按一次[v]切換到 Visual Mode(圈選模式),這時候用「h(左)j(下)k(上)l(右)」移動游標可以開始圈選前後的內容文字。

把文字圈選起來後,按下[y]可以複製。按下[p]則會將圈選內容丟到 Google 搜尋。





4. 需要打開網頁中的各種連結、按鈕、選單時:


接著網頁裡一定會遇到很多超連結、很多按紐,這些也都不需要移動滑鼠去點擊!在「 cVim 」中,只要根據下面的快捷鍵啟動連結即可:

  • 在目前分頁打開連結:f
  • 在新分頁打開連結:F
  • 滑鼠游標移動到其上:q
  • 滑鼠游標離開其上:Q
  • 一次打開多個分頁:mf

先在網頁中按下[f],這時候會發現網頁裡所有的連結、按鈕、選單旁邊都出現英文關鍵字,我們繼續輸入想要打開的項目的英文關鍵字,就能打開該連結、按鈕、選單。

當想要打開的項目是超連結時,輸入大寫關鍵字會打開在新分頁,輸入小寫關鍵字會在目前分頁打開。

如果想要一次打開多個超連結(例如 Google 搜尋結果),可以先按[mf],接著就可以一次輸入多個項目的關鍵字來一一開啟網頁。





5. 需要切換與管理瀏覽器分頁時:


那麼如果要切換不同的分頁,是不是就要用到滑鼠了呢?也不用!這時候記住下面的快捷鍵即可:

  • 下一個分頁:K
  • 前一個分頁:J
  • 關閉目前分頁:x
  • 打開最近關閉的分頁:X
  • 固定分頁、取消固定:gp

注意!是大寫的[K]可以切換到右邊的分頁,大寫的[J]是切換到左邊的分頁。

而按下[x]可以關閉目前的分頁。

如果想要把分頁固定,按下[gp]即可。





6. 需要瀏覽不同網頁頁面時:


還有一組很重要的快捷鍵,就是大寫的[H]可以切換到上一頁,大寫的[L]可以切換到下一頁,而[r]可以重新整理網頁。

  • 前一頁:H
  • 下一頁:L
  • 重新整理網頁: r

了解規則後其實有一些規律,HJKL是跟方向有關的快捷鍵,而大小寫分別有不同的對應功能。




7. 需要進行複製網址與搜尋操作時:


當熟悉上面的快捷方式時,基本上瀏覽網頁的絕大多數時候,真的都只要在鍵盤上快速敲打就能完成工作,還真的可以節省不少滑鼠移動時間。

另外還有一些額外的快捷鍵提供大家參考:

  • 複製網頁中指定連結的網址:gy
  • 複製目前分頁網址: yy
  • 開啟新的 Google 搜尋:a
  • 網頁頁面內搜尋:/
  • 搜尋瀏覽器書籤:b
  • 開啟命令列: :

當年在 Firefox 時就有許多朋友喜歡用 Vim 操作模式來快速操控瀏覽器,而「 cVim 」可以說是 Google Chrome 上最好的同類工具。

大家也不要被看起來很技客的介面嚇到,其實根據我上面分享的上手流程,學會「 cVim 」的基本快捷鍵,就算無法完全捨棄滑鼠,也已經可以幫我們在操作時節省很多時間囉!

我自己使用「 cVim 」一段時間,雖然還是會搭配滑鼠操作,但像是「捲動網頁」、「切換分頁」,尤其是「打開網頁中連結與選單」,現在我都交給「 cVim 」快捷鍵代勞,確實可以讓操作更順暢。

延伸閱讀相關文章:

「 cVim 」 Google Chrome 套件下載

轉貼本文時禁止修改,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:上手技客的浪漫! cVim 讓 Chrome 全鍵盤快捷操作



留言

  1. 如果碰到facebook的話j k 就會變成在貼文中移動了
    沒辦法切換分頁

    回覆刪除
    回覆
    1. 切換分頁是大寫的 J K 喔,我測試是可以在分頁中移動的

      刪除
  2. 太棒了,終於找到最好的Vim模擬功能,謝謝

    回覆刪除
  3. 瀏覽網頁、切換分頁其實用一般預設的Page Up/Down, 方向鍵, Ctrl+Page Up/Down 就很夠用了

    回覆刪除
  4. Chrome里一直在用Vimium,感觉体验也相当好。看Google应用,好像Vimium使用人数更多诶

    回覆刪除
    回覆
    1. 装了cVim试了一下,简单配置了一下,发现体验确实不错。
      https://gist.github.com/0neSe7en/ebba2391931ccfc9705152d5fba43b09

      刪除
    2. 的确使用Vimium更多。

      刪除
  5. 同样使用的Vimium,足够使用了

    回覆刪除
  6. 当使用inoreader或gmail时cvim会和本身的快捷键冲突,但是Vimium可以设置忽略,不知道cvim是否有这样的功能

    回覆刪除
    回覆
    1. 同问,请问快捷键是什么?

      刪除
    2. 有这样的功能,比如在Gmail的网页中,点一下cVim的图标,然后选择“disable cVim on this domain”就可以。如果觉得不合适,也可以在设置中加上“let blacklists = []”进行配置。
      ref: https://github.com/1995eaton/chromium-vim#blacklists

      刪除
  7. 記得之前有用過類似的,應該是 Vimium ,感想是
    1. 有些網站上的超連結無法用 f 抓取
    2. 非常擔心會不知不覺泄露敏感資料,如 帳號,密碼等

    更上當時它頻繁要求新權限,更增我的疑慮。故此雖然已經用了一段時日,感覺十分順手,但最後還是把它卸了。

    回覆刪除
  8. 在chrome上用vimium,在Firefox上vimperator, 好像这两款插件是浏览器的泛VIM操作比较知名的。这两个都试用过,感觉如果有中文输入法的话,chrome上的vimium的操作更流畅。

    回覆刪除
  9. 您好,不知道您有没有发现,用 F 或者 f 打开链接的时候,链接提示符只能显示一部分,比如用google搜索的结果,当卷的下面的时候,没有链接提示符

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

最簡單養成習慣方法是「解決問題」,不靠時間表、獎懲與意志力

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱