Installing and Configuring vimb: The Vim-like Browser

The advantages to doing it manually are large

In a previous post, I mentioned that I’ve been experimenting with new software in an attempt to remove as many programs written in interpreted languages as possible from my workflow. Probably the biggest example of this was qutebrowser, which is written in Python. My search for a replacement eventually lead me to vimb; however getting it working well required a bit of manual intervention.

First, the last official release of the software happened back in 2020, and so to get the latest updates (including having it build against WebKit2Gtk 4.1 instead of 4.0), it is necessary to build from source.

October 2023 Update

In the time that has passed since this post, vimb has released version 3.7.0, so manually building from source to use WebKit2Gtk 4.1 is no longer necessary, depending upon package availability. However it is still useful for enabling optimizations, so I’m leaving that section in this post.

Next, getting adblocking working requires using an external plugin, which is built against WebKit2Gtk 4.0. And so we’ll need to tweak this as well to get it working.

Finally, vimb doesn’t support tabs natively, and so it makes sense to use suckless tabbed for tabbing. However, there is a pretty significant bug that makes vimb almost unusable when running under tabbed. Luckily, there is a fix for this with a simple modification to the tabbed program, buried in vimb’s issue tracker.

Let’s get into it!

Installing vimb

First, we want to go to our local source directory and clone vimb into it,

$ cd ~/.local/src
$ git clone git@github.com:fanglingsu/vimb.git
$ cd vimb

In here, there is one modification that I like to make to the build. For some reason, developers often don’t use the compiler’s optimization features on their code. Theoretically, so long as the program is well written, there shouldn’t be any difference in behavior, and so I like to enable the optimizer. To do this, simply edit the config.mk file and add -O3 to CFLAGS on line 23. The line in question should look like,

CFLAGS   += -std=c99 -pipe -Wall -fPIC -O3

once the edit has been made.

From here, we can simple build and install it using make (gmake on BSD),

$ doas gmake clean install

Configuring vimb

Vimb has a split configuration system. It uses a normal configuration file, located at ~/.config/vimb/config by default, which is detailed in the end of the manual page for the program. You can check out a decent starting configuration on the project’s website.

One setting that you should definitely tweak is to disable strict-ssl, as vimb doesn’t play nicely with Let’s Encrypt certificates (at least I think that is the problem). Unless you turn that off, you won’t be able to visit a lot of websites (including mine). Disabling it turns the URL bar red as a warning when it sees a certificate it doesn’t like, but still lets you view the website.

In addition to this, there is a suckless-style config.h configuration file as well, located in the repository at src/config.def.h, which allows for some settings to be adjusted at compile time. This is documented using comments within the file itself.

My own configuration file is available on GitHub, if you’d like to take a look at that.

Ad Blocking

Ad blocking is not built into the browser by default, however vimb does support wyebadblock, a plugin created for use in WebKit2Gtk-based browsers based on Epiphany’s built in adblocker. It does take a couple of steps to get this set up, though.

At present, this plugin does not work under OpenBSD. I have forked it and started tinkering with it in an attempt to get it working but I haven’t had much time to dedicate to it. If and when I get my fork working, I’ll update this accordingly.

First, clone the repository,

$ git clone https://github.com/jun7/wyebadblock.git
$ cd wyebadblock

At least at the time of this writing, wyebadblock is built against WebKit2Gtk 4.0, rather than 4.1. It is not possible to combine these two libraries, and so if you build the plugin with the stock makefile, vimb will crash. Luckily, it isn’t hard to fix this.

Edit the makefile,

$ vi makefile

You’ll need to change the reference to webkit2gtk-4.0 in the pkg-config call on line 16 to instead refer to webkit2gtk-4.1. While we are editing the makefile, I again like to enable optimization by adding -O3 to CFLAGS (on lines 5 and 8), and I also like to change the install prefix on line 2 from /usr to /usr/local

Once you’ve made these changes, you can build and install the plugin. The dependencies in the makefile aren’t set up to do this in one command, so

