cVim: Google ChromeのVimperatorみたいな拡張

【並行輸入品】Toshiba Chromebook CB35-A3120 PLM01U-002005 13.3-Inch Cloud Computer

普段はブラウザはFirefoxを使っていますが、一番の理由は Vimperator というVimライク(+More)な動作をFirefoxで再現してくれるプラグインがあるからです。

Google Chromeの方にもいくつかそういったものはありましたが、単にh/j/k/lで上下左右に移動できるなど、キーマップをしているだけだったりしたのでダメでしたが、最近目についたcVimというプラグインがそれなりに色々出来そうだったので試してみました。

cVim
cVimrc
cVimrc: Syncの罠
VimperatorにあってcVimにないもの
cVimを使わずにGoogle ChromeでVim
FirefoxのVimperatorについて

cVim

~~cVim - Chrome ウェブストア: https://chrome.google.com/webstore/detail/cvim/ihlenndgcmojhcghmfjfneahoeklbjjh~~

cVimはGoogle Chromeのプラグインです。

インストールすると、k/jで上下にスクロールしたり出来る様になります。

それからVimperatorでも実装されてるHit-a-Hint機能 (fを押した時に画面にあるリンクにアルファベットや数字を割り当ててそれを押すことでリンクに飛べる機能)も実装されています。

コマンドライン機能もあって、コマンドを:を押してから入力することでコマンドを実行することも出来ます。

一番よさげだと思ったのは、設定ファイルが.vimrcみたいに書けるところです。

Vimperatorでも~/.vimperatorrcというファイルにmap等Vimと同様のキーマップ設定が出来てそれが便利でしたが、 cVimでも同じ様な事が出来ます。

cVimrc

cVimの設定はツールバーに追加されるcVimのアイコンからSettings に行ったりすることで開かれる設定ページで行います。

cVimrcのパートとCSSを変更するパートにわかれていますが、 cVimrcのパートはGistにあるものを同期して使うことが出来ます。

ただし、今のところこの同期は取ってくるだけの一方通行です。

取り敢えず自分で作ってみたのがこちら。

cvimrc

" This is old settings, new one is following url:
" https://gist.github.com/rcmdnk/6f9c3c0f8043391317e1a9cc3e0cafcb


"Settings
"set nohud
"set autohidecursor
"set noinsertmappings
set smoothscroll
set autoupdategist
set noautofocus

let scrolltep = 30
let fullpagescrollpercent = 100
" let blacklists = ["https://mail.google.com/*"]
let blacklists = []
let mapleader = ","
"let locale = "jp"
let hintcharacters = "hjklasdfgyuiopqwertnmzxcvb"
let barposition = "bottom"


" qmarks
" google mail/task/calendar                                               
let qmark m = ["https://mail.google.com"]                                           
let qmark t = ["https://mail.google.com/tasks/canvas"]                              
let qmark c = ["https://www.google.com/calendar"]                                   
" google translator en/ja/language tool                                          
let qmark e = ["javascript:var%20t=((window.getSelection&&window.getSelection())%7C%7C(document.getSelection&&document.getSelection())%7C%7C(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset%7C%7Cdocument.characterSet);if(t!='')%7Blocation.href='http://translate.google.com/translate_t?text='+t+'&hl=ja&langpair=auto%7Cen&tbb=1&ie='+e;%7Delse%7Blocation.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=ja&langpair=auto%7Cen&tbb=1&ie='+e;%7D;"]
let qmark j = ["javascript:var%20t=((window.getSelection&&window.getSelection())%7C%7C(document.getSelection&&document.getSelection())%7C%7C(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset%7C%7Cdocument.characterSet);if(t!='')%7Blocation.href='http://translate.google.com/?text='+t+'&hl=ja&langpair=auto%7Cja&tbb=1&ie='+e;%7Delse%7Blocation.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl=ja&langpair=auto%7Cja&tbb=1&ie='+e;%7D;"]
let qmark l = ["http://www.google.com/language_tools"]
" Feedly/Pocket/GitHub
let qmark f = ["http://cloud.feedly.com/#latest"]                                   
let qmark p = ["http://getpocket.com/a/queue/"]                                     
let qmark g = ["http://github.com/rcmdnk"]  

