GemShell

Appearance

Quick Start ​

Create a plugin in 30 seconds.

Create a Plugin ​

Option 1: From GemShell UI ​

  1. Open GemShell
  2. Click Manage Plugins
  3. Click New Plugin
  4. A new plugin folder opens in your file manager

Option 2: Manually ​

Create a folder in ~/.gemshell/plugins/:

~/.gemshell/plugins/my-plugin/
├── plugin.js
├── style.css
├── template.html
└── script.js

The Files ​

plugin.js (Required) ​

The manifest file declares your plugin's metadata and settings:

javascript
module.exports = {
  name: 'My Plugin',
  version: '1.0.0',
  author: 'Your Name',
  description: 'What your plugin does',
  
  // Files to inject (order: CSS, HTML, JS)
  inject: ['style.css', 'template.html', 'script.js'],
  
  // Settings shown in GemShell UI
  settings: [
    { id: 'enabled', type: 'checkbox', label: 'Enable', default: true },
    { id: 'message', type: 'text', label: 'Message', default: 'Hello!' }
  ]
};

style.css ​

Your styles, injected into <head>:

css
.my-plugin-panel {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 4px;
  font-family: sans-serif;
  z-index: 99999;
}

template.html ​

HTML template with conditionals:

html
{{#if enabled}}
<div class="my-plugin-panel" id="my-panel">
  {{message}}
</div>
{{/if}}

script.js ​

JavaScript logic:

javascript
// GEMSHELL_SETTINGS is auto-injected
const { enabled, message } = GEMSHELL_SETTINGS;

if (!enabled) return;

// Your element is already in the DOM from template.html
const panel = document.getElementById('my-panel');
console.log('Plugin loaded:', message);

Enable Your Plugin ​

  1. Open GemShell
  2. Go to Manage Plugins
  3. Enable your plugin globally (makes it available)
  4. In Game Settings, enable it for each game

Build ​

Build your game and the plugin files are automatically injected.

Injection Order ​

Files are injected in this order:

  1. CSS - into <head> (styles load first)
  2. HTML - into <body> (DOM elements available)
  3. JS - into <body> (can access DOM from template)

This means your JavaScript can immediately access elements from your HTML template.

Next Steps ​