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 use gi to find and focus on a text area, then C-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