skills.rest
padparadscho
padparadschoCOMMUNITY
Explore all skills by this author →
Website𝕏@padparadschoGitHub

js-gnome-extensions

Build and debug GNOME Shell extensions using GJS ESModules.

Updated Aug 23, 2026
Search Tags:#extensions#extension-development#esmodules#gnome-shell#gnome-gjs#metadata.json#prefs.js
One-click install
npx skills add https://github.com/padparadscho/skills --skill js-gnome-extensions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: js-gnome-extensions
Source: https://github.com/padparadscho/skills/tree/main/skills/js-gnome-extensions
Command: npx skills add https://github.com/padparadscho/skills --skill js-gnome-extensions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers create, debug, and port GNOME Shell extensions using GJS and ESModules, simplifying the extension lifecycle from skeleton to UI components.

Core Features & Use Cases

  • Extension anatomy: covers metadata.json, extension.js, prefs.js, and stylesheet.css, plus ESModule imports and GNOME Shell API usage.
  • UI patterns: demonstrates panel indicators, popup menus, quick settings, dialogs, and translations.
  • Porting & publishing: guides upgrading extensions for GNOME Shell 45–49 and preparing submissions to extensions.gnome.org.

Quick Start

Create a new extension scaffold with metadata.json and extension.js, enable it with gnome-extensions, then begin implementing UI and preferences.

Frequently Asked Questions about js-gnome-extensions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a GNOME Shell extension using GJS and ESModules?▼

To create a GNOME Shell extension, scaffold the metadata.json and extension.js files using ESModule imports from gi:// and resource:/// paths, then enable it with gnome-extensions to start implementing UI components and preferences.

Does GNOME Shell extension development require specific files for the extension lifecycle?▼

GNOME Shell extension development requires metadata.json for configuration, extension.js for core lifecycle logic, prefs.js for settings, and stylesheet.css for styling to fully manage the extension anatomy.

What is the best way to port extensions for GNOME Shell 45 to 49?▼

The best way to port extensions for GNOME Shell 45 to 49 is updating your GJS imports to ESModules and adjusting lifecycle management in extension.js to match the latest GNOME Shell API requirements.

How do I build panel indicators and quick settings menus in GNOME extensions?▼

To build panel indicators and quick settings menus in GNOME extensions, use the GNOME Shell API within extension.js to implement UI patterns, managing ESModule imports for popup menus and dialogs.

Can I use ESModule imports from gi:// paths in GNOME Shell extension development?▼

Yes, you can use ESModule imports from gi:// and resource:/// paths in GNOME Shell extension development to access GNOME APIs and manage extension components like prefs.js.

Why does my GNOME Shell extension need prefs.js and metadata.json?▼

Your GNOME Shell extension needs metadata.json to define extension metadata and prefs.js to handle user preferences, both essential for the extension lifecycle and submitting to extensions.gnome.org.

Related Skills

Explore More Software Engineering Skills→
ahmed4gahmed4g

gnome-shell-extensions

Bootstraps GNOME Shell extensions with jsDoc using the gnome-extensions tool.

Community
Intermediate
projectbluefinprojectbluefin
134

packaging-gnome-shell-extensions

Package GNOME Shell extensions in BuildStream with Meson or Make patterns.

Official
Intermediate
gotargotar
26

gtk-ui-ux-engineer

Design GTK4 UI components with Libadwaita theming and GNOME HIG compliance.

Community
Basic
SteamedFishSteamedFish
6

archlinux-pkgbuild/desktop-integration

Create Arch Linux PKGBUILDs for GNOME, KDE Plasma, Eclipse plugins, and fonts.

Community
Intermediate