" Move
map <C-h> scrollLeft
map <C-j> scrollDown
map <C-k> scrollUp
map <C-l> scrollRight
map <C-u> scrollPageUp
map <C-d> scrollPageDown
map <C-b> scrollFullPageUp
map <C-f> scrollFullPageDown

" Navigation
map d closeTab
map u lastClosedTab
map <C-p> previousTab
map <C-n> nextTab
map <C-i> goForward
map <C-o> goBack
map R reloadTabUncached

" Yank current url
map y yankDocumentUrl

" Yank current selected word and search it
map <C-g> :execute vlhyP<CR>

" Open command line with ;
map ; :

" Disable all mappings in Text boxes
iunmapAll

" pocket, maybe need to get own bookmarklet from https://getpocket.com/add/?ep=1
map p :scriptjavascript:(function()%7Bvar e%3Dfunction(t,n,r,i,s)%7Bvar o%3D%5B5578755,3226513,3196261,1447352,5754625,1900724,9534081,1439849,9043574,4416713%5D%3Bvar i%3Di%7C%7C0,u%3D0,n%3Dn%7C%7C%5B%5D,r%3Dr%7C%7C0,s%3Ds%7C%7C0%3Bvar a%3D%7B%27a%27:97,%27b%27:98,%27c%27:99,%27d%27:100,%27e%27:101,%27f%27:102,%27g%27:103,%27h%27:104,%27i%27:105,%27j%27:106,%27k%27:107,%27l%27:108,%27m%27:109,%27n%27:110,%27o%27:111,%27p%27:112,%27q%27:113,%27r%27:114,%27s%27:115,%27t%27:116,%27u%27:117,%27v%27:118,%27w%27:119,%27x%27:120,%27y%27:121,%27z%27:122,%27A%27:65,%27B%27:66,%27C%27:67,%27D%27:68,%27E%27:69,%27F%27:70,%27G%27:71,%27H%27:72,%27I%27:73,%27J%27:74,%27K%27:75,%27L%27:76,%27M%27:77,%27N%27:78,%27O%27:79,%27P%27:80,%27Q%27:81,%27R%27:82,%27S%27:83,%27T%27:84,%27U%27:85,%27V%27:86,%27W%27:87,%27X%27:88,%27Y%27:89,%27Z%27:90,%270%27:48,%271%27:49,%272%27:50,%273%27:51,%274%27:52,%275%27:53,%276%27:54,%277%27:55,%278%27:56,%279%27:57,%27%5C/%27:47,%27:%27:58,%27%3F%27:63,%27%3D%27:61,%27-%27:45,%27_%27:95,%27%26%27:38,%27%24%27:36,%27!%27:33,%27.%27:46%7D%3Bif(!s%7C%7Cs%3D%3D0)%7Bt%3Do%5B0%5D%2Bt%7Dfor(var f%3D0%3Bfhttps://getpocket.com/b/r4.js%3Fh%3D%27%2Bi%2B%27%26u%3D%27%2BencodeURIComponent(n)%2B%27%26t%3D%27%2BencodeURIComponent(r)%3Be%3Di%3Dfunction()%7B%7D%3Bvar o%3Dt.getElementsByTagName(%27head%27)%5B0%5D%7C%7Ct.documentElement%3Bo.appendChild(s)%7D)()


" copy current url and title in MarkDown style
copyTitleUrl -> {{
  const t = document.title;
  const l = location.href;
  let ret = '['+t+']('+l+')';
  if(l.includes("rcmdnk.com") || l.includes("octopress.dev") || l.includes("octopress.test") || l.includes("en.dev") || l.includes("en.test")){
    l = l.replace(/https?:\/\/(rcmdnk.com|octopress.dev|en.dev)/,'');
    ret =  '{{
  const t = document.title;
  const l = location.href;
  let ret = '['+t+']('+l+')';
  if(l.includes("rcmdnk.com") || l.includes("octopress.dev") || l.includes("octopress.test") || l.includes("en.dev") || l.includes("en.test")){
    l = l.replace(/https?:\/\/(rcmdnk.com|octopress.dev|en.dev)/,'');
    ret =  '{% post_card ' + l + ' ' + t + ' %}';
  }
  Clipboard.copy(ret);
  Status.setMessage(ret, 2);
}}
map <Leader>i :call copyTitleUrl<CR>

" This is old settings, new one is following url: " https://gist.github.com/rcmdnk/6f9c3c0f8043391317e1a9cc3e0cafcb "Settings "set nohud "set autohidecursor "set noinsertmappings set smoothscroll set autoupdategist set noautofocus let scrolltep = 30 let fullpagescrollpercent = 100 " let blacklists = ["https://mail.google.com/*"] let blacklists = [] let mapleader = "," "let locale = "jp" let hintcharacters = "hjklasdfgyuiopqwertnmzxcvb" let barposition = "bottom" " qmarks " google mail/task/calendar let qmark m = ["https://mail.google.com"] let qmark t = ["https://mail.google.com/tasks/canvas"] let qmark c = ["https://www.google.com/calendar"] " google translator en/ja/language tool let qmark e = ["javascript:var%20t=((window.getSelection&&window.getSelection())%7C%7C(document.getSelection&&document.getSelection())%7C%7C(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset%7C%7Cdocument.characterSet);if(t!='')%7Blocation.href='http://translate.google.com/translate_t?text='+t+'&hl=ja&langpair=auto%7Cen&tbb=1&ie='+e;%7Delse%7Blocation.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=ja&langpair=auto%7Cen&tbb=1&ie='+e;%7D;"] let qmark j = ["javascript:var%20t=((window.getSelection&&window.getSelection())%7C%7C(document.getSelection&&document.getSelection())%7C%7C(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset%7C%7Cdocument.characterSet);if(t!='')%7Blocation.href='http://translate.google.com/?text='+t+'&hl=ja&langpair=auto%7Cja&tbb=1&ie='+e;%7Delse%7Blocation.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl=ja&langpair=auto%7Cja&tbb=1&ie='+e;%7D;"] let qmark l = ["http://www.google.com/language_tools"] " Feedly/Pocket/GitHub let qmark f = ["http://cloud.feedly.com/#latest"] let qmark p = ["http://getpocket.com/a/queue/"] let qmark g = ["http://github.com/rcmdnk"] " Move map <C-h> scrollLeft map <C-j> scrollDown map <C-k> scrollUp map <C-l> scrollRight map <C-u> scrollPageUp map <C-d> scrollPageDown map <C-b> scrollFullPageUp map <C-f> scrollFullPageDown " Navigation map d closeTab map u lastClosedTab map <C-p> previousTab map <C-n> nextTab map <C-i> goForward map <C-o> goBack map R reloadTabUncached " Yank current url map y yankDocumentUrl " Yank current selected word and search it map <C-g> :execute vlhyP<CR> " Open command line with ; map ; : " Disable all mappings in Text boxes iunmapAll " pocket, maybe need to get own bookmarklet from https://getpocket.com/add/?ep=1 map <Leader>p :script<Space>javascript:(function()%7Bvar e%3Dfunction(t,n,r,i,s)%7Bvar o%3D%5B5578755,3226513,3196261,1447352,5754625,1900724,9534081,1439849,9043574,4416713%5D%3Bvar i%3Di%7C%7C0,u%3D0,n%3Dn%7C%7C%5B%5D,r%3Dr%7C%7C0,s%3Ds%7C%7C0%3Bvar a%3D%7B%27a%27:97,%27b%27:98,%27c%27:99,%27d%27:100,%27e%27:101,%27f%27:102,%27g%27:103,%27h%27:104,%27i%27:105,%27j%27:106,%27k%27:107,%27l%27:108,%27m%27:109,%27n%27:110,%27o%27:111,%27p%27:112,%27q%27:113,%27r%27:114,%27s%27:115,%27t%27:116,%27u%27:117,%27v%27:118,%27w%27:119,%27x%27:120,%27y%27:121,%27z%27:122,%27A%27:65,%27B%27:66,%27C%27:67,%27D%27:68,%27E%27:69,%27F%27:70,%27G%27:71,%27H%27:72,%27I%27:73,%27J%27:74,%27K%27:75,%27L%27:76,%27M%27:77,%27N%27:78,%27O%27:79,%27P%27:80,%27Q%27:81,%27R%27:82,%27S%27:83,%27T%27:84,%27U%27:85,%27V%27:86,%27W%27:87,%27X%27:88,%27Y%27:89,%27Z%27:90,%270%27:48,%271%27:49,%272%27:50,%273%27:51,%274%27:52,%275%27:53,%276%27:54,%277%27:55,%278%27:56,%279%27:57,%27%5C/%27:47,%27:%27:58,%27%3F%27:63,%27%3D%27:61,%27-%27:45,%27_%27:95,%27%26%27:38,%27%24%27:36,%27!%27:33,%27.%27:46%7D%3Bif(!s%7C%7Cs%3D%3D0)%7Bt%3Do%5B0%5D%2Bt%7Dfor(var f%3D0%3Bf<t.length%3Bf%2B%2B)%7Bvar l%3Dfunction(e,t)%7Breturn a%5Be%5Bt%5D%5D%3Fa%5Be%5Bt%5D%5D:e.charCodeAt(t)%7D(t,f)%3Bif(!l*1)l%3D3%3Bvar c%3Dl*(o%5Bi%5D%2Bl*o%5Bu%25o.length%5D)%3Bn%5Br%5D%3D(n%5Br%5D%3Fn%5Br%5D%2Bc:c)%2Bs%2Bu%3Bvar p%3Dc%25(50*1)%3Bif(n%5Bp%5D)%7Bvar d%3Dn%5Br%5D%3Bn%5Br%5D%3Dn%5Bp%5D%3Bn%5Bp%5D%3Dd%7Du%2B%3Dc%3Br%3Dr%3D%3D50%3F0:r%2B1%3Bi%3Di%3D%3Do.length-1%3F0:i%2B1%7Dif(s%3D%3D237)%7Bvar v%3D%27%27%3Bfor(var f%3D0%3Bf<n.length%3Bf%2B%2B)%7Bv%2B%3DString.fromCharCode(n%5Bf%5D%25(25*1)%2B97)%7Do%3Dfunction()%7B%7D%3Breturn v%2B%279954c60b5a%27%7Delse%7Breturn e(u%2B%27%27,n,r,i,s%2B1)%7D%7D%3Bvar t%3Ddocument,n%3Dt.location.href,r%3Dt.title%3Bvar i%3De(n)%3Bvar s%3Dt.createElement(%27script%27)%3Bs.type%3D%27text/javascript%27%3Bs.src%3D%27https://getpocket.com/b/r4.js%3Fh%3D%27%2Bi%2B%27%26u%3D%27%2BencodeURIComponent(n)%2B%27%26t%3D%27%2BencodeURIComponent(r)%3Be%3Di%3Dfunction()%7B%7D%3Bvar o%3Dt.getElementsByTagName(%27head%27)%5B0%5D%7C%7Ct.documentElement%3Bo.appendChild(s)%7D)()<CR> " copy current url and title in MarkDown style copyTitleUrl -> {{ const t = document.title; const l = location.href; let ret = '['+t+']('+l+')'; if(l.includes("rcmdnk.com") || l.includes("octopress.dev") || l.includes("octopress.test") || l.includes("en.dev") || l.includes("en.test")){ l = l.replace(/https?:\/\/(rcmdnk.com|octopress.dev|en.dev)/,''); ret = '{% post_card ' + l + ' ' + t + ' %}'; } Clipboard.copy(ret); Status.setMessage(ret, 2); }} map <Leader>i :call copyTitleUrl<CR>

https://gist.github.com/rcmdnk/2f7d0a95b97e4a47b702

https://gist.github.com/rcmdnk/2f7d0a95b97e4a47b702 とSync cVimrc with GitHub Gistの欄にコピペして Syncボタンを押せばすぐに使えるはずです。

cVimのGitHubの README を参照して、後は自分のvimperatorrcでやってるキーマップなどを取ってきています。

~~rcmdnk/dotfiles/.vimperatorrc: https://github.com/rcmdnk/dotfiles/blob/master/.vimperatorrc~~

散りあえず最初の方の設定は適当に。 blacklistsの設定でcVimを無効にするページを指定できます(上の例ではGmailのページ)。ここではすべてのキーを無効にしてますが、READMEにもあるように指定したキーだけ無効にすることも出来ます。

後のSettingsにある項目は好みで。

Vimperatorと同様に嬉しいのがqmarksの機能を持ってる点。 URLをキーに指定しておくと、例えば

let qmark a = ["http://www.google.co.jp"]

としておけば、goaと打てば今開いてるタブでGoogleのページを、 gnaと打てば新しいタブでGoogleのページを開きます。 (READMEとかにはaで指定してgnbで開くみたいな説明しか無くてあれですが。)

qmarksを設定する際の注意として、なぜかqmarksの設定だけは上の設定ページからSaveを押して保存しても反映されず (キー設定などはそれで即座に反映される)、 Chromeを再起動して初めて反映されます。

最後にキーマップをしてますが、キーマップについて、 Vimのmapnoremapの概念とちょっと違ってくるので注意が必要です。

Vim(Vimperatorも同様)では、mapを呼ぶと、右辺に指定されてるキー自体のマッピングに変更があると、それも左辺のキーに対するマップに反映されます。

一方、noremapというコマンドもあって、こちらを使うと右辺に指定するキーは、それ自体に変更があろうとなかろうと右辺のキーに与えられたVimデフォルトの操作を左辺のキーに与えます。

つまり

map b c
noremap a b
map b d

こんな感じのマッピングがあると、 aに関しては常にbにもともと割り当てられた操作 (Vimであればback(1単語戻る))が割り当てられます。

map b c
map a b
map b d

の様にすると、aはdを押したのと同じ操作になります。

これが、cVimだと、mapコマンドしか無く、さらにマップされるのはその時点で右辺のキーに割り当てられていた機能になります。つまり

map b c
map a b
map b d

とした場合どうなるかというと、aは、cを押したのと同じになります。

上で設定している物は、Ctrl-f等がPageDownとかに何故か割り当てられていないのでそれらのスクロール設定と、 Vimperatorで設定されてるdでタブを閉じたりするタブ操作です。

このタブを閉じるcloseTabというコマンドについて、READMEではquitとなってますが、 quitはコマンドラインのコマンドとして(:quit)使えるもので、キーマップに割り当てられるのはcloseTabです。 (:quit<CR>を割り当てても勿論同じですが)

また、uに割り当てているlastCloseTabは、全ウィンドウ中の最後に閉じたタブ、を開こうとするので、例えば直前に1つウィンドウを閉じて居ると、そのウィンドウ自体を再び作ってタブを再現しようとするのでもうちょっと賢くして欲しい所。 (Vimperatorだとウィンドウ毎にタブの管理が行われています。)

また、インサートモードの時に変なマッピングがデフォルトであるので、全て無効にするためにiunmapAllを最後に入れています。 (emacsライク(コマンドラインライク)な動きですが、少なくともCtrl-h をbackwordWordに割り当ててるのだけは消さないと邪魔。)

cVimrc: Syncの罠

罠、というほどでもありませんが、 cVimrcの編集画面でのSyncボタンはあくまでGistにあるものを取ってくる、と言う作業をするだけなので、手元で変更などをした場合、それらが全て上書きされます。

しかも通常のエディタみたいにUndoすることも出来ないので、間違ってボタンを押してしまうと非常に残念な気持ちになります。

安全にいきたいときは、もうGistの方を直接変更してSyncして、みたいにするのが良いくらいです。

VimperatorにあってcVimにないもの

実際の所沢山あるかもしれませんが、特に今のところマップがnoremapがなかったりcmapがなかったりするところとか。

また、Vimperatorを使っていて良く使うキーマップで

nnoremap <C-g> YP

というのを使っていて、

Yが現在選択中の文字列をコピー、
Pがクリップボードの文字列を新しいタブで検索、

と言う機能なので、これで文字列を選択した状態でCtrl-g で新しいタブで文字列のGoogle検索結果を表示、とか出来ます。これをcVimで何とかしようと

map <C-g> :execute vlhyP<CR>

とか、Visualモードに入ってコピーして、みたいなことをやってみましたが上手く出来ませんでした。 (cVimには選択中の文字列をコピー、の機能が無い。ビジュアルモードに入った後、 lhと左右に降ってるのは、手で同じ様なことを打ち込んでみると、 vをした直後だとコピーが効かなかったので。何故か一歩でも動くと出来るようになる。。。 ? ただし、これらを:executeとか使って実装してみても上手くいかない)

それからVimpertorでよく使ってるのが multi_requester.js ¹ というプラグインで、検索結果やなんらかのリクエスト結果などをオーバーレイで表示してくれるもの。

これらが無いとちょっと移行する気にはなれない所。