feat: Add Custom Toolbar Buttons from Project Settings

[malec-palec]

Summary

Adds support for configurable toolbar buttons in the GDevelop editor that execute npm scripts from the project's package.json in external terminal windows. Buttons are defined in a gdevelop-settings.yaml file in the project directory.

Features

• Custom toolbar buttons appear next to the save button
• Emoji icons supported
• NPM scripts execute in a new terminal window that stays open after completion
• Cross-platform support (Windows, macOS, Linux)

Configuration

Create gdevelop-settings.yaml in your project root:

toolbarButtons:
  - name: "Build"
    icon: "🔨"
    npmScript: "build"
  - name: "Test"
    icon: "🧪"
    npmScript: "test"

See result:

Technical Details

• Uses Electron IPC for renderer → main process communication
• Terminal spawning:
  • Windows: cmd.exe /c start cmd /k <command>
  • macOS: osascript to launch Terminal.app
  • Linux: Falls back through x-terminal-emulator, gnome-terminal, konsole, xterm

Testing

1. Create gdevelop-settings.yaml in a project directory
2. Open the project in GDevelop
3. Custom buttons should appear in toolbar after the save button
4. Clicking a button opens a terminal and runs the command

[Bouh]

Idea to go futher:
Having custom buttons for certain commands is very common in game engines and 3D editors.
Do you think it would be possible to extend the custom button you made to connect it to a user-written script to act directly in the scene editor?

For example, in Maya 3D, the interface is customizable and Python/Mel scripts can be used to generate elements and interact with the editor. Here is a basic example in Maya.

This could help automate the placement of objects on the scene programmatically. And much more!

[malec-palec]

Thanks for the feedback.

This kind of functionality would definitely be useful, but it is clearly out of scope for this PR. Also, as far as I know, GDevelop does not provide such an API, nor access to it via the CLI.

The original goal of this work was to add missing GDevelop capabilities directly into the editor, for example building projects via the CLI, and support for custom workflows (such as asset post-processing and running tests).

[4ian]

Hi! My main worry about this is that this would give an attacker the ability to execute arbitrary command if for example a rogue project is shared.
Of course there are other attack surfaces (once you can execute code in the renderer process, you could require('electron') or require('fs') and do anything) (but this is why the latest Electron versions go toward a model where only IPC calls are allowed, and the renderers can't access Node or Electron at all).

Do you think of ways to mitigate this?

[malec-palec]

This is a valid concern, I propose the following mitigations:

1. Only npm scripts from the root package.json can be executed. Buttons now use npmScript instead of arbitrary shell commands.
2. Script name validation - script names are validated with /^[a-zA-Z0-9_:-]+$/ to avoid command injection.
3. Removed SVG icons - dropped SVG support to remove an XSS vector via dangerouslySetInnerHTML, emoji-only icons now.
4. Obligatory user consent before execution - added a confirmation dialog before running any script:

The dialog can always be re-enabled from project preferences:

[4ian]

Thanks, your mitigations (only allowing npm scripts + explicitly asking user for consent along with the names of the scripts) seem a good compromise. Good idea to also remove support for SVG icons at this stage.
I think this is very fair and aligned with the security model we see in code IDEs (asking user if they trust a folder/workspace, for example when opening a folder with VS Code)

[4ian]

We've fixed formatting (npm run format) and an outdated test. Merging this now! Thanks for contributing this :)