Chrome 的擴展 Vimium 的設計原理是怎麼樣的?

沒有url的tab無法使用vimium,打開本地的html文件也無法使用vimium。


我是來推銷我自己的插件的,一個超越vimium的插件 -- [Surfingkeys](https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc)。

不過,先回答問題--基本原理。每個chrome插件都可以有個content_scripts.js,這個腳本就是在每個頁面載入之後執行(其實是可以指定在載入過程中那個階段執行),然後在這個腳本里註冊一個keydown/keyup事件監聽,

window.addEventListener("keydown", function(event) {

});

這樣有按鍵動作時,就觸發vimium定義好的一些動作了。

每個chrome插件在開發時會指定可以在哪中類型的URL允許載入content_scripts.js,當然這些限制最終是chrome瀏覽器本身來完成的。沒有url的tab其實訪問的是chrome://newtab,而本地文件url通常都是file:///*/。

要支持本地文件可以訪問 chrome://extensions/,找到相應的插件,勾上`Allow access to file URLs`。vimium就在本地文件頁面也能使用了,而沒有url的tab就是chrome://newtab,我觀察到最新的chrome的行為是會重定向到https://www.google.com/_/chrome/newtab?espv=2ie=UTF-8,所以應該都能使用了。但chrome默認是不允許插件在chrome://*/這類頁面里執行content_scripts.js的。

我用了一年多的vimium,之後又用了半年的cVim,基本上都比較滿意,但最終基於以下的原因開發了自己的[Surfingkeys](brookhong/Surfingkeys · GitHub)

  • 擴展性,vimium支持自己選擇按鍵,但按鍵對應的操作是有限的,幾乎不能自己添加動作,除了改插件本身。cVim支持自己添加動作,但它是在模仿vimL,搞得語法不倫不類的。所以我在開發Surfingkeys時就把所有配置寫在一個js文件了,比如下面這樣就添加一個按鍵Ctrl-y映射到自己寫的函數里

mapkey("c-y", "Show me the money", function() {

alert("a well-known phrase uttered by characters in the 1996 film Jerry Maguire");

});

  • 搜索選中文本,比如使用Surfingkeys,默認設置下,你用滑鼠選中一段文字,然後按鍵`sb`,就會用baidu搜索選中的文字。我最初就是希望把這個功能加到vimium里,發現只能改插件本身。
  • 在收藏夾里搜索沒法查看目錄,也沒法在指定目錄搜索。Surfingkeys支持`b`鍵瀏覽收藏夾,在指定目錄搜索。
  • visual mode下游標太小,進入visual mode時找不到游標,於是Surfingkeys定製了一個大游標。
  • 頁面上有多個可滾動的對象時,vimium只能滾動一個。於是Surfingkeys定義了`cs`來改變滾動目標。

[更多中文文檔](Surfingkeys/README_CN.md at master · brookhong/Surfingkeys · GitHub)

[演示在這裡](秒拍視頻)


推薦閱讀:

鎚子手機硬體(T1和T2)和系統有哪些很贊的功能和設計讓你愛不釋手?
為什麼波普棉襪現在賣得不好了?
如何評價 iPhone X 的雙電池設計?
為什麼表情圖案大部分都是黃顏色的?
行業衰弱,如何成為一名土木工程師?

TAG:GoogleChrome | 設計 |