NexDocs logoNexDocs

Manifest.json Overview - Opera GX Mods

Learn about the structure and fields in the manifest.json file, the core configuration for Opera GX mods.

The manifest.json file is the backbone of your Opera GX mod. It defines the mod’s structure, assets, and functionality.

📝 What is manifest.json?

The manifest.json is a JSON file that:

  • Describes your mod's metadata.
  • Declares assets like wallpapers, themes, sounds, and more.
  • Specifies how your mod interacts with Opera GX.

🛠️ Key Sections

1. Metadata

Basic details about your mod:

manifest.json 
{
  "name": "My Cool Mod",
  "version": "1.0.0",
  "description": "A description of what this mod does.",
  "developer": {
    "name": "Your Name"
  },
  "manifest_version": 3
}

2. Mod Configuration

The mod object contains all the assets and settings:

manifest.json 
{
  "mod": {
    "license": "license.txt",
    "schema_version": 2,
    "payload": {
    // Your assets go here
    }
  }
}

3. Mods Interface

Wallpapers

Define wallpapers for light and dark themes:

manifest.json 
{
  "wallpaper": [
    {
      "id": "wallpaper_01",
      "name": "Cool Wallpaper",
      "dark": { "image": "assets/wallpapers/dark.jpg" },
      "light": { "image": "assets/wallpapers/light.jpg" }
    }
  ]
}

Themes

Customize colors for light and dark modes:

manifest.json 
{
  "theme": [
    {
      "id": "theme_01",
      "name": "Cool Theme",
      "dark": { "gx_accent": { "h": 190, "s": 80, "l": 50 } },
      "light": { "gx_accent": { "h": 190, "s": 70, "l": 60 } }
    }
  ]
}

4. Mods Sounds

Background Music

Add looping tracks to your mod:

manifest.json 
{
  "background_music": [
    {
      "id": "music_01",
      "name": "Epic Tune",
      "tracks": ["assets/music/epic.mp3"]
    }
  ]
}

Browser Sounds

Define custom sounds for browser interactions:

manifest.json 
{
  "browser_sounds": [
    {
      "id": "sound_01",
      "name": "Click Sounds",
      "sounds": {
        "CLICK": ["assets/sounds/click.wav"],
        "HOVER": ["assets/sounds/hover.wav"]
      }
    }
  ]
}

5. Mods Effects

Shaders

Add animated effects using shaders:

manifest.json 
{
  "shaders": [
    {
      "id": "shader_01",
      "name": "Matrix Effect",
      "path": "assets/shaders/matrix.txt"
    }
  ]
}

Fonts

Include custom fonts in your mod:

manifest.json 
{
  "fonts": [
    {
      "header": {
        "name": "Jura Regular",
        "variants": [
          {
            "path": "font/jura-regular.ttf"
          }
        ]
      },
      "id": "fonts_01",
      "name": "Jura Regular"
    }
  ]
}

Keyboard Sounds

Define custom sounds for keyboard interactions:

manifest.json 
{
  "keyboard_sounds": [
    {
      "id": "keyboard_01",
      "name": "Typing Sounds",
      "sounds": {
        "TYPING_BACKSPACE": ["keyboard/backspace.wav"],
        "TYPING_ENTER": ["keyboard/enter.wav"],
        "TYPING_LETTER": ["keyboard/letter_1.wav"]
      }
    }
  ]
}

Page Styles

Apply custom CSS to specific pages:

manifest.json 
{
  "page_styles": [
    {
      "css": ["webmodding/main.theme.css"],
      "id": "style_01",
      "matches": ["https://*.example.com/*"],
      "name": "Example Style"
    }
  ]
}

Splash Screen

Add a custom splash screen:

manifest.json 
{
  "splash_screen": [
    {
      "id": "splash_01",
      "name": "Cool Splash",
      "path": "splash/splash1.mp4"
    }
  ]
}

Mobile Image Overrides

Override images for mobile devices:

manifest.json 
{
  "mobile_image_overrides": [
    {
      "id": "mobile_01",
      "images": {
        "start_page_logo": "mobile_logo/logo1.png"
      },
      "name": "Mobile Logo"
    }
  ]
}

Stickers

Include custom stickers:

manifest.json 
{
  "stickers": [
    {
      "id": "stickers_01",
      "images": ["stickers/alien.webp"],
      "name": "Alien Stickers",
      "preview": "stickers/alien.webp"
    }
  ]
}

🧰 Best Practices

  1. Validate Your JSON Use a JSON Validator to avoid errors.
  2. Use Relative Paths Refer to assets with paths relative to your mod’s root directory.
  3. Keep It Organized Group related assets together for better management.
  4. Test Your Mod Ensure your mod works as expected in Opera GX.

📖 Learn More

🚀 With a well-structured manifest.json, your mod is ready to shine in Opera GX!

Edit this page
Getting Started - Opera GX Mods
A step-by-step guide on how to begin modding Opera GX and creating your first mod.
Wallpapers for Opera GX Mods
How to customize wallpapers for Opera GX mods, including file formats and best practices.