extension.js is a mandatory file for every extension.

• It is the core of the extension and contains the function hooks init(), enable() and disable() used by GNOME Shell to load, enable and disable your extension.

The file can use top-level functions, or an extension object.

• Use whichever pattern best suits.

extension.js

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

extension.js

// This is a handy import we'll use to grab our extension's object
const ExtensionUtils = imports.misc.extensionUtils;
const Me = ExtensionUtils.getCurrentExtension();
 
 
class Extension {
    constructor() {
    }
 
    /**
     * This function is called when your extension is enabled, which could be
     * done in GNOME Extensions, when you log in or when the screen is unlocked.
     *
     * This is when you should setup any UI for your extension, change existing
     * widgets, connect signals or modify GNOME Shell's behavior.
     */
    enable() {
        log(`enabling ${Me.metadata.name}`);
    }
 
 
    /**
     * This function is called when your extension is uninstalled, disabled in
     * GNOME Extensions, when you log out or when the screen locks.
     *
     * Anything you created, modified or setup in enable() MUST be undone here.
     * Not doing so is the most common reason extensions are rejected in review!
     */
    disable() {
        log(`disabling ${Me.metadata.name}`);
    }
}
 
 
/**
 * This function is called once when your extension is loaded, not enabled. This
 * is a good time to setup translations or anything else you only do once.
 *
 * You MUST NOT make any changes to GNOME Shell, connect any signals or add any
 * MainLoop sources here.
 *
 * @param {ExtensionMeta} meta - An extension meta object, described below.
 * @returns {Object} an object with enable() and disable() methods
 */
function init(meta) {
    log(`initializing ${meta.metadata.name}`);
 
    return new Extension();
}

An object describing the extension and various properties is available for extensions to use.

• This is passed to the init() function when an extension is loaded and can be retrieved by calling ExtensionUtils.getCurrentExtension().

/**
 * @typedef ExtensionMeta
 * @type {object}
 * @property {object} metadata - the metadata.json file, parsed as JSON
 * @property {string} uuid - the extension UUID
 * @property {number} type - the extension type; `1` for system, `2` for user
 * @property {Gio.File} dir - the extension directory
 * @property {string} path - the extension directory path
 * @property {string} error - an error message or an empty string if no error
 * @property {boolean} hasPrefs - whether the extension has a preferences dialog
 * @property {boolean} hasUpdate - whether the extension has a pending update
 * @property {boolean} canChange - whether the extension can be enabled/disabled
 * @property {string[]} sessionModes - a list of supported session modes
 */
 
 
----
 
===== prefs.js =====
 
**prefs.js** is used to build a Gtk widget that will be inserted into a window and be used as the preferences dialog for your extension.
 
  * If this file is not present, there will simply be no preferences button in GNOME Extensions or on https://extensions.gnome.org/local/.
 
<code javascript>
const {Adw, GLib, Gtk} = imports.gi;
 
// It is common practice to keep GNOME API and JS imports in separate blocks
const ExtensionUtils = imports.misc.extensionUtils;
const Me = ExtensionUtils.getCurrentExtension();
 
 
/**
 * Like `extension.js` this is used for any one-time setup like translations.
 *
 * @param {ExtensionMeta} meta - An extension meta object, described below.
 */
function init(meta) {
    log(`initializing ${meta.metadata.name} Preferences`);
}
 
 
/**
 * This function is called when the preferences window is first created to build
 * and return a GTK widget.
 *
 * As of GNOME 42, the preferences window will be a `Adw.PreferencesWindow`.
 * Intermediate `Adw.PreferencesPage` and `Adw.PreferencesGroup` widgets will be
 * used to wrap the returned widget if necessary.
 *
 * @returns {Gtk.Widget} the preferences widget
 */
function buildPrefsWidget() {
    // This could be any GtkWidget subclass, although usually you would choose
    // something like a GtkGrid, GtkBox or GtkNotebook
    const prefsWidget = new Gtk.Label({
        label: Me.metadata.name,
        visible: true,
    });
 
    // Add a widget to the group. This could be any GtkWidget subclass,
    // although usually you would choose preferences rows such as AdwActionRow,
    // AdwComboRow or AdwRevealerRow.
    const label = new Gtk.Label({ label: `${Me.metadata.name}` });
    group.add(label);
 
    window.add(page);
}
 
/**
 * This function is called when the preferences window is first created to fill
 * the `Adw.PreferencesWindow`.
 *
 * This function will only be called by GNOME 42 and later. If this function is
 * present, `buildPrefsWidget()` will never be called.
 *
 * @param {Adw.PreferencesWindow} window - The preferences window
 */
function fillPreferencesWindow(window) {
    const prefsPage = new Adw.PreferencesPage({
        name: 'general',
        title: 'General',
        icon_name: 'dialog-information-symbolic',
    });
    window.add(prefsPage);
 
    const prefsGroup = new Adw.PreferencesGroup({
        title: 'Appearance',
        description: `Configure the appearance of ${Me.metadata.name}`,
    });
    prefsPage.add(prefsGroup);
 
    const showIndicatorRow = new Adw.ActionRow({
        title: 'Show Indicator',
        subtitle: 'Whether to show the panel indicator',
    });
    prefsGroup.add(showIndicatorRow);
 
    const showIndicatorSwitch = new Gtk.Switch();
    showIndicatorRow.add_suffix(showIndicatorSwitch);
    showIndicatorRow.set_activatable_widget(showIndicatorSwitch);
}

stylesheet.css is CSS stylesheet which can apply custom styles to your St widgets in extension.js or GNOME Shell as a whole.

For example, if you had the following widgets:

// A standard StLabel
let label = new St.Label({
    text: 'LabelText',
    style_class: 'example-style'
});
 
// An StLabel subclass with `CssName` set to "ExampleLabel"
var ExampleLabel = GObject.registerClass({
    GTypeName: 'ExampleLabel',
    CssName: 'ExampleLabel'
}, class ExampleLabel extends St.Label {
});
 
let exampleLabel = new ExampleLabel({
    text: 'Label Text'
});

You could have this in your stylesheet.css:

/* This will change the color of all StLabel elements */
StLabel {
    color: red;
}
 
/* This will change the color of all elements with the "example-style" class */
.example-style {
    color: green;
}
 
/* This will change the color of StLabel elements with the "example-style" class */
StLabel.example-style {
    color: blue;
}
 
/* This will change the color of your StLabel subclass with the custom CssName */
ExampleLabel {
    color: yellow;
}

https://wiki.gnome.org/Attic/GnomeShell/Extensions/Writing

https://gjs.guide/extensions/overview/anatomy.html#prefs-js