Tutorial: Edit text fields in your browser with real Vim/Neovim in a terminal window (Firefox+Tridactyl on Linux)
Just a few moments ago I was a SurfingKeys user, an extension for browser to get Vim inspired key bindings and functionality (and more) in the browser. It also has a feature to edit text areas (like this body text here) in a dedicated popup window to emulate a few Vim like features. It’s nice to have, but I always wanted to edit in my real Vim configuration. I learned another extension Tridactyl does exactly that!
But to get that external editor functionality working, its a little bit more involved. Besides installing the main extension for Firefox, there is a helper tool that is needed in order to connect the text area with the external editor. I am using an Archlinux based system and here is what I did to get that dired functionality:
- first I disabled Surfingkeys extension, so it does not get in the way
- then I installed Tridactyl from the official Arch repository with
yay firefox-tridactyl
, instead from Firefox extensions page - the external editor is still not functioning, to get that the native tool must be installed, with Tridactyl in a browser window execute the normal command
:nativeinstall
to copy a terminal command to download and install the tool, however I did not do that and instead… - … installed the native tool from AUR, the Arch User Repository with
yay firefox-tridactyl-native
- now it works when going to a page with a text area, execute shortcut
C-i
to edit the current focused text field (or usegi
to find and focus on a text area, thenC-i
to edit it), the problem is, this is not my NeoVim editor and configuration - download and put the default configuration file from github.com/tridactyl/tridactyl/…/.tridactylrc to ~/.config/tridactyl/tridactylrc
- Uncomment (meaning remove the leading double quote
"
) the following line:
<span style="color:#323232;">" js tri.browserBg.runtime.getPlatformInfo().then(os=>{const ekjditorcmd = os.os=="linux" ? "st vim" : "auto"; tri.config.set("editorcmd", editorcmd)})
</span>
- then change the part
“st vim”
to something you want to use, in my case to“konsole -e nvim”
, this line should look like this now:
<span style="color:#323232;">js tri.browserBg.runtime.getPlatformInfo().then(os=>{const ekjditorcmd = os.os=="linux" ? "konsole -e nvim" : "auto"; tri.config.set("editorcmd", editorcmd)})
</span>
- then restart Firefox or do a
:source
in the browser to make use of the new configuration
All of these steps look complicated, but in fact its done in a few minutes if you are familiar with Vim and Linux. Now whenever I edit any text field in the browser with C-i
, it will open a new window managed by my systems window manager (which is auto tiled in my case BTW). Edit the text, do a :wq
and the text field in the browser should update. Finally, this is exactly what I wanted. Hope this little tutorial is helpful for anyone interested too.
Edit:
- Tridactyl will change the “New Tab Page”, this is normal and you can (and should) change it back to whatever you was using, I prefer they didn’t do that but its not a deal breaker and happens on install only, apparently because of some limiations of Firefox extension system
- show your current maps and configuration with
:viewconfig
in normal mode, and show help with:help
- I’m not sure yet, but while editing a text area in external editor it might be a good idea not to change the tab or focus? need to investigate this further
![](https://kbin.life/media/cache/resolve/entry_thumb/b5/9d/b59d234b11bf2ef11377e9debafe65d853597696889b22cc6e5826d0d951eaa5.png)