How to create Gnome Extensions?

Hi,

From what I hear Gnome extensions uses Javascript! Well, I know a bit of JS as well as Python!
I want to create a note-taking application.

I can create the note-taking application but want guidance on how to implement it to GNOME!

I want to create an icon that sticks to the topbar. Clicking on it will open a drop-down menu - kind of like Gpaste. From there, I can do my note-keeping! Essentially it will be like Gpaste but instead of just “lines” of copied text, it will have sort of like a sticky note design!

Any idea on how to do that, or what I need?

Hi!
Not only shell extensions, but also GNOME apps can be written in JavaScript! For an application like this, I would recommend writing a full-fledged application instead of a shell extension. Applications have the advantage that there is a well-defined, stable platform API to target, instead of targeting the GNOME Shell internals (which may change from release to release, depending on the needs of GNOME Shell’s continuing evolution). You can also distribute your application on Flathub and automatically have it installable on other platforms as well, not just GNOME, and run in a stable, containerized Flatpak environment — you won’t have to deal with guessing whether a user’s system has a particular dependency that your shell extension would need.

A tutorial for writing a GNOME application in JS is available on this page among several other tutorials. Also feel free to join us in #javascript if you have questions.

Adding icons to the GNOME Shell top bar is generally discouraged, but if you really wanted it, then once you have your note-taking application, you could write a (much smaller) extension that adds this icon and communicates with your app.

2 Likes

Hi,

thanks for the detailed answer… really appreciate it.

I was wondering why devs shouldn’t add apps to the Gnome shell top bar? does it mess around with the source code or something?

In case I might have miscommunicated my idea, I want something like this -

You can read more about this here: https://blogs.gnome.org/aday/2017/08/31/status-icons-and-gnome/

1 Like