$ gmake
$ doas gmake install

Next, we need to enable the plugin. This is done by adding adblock.so to vimb’s extension directory. It’s easiest to just create a symbolic link,

$ doas ln -s /usr/local/lib/wyebrowser/adblock.so /usr/local/lib/vimb/

Once this is done, the plugin will load when you next launch vimb.

However, we need to download easylist.txt and also tell vimb to block a few css elements before adblocking will start to actually work.

Downloading easylist.txt

First, easylist.txt should be downloaded and placed at ~/.config/wyebadblock/easylist.txt,

$ mkdir -p ~/.config/wyebadblock
$ curl https://easylist.to/easylist/easylist.txt -o ~/.config/wyebadblock/easylist.txt

You can check if wyebadblock can find the file by running,

$ wyebab --css

If it cannot find the file, it will say so,

$ wyebab --css
There is no easylist.txt

Custom CSS

Next, we want to tell vimb to insert some custom CSS into every page we visit to automatically hide certain elements. This is pretty straightforward to do, as vimb allows custom CSS to be specified by using the file ~/.config/vimb/style.css. This CSS will be injected into every site vimb visits.

You can use wyebab to generate the CSS we want, and add it to that file,

$ wyebab --css >> ~/.config/vimb/style.css

And that is all there is to it. It isn’t the world’s best adblocking setup, but it does work a lot better than nothing!

Tabbed

vimb doesn’t have native support for tabbing, instead pushing the responsibility for that job out to your window manager. If you’re using one that supports tabbing, like Pop Shell or i3, then you’re in good shape. Otherwise, you’ll need to use an external tool.

tabbed is a suckless utility that used xembed to allow for adding tabs to programs. Each “tab” is actually just a separate instance of the program in question, and tabbed manages switching the window between them.

As it is suckless utility, the primary way for installing it is to build from source, so

$ git clone https://git.suckless.org/tabbed
$ cd tabbed
$ doas gmake install

will install the program.

vimb directly supports xembed through its -e flag, and so we can easily launch it within tabbed using,

$ tabbed vimb -e

Once it is running within tabbed, you can create new tabs using tabbed’s spawn shortcut (CTRL-SHIFT-ENTER by default). Additionally, any new window that vimb spawns (like if you enter a url using the t command, or use “Open in new window” to open a link on a page) will spawn in a new tab automatically.

However, there is a significant bug in this setup. Quite frequently, the vimb browser window will not visually update until you unfocus and refocus the window. For example, you could hit the j key a few dozen times to scroll down, but the web page will remain stuck where you were initially until you refocus the window, after which the browser will update to display the appropriate location.

There is some debate about whether this is a problem with vimb, tabbed, or gtk itself. But the fix is pretty simple.

Edit tabbed.c and to to the configurerequest function (line 275 in an unpatched version of tabbed). At the very end of the if-statement in this function, add the following line,

resize(sel, ww, wh-bh);

so that it looks like this,

void
configurerequest(const XEvent *e)
{
	const XConfigureRequestEvent *ev = &e->xconfigurerequest;
	XWindowChanges wc;
	int c;

	if ((c = getclient(ev->window)) > -1) {
		wc.x = 0;
		wc.y = bh;
		wc.width = ww;
		wc.height = wh - bh;
		wc.border_width = 0;
		wc.sibling = ev->above;
		wc.stack_mode = ev->detail;
		XConfigureWindow(dpy, clients[c]->win, ev->value_mask, &wc);
                resize(sel, ww, wh - bh);
	}
}

And then recompile and reinstall tabbed. Following this change, the bug should be resolved.

Conclusion

And that’s about it! You should now have a reasonably functional setup based on vimb and tabbed, with functional adblocking. It requires a little bit of manual work, but the final product is quite functional. It doesn’t work perfectly–I do occasionally need to fall back on Firefox to use certain websites, but I do use vimb set up like this for the majority of my web browsing.