前の記事。
VimFx メモ - クマーなひとときv2
今は Nightly + VimFxで、e10s有効にして使ってるけど快適。
主にCSSとカスタムコマンドに関するめも。
Vimperatorの今後も怪しいし、もしもの時*1への備えだけはしっかりしておきたい。
ブラックリスト
ZenzaWatchとの兼ね合いのため、nicovideo.jp/watch
とかはVimFxを無効化してる。
vimfx.set('blacklist', '*live.nicovideo.jp/* *nicovideo.jp/watch/*')
何となくニコ生も無効化してるけど、正直FirefoxとFlashの組み合わせ最悪なので、ニコ生はCentBrowser使ってる。
一部キーのみ無効化
こちらも便利。と思うんだけど、問題があって使ってない。
VimFx/api.md at master · akhodakivskiy/VimFx · GitHub
一部キーだけ無効化出来る。
ただし、全てのモードで無効化されてしまったため、結局使ってない。
以下の例だと、hintモードでもjk
が無効化されてしまう。hint文字にjk
を使っているため、入力出来なくなった。
vimfx.addKeyOverrides(
[ location => location.hostname === 'twicli.neocat.jp',
['j', 'k']
]
)
normalモードでだけ無効化する方法とかありそうなんだけどな。
2016/09/21T20:39:56 追記
Issue投げようと思ったら、他の人が質問して回答貰ってた。
addKeyOverrides & Hints mode · Issue #812 · akhodakivskiy/VimFx
というわけで、以下で動いた。マニュアル読んで、location以外渡せないと思ってたわ…
vimfx.addKeyOverrides(
[ (location, mode) => location.hostname === 'twicli.neocat.jp' &&
mode == 'normal',
['j', 'k']
]
)
通知
VimFx使ってると、右下に色々通知が出てくるけど、そこに好きなメッセージを出せる。
vimfx.on('modeChange', ({vim}) => {
let mode = vimfx.modes[vim.mode].name
vim.notify(`Entering mode: ${mode}`) // 通知
})
たまーに通知が消えなくなる事を除けば便利と思う。
locationChangeイベント発生時にページURL表示するとか、
スクロール時に現在位置を%で表示させるとか、色々使い道ありそう。(重くならないか心配だけど。
CSS
VimFxの見栄え変更。切っ掛けはヒント文字をもう少し大きくしたいな、という願望から。
以下に大体書かれてる。
VimFx/styling.md at master · akhodakivskiy/VimFx · GitHub
ヒント文字のサイズ変更
パパっと変更。
#VimFxMarkersContainer .marker {
font-size: 15px !important; /* Specific font size. */
}
ちなみに、デフォルトのCSSは以下にあるので、ここを参考に直すのもあり。
VimFx/style.css at master · akhodakivskiy/VimFx · GitHub
ignoreモードを分かりやすく
ignoreモードかどうかの判断材料がツールバーのアイコンしかなく、判断が難しい。
通常時 | ignore時 |
---|---|
そのため、分かりやすいように、ignoreモード時はロケーションバーの色を変えた。
状態 | ロケーションバー |
---|---|
通常時 | |
ignore時 |
#main-window[vimfx-mode="ignore"] #urlbar {
background: yellow !important;
}
正直、最初から色変わるようにしててくれ、と思った。
ロケーションバーではIMEをOFFにする
VimperatorのコマンドラインでIME OFFするようなもの。地味に役立つ。
#urlbar {
ime-mode: inactive;
}
/
押すと出てくる検索boxも同じようにしたいけど、上手く動かん。
カスタムコマンド
色々調べつつ、追加した。Wikiが参考になる。
Custom Commands · akhodakivskiy/VimFx Wiki · GitHub
主にVimperatorで使ってた機能を追加。やはりVimperator、及び、プラギン作者は神。
URLをmarkdown形式でコピー
copy.js にはいつもお世話になってました。
VimFxでも同じ機能が欲しい…欲しくない?
vimfx.addCommand({
name: 'copy_markdown',
description: 'c_"[title](URL)"でURLコピー',
category: 'location',
}, ({vim}) => {
let url = vim.window.gBrowser.selectedBrowser.currentURI.spec
let title = vim.window.gBrowser.selectedBrowser.contentTitle
let fmt = "["+title+"]("+url+")"
gClipboardHelper.copyString(fmt)
vim.notify("Copied String: "+ fmt)
})
fmt = xxx の箇所変更して複数フォーマットでコピー出来るようにしてる。
gClipboardHelperについては以下参考。
Using the clipboard - Mozilla | MDN
URLインクリメント
もっといい書き方があると思うけど動いてるからもうこれでいいです(諦め
vimfx.addCommand({
name: 'url_increment',
description: 'c_URLインクリメント',
category: 'misc',
}, ({vim}) => {
let url = vim.window.gBrowser.selectedBrowser.currentURI.spec;
if (url.match(/(\d+)(\D*)$/)) {
var alter = String( Number(RegExp.$1) +1);
var blank = "";
for (i=0; i < RegExp.$1.length-alter.length; i++) {
blank += "0";
}
var next = RegExp.leftContext + blank + alter + RegExp.$2;
vim.window.gBrowser.loadURI(next);
}
})
デクリメントも同じ要領で,x
に割り当ててる。
URL置き換え
引数取得させて、任意指定出来るようになると便利なんだけど。今は固定値。
vimfx.addCommand({
name: 'toggle_japanese',
description: 'c_"-all-"を"-japanese-"に変更して再読込',
category: 'misc',
}, ({vim}) => {
let url = vim.window.gBrowser.selectedBrowser.currentURI.spec
if ( url.includes('-all-') ) {
url = url.replace(/-all-/, '-japanese-');
vim.window.gBrowser.loadURI(url);
}
})
ズームイン
CTRL + +
やCTRL + -
で操作出来るけど、Vimperatorと同じ操作にしたかった。
vimfx.addCommand({
name: 'zoom_in',
description: 'c_ズームイン',
}, ({vim}) => {
vim.window.FullZoom.enlarge();
})
enlarge()
で拡大。reduce()
で縮小。reset()
で元に戻す。
ツールバーボタンをクリック
e
を使えばいい?e
押した後にヒント文字を入力しなきゃいけないじゃないですかヤダー
というわけで、これは必要です。
vimfx.addCommand({
name: 'click_toolbar_feedly',
description: 'Feedly_notifierをクリック',
}, ({vim}) => {
vim.window.document.getElementById('toggle-button--jid1-bojn8b0im7kh2wjetpack-main-button').click();
})
ツールバーのIDをDOM Inspectorとかで調べて、必要な分だけ作ろう。
Stylishの編集画面を開く
CSS編集時に使う。
idは環境によって変わる。
vimfx.addCommand({
name: 'stylish_edit',
description: 'c_VimFxのcssを編集',
}, ({vim}) => {
vim.window.switchToTabHavingURI('about:stylish-edit?id=2', true);
})
選択文字列をGoogle翻訳
- 今まで
caretで選択→y
でコピー→t
や<C-t>
で新しいタブ開いてgt <C-v><Enter>
- 現在
caretで選択→t
とても楽になった。
config.js:
vimfx.addCommand({
name: 'search_selected_translate',
description: 'c_選択文字列をGoogle翻訳',
mode: 'caret',
}, ({vim}) => {
vimfx.send(vim, 'getSelection', null, selection => {
vim.window.switchToTabHavingURI('http://translate.google.co.jp/?source=osdd#auto|auto|'+selection, true)
})
})
frame.js:
vimfx.listen('getSelection', (data, callback) => {
let selection = content.getSelection().toString()
callback(selection)
})
ARCでも検索出来るようにしてるので、単語もサクサク調べられる。