An introduction to GNOME shell extensions

GNOME has a sleek interface, designed to support your work while being out of your way when possible. These considerations depend on your preferences. Some people want all the graphics and the icons, some wants to minimize distractions while remembering how to run stuff with keyboard shortcuts. A known issue is that GNOME has taken away the application menu that is common in other systems. you can add an extension to add it yourself. You write extensions for GNOME in JavaScript, though there are times when you can link to other languages. Because you use JavaScript, you can also use CSS packages such as Bootstrap.

What are the extensions changing?

This may seem like an irrelevant question but as you start troubleshooting, you need to know this. Any extension is actually adding code to the gnome-shell. Due to this, your desktop will crash due to a bad extension so test carefully before trusting any code. It is a good idea to remember this both when you are installing other people’s extensions and when you are coding yourself.

You can learn how to make an extension quickly if you know JavaScript and you follow the documentation at the GNOME wiki. You can start by using the standard tools which create the required files for you. There are only two required files, though, so creating them yourself is not a big task.

How do you install other people’s extensions?

Before you decide to make your own extension, it is a good idea to see what is already around. This way, you also have an opportunity to check out how they are written. The best way to learn to program is to combine tutorials with seeing others code. The official way to install an extension is to use the GNOME extensions webpage. With the help of a plugin, you can control your extensions using your browser (Firefox and Chrome). You also have the option to download the whole directory tree yourself. If you do, you need to place the whole thing under your home directory. The files go in its own directory under: ‘~/.local/share/gnome-shell/extensions/’. For system configurations, you put it in ‘usr/share/gnome-shell/extensions‘, but only do that after you have validated it and if you are administering the computer for many users. You can find many extensions on GitHub and other similar sites. In this case, you really must try it under your user, or even a temporary user.

What has been done before?

You may wonder what extensions people have designed before you? Some interesting ones are; Weather indicator in the taskbar, Pomodoro Timers, and systems indicators. You can also find a drawing program Draw On The Screen, which you call with Super-Shift-D. Very handy if you want to annotate a screenshot. If anything about the GNOME desktop annoys you, like a notification you would like to avoid. Look around, most things have tweaks in the shape of an extension. The activities button is not appreciated by all, so hide it with an extension. You can even get assistance when making your tea!

The best way to start

When you are tempted to start making your own, you need to learn JavaScript though you can use other languages for the main logic of your program. Your extension will complement the gnome-shell code which makes it useful to know enough JavaScript for troubleshooting. There are scripts ready to build your extension, use those and then look for similar extensions that you can study to see how they are implemented. The official starters documentation is good to get you started. You first need to identify what your extension will do. Will it have a drop-down menu, panel menu or maybe animations. You can find which one does what through the documentation, but here is a short breakdown of a few features.

Clutter – Lays out the graphical components. St – GNOME Toolkit, use these to create Boxes, Bins and more. Tweener – Commonly used for animations, not part of GNOME.

These are the three main components that you can use to make an extension. The documentation is very technical so look for examples wherever you can. The best way to learn is to use one part at a time.

More tutorials

It can be very helpful to follow a few tutorials, just don’t overdo it, the best way to learn is to make mistakes. Still, it is easier to climb the learning curve with a tutorial.

A nice tutorial showing the exchange rate as collected from transfer wise. A longer one here shows many more details and is more detailed. The tutorial is from 2012 but is still valid in many ways.

Conclusion

To start making GNOME extensions, your first challenge is to find good documentation. The second is to have a game plan for what you think your need should do. It will be very interesting for you if you have the JavaScript base that is required, though you can probably get through the existing tutorial even with rudimentary skills in JavaScript.