How to Create a GNOME Shell Extension?

In this article, we will learn how to make a simple gnome-shell extension for Pardus 21's GNOME desktop. Our plugin will add an icon to the panel and a popup menu will send us a notification when we click on the icon.

To create the Gnome Shell plugin, first home enter the folder and ctrl+h and open the hidden files. Later on .local/share/gnome-shell/extensions We enter the directory location. Here extensions in the folder example@example.com We create a new folder named . in this folder extension. js ve metadata.json We create files.

metadata.json file is the file containing the plugin information. It is written as shown below.

Editing Gnome Shell plugin information with metadata.json

{ "uuid": "example@example.com", "name": "Example", "description": "This extension puts an icon in the panel with a simple popup menu.", "version": 1, "shell -version": [ "3.38" ], "url": "" }

• uid: It is a unique name and must be the same as the file name.
• Name: The name of the plugin should be short and descriptive. For example Application Menu, Extension List, Dash to Dock etc.
• Description: It briefly explains what the plugin does.
• Indicates the version of the plugin. It must be in the form of an integer.
• shell version: Here we have to describe the GNOME version we are using. Pardus 21 uses GNOME 3.38.6.
• Url: If there is a link to the plugin we made, we add it to this section.

metadata.json after we create our file extension. js We create our file.

Editing the extension.js file

'use strict'; const ExtensionUtils = imports.misc.extensionUtils; const Me = ExtensionUtils.getCurrentExtension(); function init() { log(`initializing ${Me.metadata.name} version ${Me.metadata.version}`); } function enable() { log(`enabling ${Me.metadata.name} version ${Me.metadata.version}`); } function disable() { log(`disabling ${Me.metadata.name} version ${Me.metadata.version}`); }

extension. js The skeleton of our file is as above. Now let's add the libraries we will use first to our file.

'use strict'; const {Gio, GLib, GObject, St} = imports.gi; const Main = imports.ui.main; const PanelMenu = imports.ui.panelMenu; const PopupMenu = imports.ui.popupMenu; const ExtensionUtils = imports.misc.extensionUtils; const Me = ExtensionUtils.getCurrentExtension(); function init() { log(`initializing ${Me.metadata.name} version ${Me.metadata.version}`); } function enable() { log(`enabling ${Me.metadata.name} version ${Me.metadata.version}`); } function disable() { log(`disabling ${Me.metadata.name} version ${Me.metadata.version}`); }

Now let's add icon for our plugin.

'use strict'; const {Gio, GLib, GObject, St} = imports.gi; const Main = imports.ui.main; const PanelMenu = imports.ui.panelMenu; const PopupMenu = imports.ui.popupMenu; const ExtensionUtils = imports.misc.extensionUtils; const Me = ExtensionUtils.getCurrentExtension(); let Indicator = GObject.registerClass( class Indicator extends PanelMenu.Button{ _init() { super._init(0.0, `${Me.metadata.name} Indicator`, false); let icon =new St.Icon({ icon_name: 'face-smile-symbolic', style_class: 'system-status-icon' }); this.actor.add_child(icon); } }); let indicator = null; function init() { log(`initializing ${Me.metadata.name} version ${Me.metadata.version}`); } function enable() { log(`enabling ${Me.metadata.name} version ${Me.metadata.version}`); indicator = new Indicator(); Main.panel.addToStatusArea(`${Me.metadata.name} Indicator`, indicator); } function disable() { log(`disabling ${Me.metadata.name} version ${Me.metadata.version}`); if (indicator !== null) { indicator.destroy(); indicator = null; } }

Then our plugin popup menu Let's add a notification.

'use strict'; const {Gio, GLib, GObject, St} = imports.gi; const Main = imports.ui.main; const PanelMenu = imports.ui.panelMenu; const PopupMenu = imports.ui.popupMenu; const ExtensionUtils = imports.misc.extensionUtils; const Me = ExtensionUtils.getCurrentExtension(); let Indicator = GObject.registerClass( class Indicator extends PanelMenu.Button{ _init() { super._init(0.0, `${Me.metadata.name} Indicator`, false); let icon =new St.Icon({ icon_name: 'face-smile-symbolic', style_class: 'system-status-icon' }); this.actor.add_child(icon); let item = new PopupMenu.PopupMenuItem(_('Show Notification')); item.connect( 'activate', () => { Main.notify(_('Whatʼs up?')); }); this.menu.addMenuItem(item); } }); let indicator = null; function init() { log(`initializing ${Me.metadata.name} version ${Me.metadata.version}`); } function enable() { log(`enabling ${Me.metadata.name} version ${Me.metadata.version}`); indicator = new Indicator(); Main.panel.addToStatusArea(`${Me.metadata.name} Indicator`, indicator); } function disable() { log(`disabling ${Me.metadata.name} version ${Me.metadata.version}`); if (indicator !== null) { indicator.destroy(); indicator = null; } }

Last of all alt+f2 do it, r Let's run the command. When we look at the Fine Settings application, we will see that the name of our plugin is there.

Our plugin is now operational.

A second way is to create a gnome-shell plugin from the command line. terminal for this

gnome-extensions create –-interactive

We write and run.

First, we enter the name of our plugin.

Then we enter the description of our plugin.

Finally, we enter the uuid and finish it.

Now the skeleton code of our plugin is ready. As we did above, we write the code in the extension.js file and alt + f2 and run our plugin.

For more information GNOME Wiki visit the page.