Creating GNOME Shell Extension in 1 day (Lock Screen Message Extension)

7 min readFeb 5, 2022

I made a GNOME Shell Extension in 1 day. What? Yep. This extension is called Lock Screen Message. It’s a simple extension (of course) that lets you add your message to the lock screen. This extension was made in 1 day even in less than an hour, but reviewing the extension takes me challenging.

Background

On February 3, 2022, I was bored, then I was to explore GNOME Projects, especially GNOME Shell, and also search many GNOME Shell Extensions on extensions.gnome.org. A few minutes later, I found an extension called Customize Clock on Lock Screen that can customize the lock screen clock with custom text or format. Customize Clock on Lock ScreenCustomize Clock on Lock Screen

Customize Clock on Lock Screen screenshot

I was thinking about this:

It would great if lock screen has a message like an Android

So, I decided to make the extension idea as fast as possible.

Preparation

First, ill duplicate the extension folder template, then open that folder using Visual Studio Code (my favorite).

I modify the metadata file for the new extension.

Before that, I need to debug some shell components using Looking Glass Button Extension, but it only works on the main session even triggering Alt + F2 for run command dialog.

Enabled extensions will be disabled when the user is on the lock screen. To do this, I need to modify extension files to make debugging also work on the lock screen. Now test it out, and here we go, I can easily open the Looking Glass using that button.

Now let’s inspect some shell components. The goal of this extension, is the message is placed at the bottom of the date, so I need to find the date child location, by inspecting the element, then append the “get_parent()” method until it reaches the gnome-shell UI root.

The date is a parent of clock stack, then unlock dialog, then “screenShield”, and so on…

Now I need to find the clock stack from that parent directly from the main because this extension can add the message directly from the Main.

Here is, the “Main.screenShield._dialog._clock._date”

Now, it’s time to code!

Coding

Because this is a simple extension, I wrote it as simple as possible (It’s 50 total lines of code). The pattern I use is object pattern because it’s simple and easy to maintain.

This extension only works when the current session mode is on unlock dialog. As I was saying, “Enabled extensions will be disabled when the user is on lock screen”, so it also only works on the disabled state.

Preferences

This extension needs configuration for editing messages. For that, I need a GNOME Schema file to save the configuration to the schema. In general, the schema file is separated as the “schemas” folder, including XML file (*.gschema.xml) and compiled schema file (gschemas.compiled).

The XML file includes some schema keys here. For this extension, it’s just one key.

To make schemas work, you need to compile it by running:

Next, I need to create a “pref.js” file on the extension folder. This extension doesn’t need a UI file because it takes a bit of byte here. So, I wrote the preferences UI programmatically on that file.

It’s should have a preferences (gear) button on the “Extensions” App.

If everything is ready, it’s time to package the extension into a zip file by running:

Now the generated extension zip filename is: lock-screen-message@advendradeswanta.gitlab.com.shell-extension.zip

Testing

It’s time to test the extension. This extension should be tested on the latest GNOME Version. To do that, I recommend using a Virtual Machine, in order not to make your computer unstable. You can test it out on your host machine, but as I reminded you, it may unstable. I use VirtualBox as a virtual machine for Sandboxed testing.

Operating System I use is the latest Fedora release (Fedora Workstation 35) bundled with the latest version of GNOME (GNOME 41). I also recommended using Live Desktop Session because I won’t make my computer storage full of VM’s 😛️. Just kidding, because it’s portable and faster.

Now, how to share the extension folder from the host to the guest? Don’t worry, VirtualBox Guest Additions was pre-installed on Fedora, so it can access host clipboards, shared folders, even drag and drop. If the OS you use isn’t provided Guest Additions pre-installed, you can use samba as a folder network (it acts like shared folders on VirtualBox, probably). To use it, click Settings on the top of the window, go to Shared Folders, and click the add button on the right of the panel. Now, choose a folder to share with the guest (which includes generated extension zip file) then, make it Permanent (if you decide) and Auto-Mount (important).

Let’s start the machine! After the machine is booted up, now I need to copy the extension zip file to the guest folder as Administrator or root (because accessing folder using the standard user is denied)

Now, let’s install the extension using the following command:

This will be an installed extension to the user folder, but it isn’t affected, so it needs to restart/reset/replace gnome-shell by re-login session. After that, it isn’t should be affected. Now, let’s open 2 windows of Terminal. The first one is used to enable, control, and test the extension by the following command:

The second one is used for previewing system (and gnome-shell) logs using the following command:

Okay, now let’s lock this desktop. But, the lock screen automatically unlocks the desktop, because the Live Session User doesn't have the password (of course). So, I need another extension that makes the lock screen won’t automatically disappear and unlock called Unblank lock screen. Now, I can easily screenshot and check the shell elements.

If there’s an issue, I need to fix the code, regenerate the extension zip file, and reinstall the extension (that’s why the testing needs a lot of time). If everything is ready and no issues, it’s time to submit to extension.gnome.org.

Submitting to EGO

I was nervous about the reviewing and inspecting extension by the reviewer, it looks like a nightmare, but it wasn’t bad for me.

A few minutes later, the first version of the extension was rejected. Why? Because I forgot that the object variable isn’t removable when the user disables and uninstalls the extension. (oh, man… Never mind.)

But, I never give up (never gonna give you up…, just kidding). So, I fixed the code suggested by the reviewer. Then, “regenerate the extension zip file and reinstall the extension …” (okay, stop it…)

After that, I resubmit for the second attempt, but this time is different, my extension isn’t reviewed for 12 hours (how long is that. never mind…, that's the reviewer, it needs to inspect more and more).

A few hours ago, the second version of my extension is approved (active). 🎉️ Yay!

To be featured on TWIG

Now, it’s time to announce everyone by making the message and making it featured on This Week In GNOME (This is the first time, so it will the best part).

On February 4, 2022, the date where it’s the deadline to submit the message. So, I quickly send a message before its due date.

On the next day, February 5, 2022. The TWIG #29 is online. Hooray!! Now my message is to be featured on TWIG! You can read more on thisweek.gnome.org

Conclusion

So, that's my story. Creating extensions may be fast or slower (maybe), but the testing and review need a lot of time to make the extension work and stable. So, I’ve contributed to GNOME Project. I hope you like it and follow it for more (maybe not because I often write blogs here.). Goodbye!