Displays if the system is connected to a VPN or not.

mkdir ~/.local/share/gnome-shell/extensions/vpn-indicator

metadata.json is a required file of every extension.

• It contains basic information about the extension such as its UUID, name and description.

metadata.json

{
  "description": "A VPN connection indicator.",
  "name": "VPN Indicator",
  "shell-version": [
    "3.32",
    "3.34",
    "3.36",
    "3.38",
    "40"
  ],
  "url": "",
  "uuid": "vpn-indicator",
  "version": 1
}

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

metadata.json

const St = imports.gi.St;
const Main = imports.ui.main;
const Lang = imports.lang;
const Util = imports.misc.util;
const PanelMenu = imports.ui.panelMenu;
const Mainloop = imports.mainloop;
const GLib = imports.gi.GLib;
const Clutter = imports.gi.Clutter;
 
const VpnIndicator = new Lang.Class({
    Name: 'VpnIndicator',
    Extends: PanelMenu.Button,
 
    _init: function() {
        this.parent(0.0, "VPN Indicator", false);
 
        if (!this.buttonText) {
          this.buttonText = new St.Label({
              text: _("Loading..."),
              y_align: Clutter.ActorAlign.CENTER
          });
        }
 
        this.actor.add_actor(this.buttonText);
        this._refresh();
    },
 
    _checkVPN: function() {
        let [res, out, err, exit] = GLib.spawn_sync(null, ["/bin/bash", "-c","ip addr | grep tun0"], null, GLib.SpawnFlags.SEARCH_PATH, null);
 
        // To prevent /var/log/syslog filling with error messages once the object is destroyed.
        try {
            if (this.buttonText) {
              if (exit == 256)
                this.buttonText.set_text("VPN off");
              else if (exit == 0)
                this.buttonText.set_text("VPN on");
              else
                this.buttonText.set_text("VPN Error");
            }
        } catch (e) {
          //    logError(e, 'ExtensionError');
        }
 
        return exit;
    },
 
    _refresh: function() {
        var qres = this._checkVPN();
        //this._refreshUI(qres);
 
        // Calls the refresh function every 2 seconds.
        this._timeout = Mainloop.timeout_add_seconds(2, Lang.bind(this, this._refresh));
    },
 
    _refreshUI: function(data) {
/*      
        var text;
 
        if (data == 256) {
            text = "VPN is down!";
        } else if (data == 0) {
            text = "VPN is up!";
        } else {
            text = "Error!";
        }
 
        // To prevent /var/log/syslog filling with error messages once the object is destroyed.
        try {
            if (this.buttonText) {
                this.buttonText.set_text(text);
            }
        } catch (e) {
          //    logError(e, 'ExtensionError');
        }
 
*/
    }
});
 
 
let twMenu;
 
 
function init() {
}
 
function enable() {
    twMenu = new VpnIndicator;
    Main.panel.addToStatusArea('vpn-indicator', twMenu);
}
 
function disable() {
    if (this._timeout)
      Mainloop.source_remove(this._timeout);
 
    this._timeout = undefined;
 
    if (this.buttonText !== null) {
        this.buttonText.destroy();
        this.buttonText = null;
    }
 
    twMenu.destroy();
}

https://extensions.gnome.org/

http://smasue.github.io/gnome-shell-tw