[EXTENSIONS] Permissions API

To interact with the editor's elements, you must define permissions in your main file under permissions. All objects and methods will then be available in the app object when the scripts run

Editor

editor.dirs.newIconSet

Allows you to set your own set of icons for directives within Explorer

app.editor.dirs.newIconSet("directories/iconset") // {extension_name}/directories/iconset.json

JSON example:

{
    "temp": "directories/svg/temp.svg"
}

editor.hl.registerProvider

Registering a provider for custom syntax highlighting. It operates on the principle of return values. Example:

app.editor.hl.registerProvider("structs", (editor) => {
    const regex = /struct\s+([\p{L}_][\p{L}\p{N}_]*)\s*\{/gu;

    const found = [...editor.value.matchAll(regex)].map(m => m[1]);

    return found.map(name => ({
        id: name,
        regex: `\\b${name}\\b`,
        token: "entity.name.type.class"
    }));
});

In this example, we register the "structs" highlighting provider (the ID is required). Next, we perform a RegExp search to find structures containing the specific words we want to highlight. Once the words are found, we return an array containing the data we need: id, token, and regex. All fields are required

• id - the ID for registering the token
• token - the token name. Explore tokens
• regex - a standard regex supported by the Ace editor we are using

This example finds all constructs of the type struct User { and highlights User, creating dynamic highlighting as the constructs appear

editor.onChange

Allows functions to be executed each time the editor changes. These changes include the appearance of a new character or a switch to a different editor

app.editor.onChange((editor) => {
    console.log(`Editor changed! Now cursor at line ${editor.cursor.line} and column ${editor.cursor.column}`)
})

editor.onClick

Allows you to execute functions whenever a click occurs within the editor

app.editor.onClick((editor) => {
    console.log(`Editor clicked at line ${editor.cursor.line} and column ${editor.cursor.column}`)
})

Styles

css.load

Allows you to load your own CSS files within the app. There are no content restrictions

app.css.load("index") // {extension_name}/index.css

theme.new

Allows you to create a new theme and officially add it to the settings. For now, you can only edit the app's internal CSS variables. To see all available variables, add theme.new to the extension's permissions and enter the command CSSVariables in the debugger

app.theme.new("Notch", {
    id: "notch",
    variables: {
        "--body-color": "#13151c",
        "--body-color-solid": "#151a25",
        "--body-color-transparent": "#151a255c",
        "--topbar-color": "#13151c",
        "--block-divider-border-color": "#ffffff12",
        "--code-footer-bg": "#0e0f14",
        "--segment-bg": "#191b25",
        "--segment-label": "#ffffff0a",

        "--main-font": "inherit",
        "--code-font": "monospace"
    },
    editorTheme: "nord_dark"
})

• editorTheme - This field controls the theme of the Ace editor

App

notification.send

Allows you to load your own CSS files within the app. There are no content restrictions

app.notification.send(
    {
        type: "danger",
        icon: "done_all",
        title: "My first notification!",
        content: "Hello there"
    }
)

Types:

• danger - for errors and critical issues
• success - for successful operations
• warn - for warnings

Icons:

• The icons use the latest Material Symbols Rounded

Preview:

window.create

Allows you to create your own windows on top of the main application. Example of a window with a link (only https):

const win = app.window.create(
    {
        title: "My window",
        url: "google.com" // without protocol
    }
)

win.open()

and close:

win.close()

window.close

Simply closes the current window (the main window)

app.window.close()

http.request

Allows you to send GET/POST requests that return complete data

const h = await app.http.request(
    {
        url: "https://go.yurba.one/api/status"
    }
)

h returns object:

• status - HTTP Status (For example, 200)
• ok - true if the request was successful and returned data, and false otherwise
• headers - Response headers
• data - Text or JSON from the requested URL

audio.play

Allows for limited audio playback

// plays audio from {extension_name}/sound.mp3
app.audio.play("sound.mp3", {
    speed: 999,
    volume: 2
})

Restrictions:

• volume - must be at least 0.2 and no more than 0.8. Default value: 0.2
• speed - must be at least 0.5 and no more than 4. Default value: 1
• Audio duration must not exceed 30 seconds

If any of these restrictions are violated, the value is reset to the default

JS

Extensions run in a VM, so your access to standard JavaScript functions is limited. However, you can enable them here

js.clearInterval

js.clearTimeout

js.setInterval

js.setTimeout