Red Hat Enterprise Linux 8 的小技巧 创建一个 GNOME shell extensions



1 背景

  • 在我们使用 GNOME 桌面的时候, 有时想要知道我们当前的 IP 地址, 但通常又不能很直观的看到. 通过这个 extension , 我们就可以非常方便知道我们当前的 IP (默认路由上对应网口的IP)地址了. 这个 entension 会以 10 秒钟为间隔, 自动的刷新, 避免IP 更新后不能及时同步.


    2 环境

  • Red Hat Enterprise Linux release 8.5 (Ootpa)
  • gnome-shell-3.32.2-40.el8.x86_64
  • gnome-tweaks-3.28.1-7.el8.noarch


    3 GNOME shell extensions 简介

  • GNOME shell extensions 设计旨在为 GNOME GUI 部分提供更强大的功能扩展,例如窗口管理, 应用程序启动, 显示定制化的信息等等。它通过加载 JavaScript 和 CSS 而无需修改或重新编译源代码就可以实现GNOME 功能的动态扩展. extensions 使用基于GNOME特定的 JavaScript 开发.
  • GNOME shell extensions 会存在于两个路径
    • 当前用户的路径 ~/.local/share/gnome-shell/extensions/
    • 全局系统路径 /usr/share/gnome-shell/extensions/
  • GNOME shell extensions 必须的两个文件
    • metadata.json 里面包含了 extension 的基本信息, 例如 名字, 描述, 版本, UUID 等
    • extension.js 是 extension 中的关键部分, 实现了 extension 全部工作, 里面包含3个最基本的组成函数
      • init() 引导初始化时执行的函数;
      • enable() extension 被调用执行;
      • disable() extension 被调用执行.
  • 我们可以通过命令查看运行状态 GNOME shell 的运行状态
    1
    # journalctl -f -o cat /usr/bin/gnome-shell


    4 创建显示 IP 的 GNOME shell extension

    4.1 进入目录, 创建extension 的文件夹, 简单起见, 就叫 sam_show_ip@ackdo.com

    1
    2
    # cd /usr/share/gnome-shell/extensions/
    # mkdir sam_show_ip@ackdo.com

    4.2 创建 extension 必须的 2 个文件

  • 创建文件
    1
    # touch extension.js metadata.json
  • 编辑文件
    • 编辑 `metadata.json‵
      1
      2
      3
      4
      5
      6
      {
      "name": "Sam show ip",
      "description": "This extension can be used to show the ipaddress",
      "uuid": "sam_show_ip@ackdo.com",
      "shell-version": ["3.32.2"]
      }
    • 编辑 extension.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      const St = imports.gi.St;
      const Main = imports.ui.main;
      const Mainloop = imports.mainloop;
      const GLib = imports.gi.GLib;
      const ShellToolkit = imports.gi.St;
      let reflashTime, text, button;

      function GetIP() {
      var cmd_ret = GLib.spawn_command_line_sync('ip route get 1.2.4.8')[1];
      var out_str = '';
      var IpAddr;

      for (var index = 0; index < cmd_ret.length; ++index){
      var cur_char = String.fromCharCode(cmd_ret[index]);
      out_str += cur_char;
      }

      var Re = new RegExp(/src [^ ]+/g);
      var matches = out_str.match(Re);
      if (matches) {
      IpAddr = matches[0].split(' ')[1];
      } else {
      IpAddr = '';
      }
      text.set_text(IpAddr);
      return true;
      }

      function init() {
      button = new St.Bin({
      style_class: 'panel-button',
      reactive: true,
      can_focus: true,
      x_fill: true,
      y_fill: false,
      track_hover: true
      });
      text = new St.Label({text: "ip searching..."});
      button.set_child(text);
      }

      function enable() {
      Main.panel._rightBox.insert_child_at_index(button, 0);
      reflashTime = Mainloop.timeout_add_seconds(10.0,GetIP); // execute with 10 seconds interval
      }

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


      5 启动我们的 Sam show ip GNOME shell extension

    • 启动 gnome-tweaks 然后 enable extension
      setup_pycharm_createExternal1.png
    • 过 10 秒钟之后, ip 会自动同步
      setup_pycharm_createExternal1.png