function show(platform, enabled) {
    document.body.classList.add(`platform-${platform}`);

    if (typeof enabled === 'boolean') {
        document.body.classList.toggle(`state-on`, enabled);
        document.body.classList.toggle(`state-off`, !enabled);
    } else {
        document.body.classList.remove(`state-on`);
        document.body.classList.remove(`state-off`);
    }
}

function openPreferences() {
    webkit.messageHandlers.controller.postMessage('open-preferences');
}

document
    .querySelector('button.open-preferences')
    .addEventListener('click', openPreferences);

(() => {
    // alert('hei');
    const x = document.getElementById('message');
    x.textContent = 'meh';

    // This cannot communicate with background.js
    const h = getMeaning({ hanzi: '好' });

    h.then((result) => {
        let s = result;

        x.textContent = result;
    });
})();

async function sendMessageAsync(args) {
    return new Promise((resolve, reject) => {
        try {
            // TODO: Find out why this have an error: Invalid context
            // eslint-disable-next-line no-undef
            chrome.runtime.sendMessage(args, (response) => {
                // eslint-disable-next-line no-undef
                if (!chrome.runtime.lastError) {
                    resolve(response);
                } else {
                    // eslint-disable-next-line no-undef
                    reject(chrome.runtime.lastError.message);
                }
            });
        } catch (err) {
            reject(err);
        }
    });
}

const GET_MEANING = 'GET_MEANING';

async function getMeaning({ hanzi }) {
    return sendMessageAsync({
        action: GET_MEANING,
        data: { hanzi },
    });
}

I tried chrome.runtime.sendMessage, but it is not working

Is there any other way to communicate with background.js from Safari Extension app's Script.js?