最近想自己寫個gnome-shell擴充套件找到了下面兩個教程
GNOME 3.0 and 3.1 Shell Extensions
More GNOME Shell Customization
這是兩篇2011年的 gnome3.0 和 3.1 的教程，相信很多開發 gnome-shell 擴充套件的朋友也看見過這兩篇教程吧，我現在用的是3.18，我想差不了太多的，畢竟都是 gnome 3，我便照著這兩個教程開發，沒想到這就是我開發 gnome-shell 擴充套件噩夢的開始。。。。。

為什麼我的擴充套件就執行不起來呢，只好又在 github 上看了好多擴充套件的程式碼，終於發現了

main( ) 函式不再是程式入口了！！！

於是只能按照模板提供的方式開發擴充套件，上面的教程的程式碼根本執行不起來，求我心理陰影面積。。。

好了，吐槽完了開始正式講講 gnome 現在開發的基本結構，其實變化也沒用太大隻是把以前的 main( ) 拆成了三個函式分別是 init( )，enable( )，disable( )，上面兩篇教程還是很值得學習的，只要會 JavaScript 和 GObject 五分鐘就能學會開發 gnome-shell 擴充套件

另外我的/usr/share/gnome-shell/裡為什麼死活找不到./js/ui這個資料夾呀，連./js

首先建立一個 gnome-shell-extension 模板，輸入如下命令

# gnome-shell-extension-tool -c

就會在$HOME/.local/share/gnome-shell/extensions下建立一個模板擴充套件，裡面有三個檔案

• extension.js 這是 gnome-shell 擴充套件最核心的程式碼，init( )，enable( )，disable( ) 三個函式就在這裡面
• stylesheet.css 這時擴充套件中所使用的 css 樣式
• metadata.json 這是擴充套件的元資訊

先上 extension.js 的程式碼

const St = imports.gi.St;
const Main = imports.ui.main;
const Tweener = imports.ui.tweener;

let text, button;

function _hideHello() {
    Main.uiGroup.remove_actor(text);
    text = null;
}

function _showHello() {
    if (!text) {
        text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" });
        Main.uiGroup.add_actor(text);
    }

    text.opacity = 255;

    let monitor = Main.layoutManager.primaryMonitor;

    text.set_position(monitor.x + Math.floor(monitor.width / 2 - text.width / 2),
                      monitor.y + Math.floor(monitor.height / 2 - text.height / 2));

    Tweener.addTween(text,
                     { opacity: 0,
                       time: 2,
                       transition: 'easeOutQuad',
                       onComplete: _hideHello });
}

function init() {
    button = new St.Bin({ style_class: 'panel-button',
                          reactive: true,
                          can_focus: true,
                          x_fill: true,
                          y_fill: false,
                          track_hover: true });
    let icon = new St.Icon({ icon_name: 'system-run-symbolic',
                             style_class: 'system-status-icon' });

    button.set_child(icon);
    button.connect('button-press-event', _showHello);
}

function enable() {
    Main.panel._rightBox.insert_child_at_index(button, 0);
}

function disable() {
    Main.panel._rightBox.remove_child(button);
}

擴充套件執行如圖，每點一次右上角的齒輪圖示就會閃現一下 Hello，world!

分析上面的程式碼，可以看出整個擴充套件結構其實比一個main( ) 函式變得更清晰了，enable( ) 函式負責構造，init( ) 函式負責初始化，disable( ) 函式負責構析，而看了官方程式碼後發現，這並不是正確編寫擴充套件的姿勢，正確姿勢應該是用 lang.class 實現，修改後的程式碼如下

const Lang = imports.lang;
const St = imports.gi.St;
const Main = imports.ui.main;
const Atk = imports.gi.Atk;
const PanelMenu = imports.ui.panelMenu;
const Tweener = imports.ui.tweener;

const extensionName = "hello,world!";

const extension = new Lang.Class({
    Name : extensionName,
    Extends : PanelMenu.Button,

    _init : function() {
        this.parent(null,extensionName);
        this.actor.accessible_role = Atk.Role.TOGGLE_BUTTON;


        this._text = null;
        this._icon = new St.Icon({ icon_name: 'system-run-symbolic',
                                 style_class: 'system-status-icon' });

        this.actor.add_child(this._icon);
        this.actor.connect('button-press-event', Lang.bind(this, this._showHello));
    },



    _hideHello : function () {
      Main.uiGroup.remove_actor(this._text);
      this._text = null;
    },

    _showHello : function () {
      if (!this._text) {
        this._text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" });
        Main.uiGroup.add_actor(this._text);
      }
      this._text.opacity = 255;

      let monitor = Main.layoutManager.primaryMonitor;

      this._text.set_position(monitor.x + Math.floor(monitor.width / 2 - this._text.width / 2),
                      monitor.y + Math.floor(monitor.height / 2 - this._text.height / 2));

      Tweener.addTween(this._text,
                     { opacity: 0,
                       time: 2,
                       transition: 'easeOutQuad',
                       onComplete: this._hideHello });
      }
});

let instance;

function init() {}

function enable() {
    instance = new extension();
    Main.panel.addToStatusArea(extensionName, instance);
}

function disable() {
    instance = null;
}

寫完了就要開始除錯擴充套件了，坑又來了，gnome 提供了一個 javascript 的直譯器 gjs 但是 gnome 提供的東西不能除錯自家的擴充套件，執行擴充套件會出現這樣的錯誤

(gjs:7179): Gjs-WARNING **: JS ERROR: Error: Requiring St, version none: Typelib file for namespace 'St' (any version) not found
@/home/oxalics/.local/share/gnome-shell/extensions/[email protected]/extension.js:3

# export UI_TYPELIB_PATH=/usr/lib/gnome-shell也不好使，資料只在 gnome 的程序中有效

於是只有Alt+F2輸入 lg 可以進入 lookingGlass 裡除錯，如圖

可以看見 lookGlass 的介面還是很不錯的。。。。可是

錯誤資訊竟然不顯示行號
錯誤資訊竟然不顯示行號
錯誤資訊竟然不顯示行號

多麼反人類的設計啊，於是我有找到種除錯方法，見這裡。。。可是

GNOME 不崩潰沒有錯誤資訊
GNOME 不崩潰沒有錯誤資訊
GNOME 不崩潰沒有錯誤資訊

我現在很好奇 gnome 的工程師是怎麼除錯程式的。。。。我的經驗就是不停地 try catch 不停的用 Gio 往終端輸出資訊，這樣勉強能定位錯誤。

經過大概三天的折騰，在幾乎官方資料為零（過期資料還不如零呢～～～），終於開發擴充套件走上正軌了，我把我踩過的雷都寫在這裡，這些資料足夠讓你順利開始開發 gnome-shell 擴充套件了，也希望後人少走些彎路吧