?? ????? Chromium ?? ????? ???? ??? ??????, ? ????? ??? ?? TypeScript? ?? ?? ??? ???? ???? ???? ?????. ?? ??? Page Audio ?? ????? ??? ???? ????????.

??

????

?? ?? ?????? ??? ?? ?? ??????. ?? ????? ???? ?? ??? ???? ???? ???? ????. ????? ???? ??? ???? ?? ??? ????.

? ? ??? ???? www.example.com? ? ? ??? ??? ????, ?? ??? ???? ????, www.example.com?? ???? ?? ????? ???. ?? www.example.com? ?? ?? ? ? ??? ?? ?? ? ? ??? ???? ?? ???? ?? ???? ?? ?? ????? ???. ?, ???? ?? ?? ?? ?? ?? ???? ????? ???.

???? ??? ?? ??

??? ??? HTMLAudioElement? ???? ???? ?? ?? ????? ?? ??/?? ???? ???.

??? ??? ??? ????? ???? ?????. ?? ???? HTMLAudioElement ??? ???? ??? ????? ?? ??? ??? ???? ??? ??? ? ????. ?? ???? ??? ?? ??? ?? ???? ??? ???? ????, ???? URL? ?? ?? ?? ???? ??? ??? ???? ?? ???? ?? ???? ??? ?? ?????.

??? ? ?? ??? ?? ???? ??? ???? ?? ? ??? ?????. HTMLAudioElement ??? ??? ?? ?? ?? ?? ????? ??/?? ??? ? ??? ?? ? ?? ????. ???? ???? ? ??? ? ???? API? ????. ?? ????? API???.

????? API? ???? ?? ????? ??? ?? HTML ?? ??? ?? ? ????. ?? ???? HTMLAudioElement? ???? ??? ? ??/?? ??? ? ?? ??? ????. ??? ??? ??? DOM ??? ??? ? ???? ??? ?? ???? ???? ????? ???? ????? ????? ??? ??? ????? ????? ?? ?????.

??

Manifest.json? ??? ??

? ?? ?????? ?? ??? ? ?? ??? ?????.

• ? - ???? ?? ?? ?/?? ?????? ??? ??? ???
• ????? - ???? ???? ????? ????? ??? ???? ??? ?????

?????? ?? ???? ????? ?? ??? ?? ??? ?????.

?? ?? ??

?? ??? ?? ?? ??? ? ??? ???? ?? ?? ?? ?????. ????? ??? ?? ??? ?? ?? ?? ??? ?? ? ?????. ?? ??? ?? ?? ????? ?? ?? ??? ?? ??? ???? ?????? ? ?????? ? ???? ?? ?? ??? ???? ??? ?? ? ????.

????? ?? ??

?? ????? HTMLAudioElement? ??? ?? ???? ???? ???? ????. ? ????? ??? ?? ????? API? ???? ??? ??? ???? ?? ???? ???? ??? ???????.

?? ?? ?????? ??? ??? ????? ?? ??? ??? ?? OffscreenDoc ???? ?????. ????? ?? ???? ?? ?? ????? ??? ?????.

// ts/offscreen-doc.ts
/**
 * Static class to manage the offscreen document
 */
export class OffscreenDoc {
    private static isCreating: Promise<boolean | void> | null;
    private constructor() {
        // private constructor to prevent instantiation
    }

    /**
     * Sets up the offscreen document if it doesn't exist
     * @param path - path to the offscreen document
     */
    static async setup(path: string) {
        if (!(await this.isDocumentCreated(path))) {
            await this.createOffscreenDocument(path);
        }
    }

    private static async createOffscreenDocument(path: string) {
        if (OffscreenDoc.isCreating) {
            await OffscreenDoc.isCreating;
        } else {
            OffscreenDoc.isCreating = chrome.offscreen.createDocument({
                url: path,
                reasons: ['AUDIO_PLAYBACK'],
                justification:
                    'Used to play audio independently from the opened tabs',
            });
            await OffscreenDoc.isCreating;
            OffscreenDoc.isCreating = null;
        }
    }

    private static async isDocumentCreated(path: string) {
        // Check all windows controlled by the service worker to see if one
        // of them is the offscreen document with the given path
        const offscreenUrl = chrome.runtime.getURL(path);
        const existingContexts = await chrome.runtime.getContexts({
            contextTypes: ['OFFSCREEN_DOCUMENT'],
            documentUrls: [offscreenUrl],
        });
        return existingContexts.length > 0;
    }
}

????? ??? ?? ???? ???? ?? ? ??? ?????. ?? ????? ??? ??? ? ??? HTML ?? ???? ?????. ??? ???? ?? ?????.

<!-- offscreen.html -->
<script src="dist/offscreen.js" type="module"></script>

? ??? ???? ?? ??? ??? ???. ? ????? ??? ?? ???? ????, HTMLAudioElement? ????, ??? ??/?? ???? ? ?????. ??? ??? ??? ???? type="module"? ????.

??? ???? ???? ?? ??? ? ? ????.

??? ?????

????? ??? ?????? ????. JSON ??? ?? ??? ???? ???. ??? ??? ? ??? ???? ???? ? ?? ????? ??? ???? ?? ??? ?????? ??????.

// ts/audio-message.ts
export interface AudioMessage {
    /**
     * Command to be executed on the audio element.
     */
    command: 'play' | 'pause';
    /**
     * Source of the audio file.
     */
    source?: string;
}

sendMessage ???? ??? ??? ???? ??? ?? ?? ?? ?? ????, ??? ?? ???? ??? ?? ? ?? ?? ?? ??? ????.

??? ????? ??? ???

??? ??? ?? ????? '??'?? ?? ?? ?? ???? ??? ?? ??? ?? ??? ???? ??? ???. ??? ??? ??????

? ?? ???? ?? ??? ???? ???.

• ? ?? ????? ???? ? A?? ? B? ??? ??? ? ????.
• ?? ?? ?????? URL? ??? ??
• ?? ?? ? - ???? ???? ?? ???? ??? ??? ?? ?? ? ?? ? ?? ?? ? ??? ???? ?? ??? ? ???? ?? ?? ???? ?????.

?? ??? ???? ????? ????? ??? ????? ?? ???? ???? ?? ?????.

? ?? ???? ?? ? ???? ???? ????? ts/Background.ts ????? ??? ????.

// ts/offscreen-doc.ts
/**
 * Static class to manage the offscreen document
 */
export class OffscreenDoc {
    private static isCreating: Promise<boolean | void> | null;
    private constructor() {
        // private constructor to prevent instantiation
    }

    /**
     * Sets up the offscreen document if it doesn't exist
     * @param path - path to the offscreen document
     */
    static async setup(path: string) {
        if (!(await this.isDocumentCreated(path))) {
            await this.createOffscreenDocument(path);
        }
    }

    private static async createOffscreenDocument(path: string) {
        if (OffscreenDoc.isCreating) {
            await OffscreenDoc.isCreating;
        } else {
            OffscreenDoc.isCreating = chrome.offscreen.createDocument({
                url: path,
                reasons: ['AUDIO_PLAYBACK'],
                justification:
                    'Used to play audio independently from the opened tabs',
            });
            await OffscreenDoc.isCreating;
            OffscreenDoc.isCreating = null;
        }
    }

    private static async isDocumentCreated(path: string) {
        // Check all windows controlled by the service worker to see if one
        // of them is the offscreen document with the given path
        const offscreenUrl = chrome.runtime.getURL(path);
        const existingContexts = await chrome.runtime.getContexts({
            contextTypes: ['OFFSCREEN_DOCUMENT'],
            documentUrls: [offscreenUrl],
        });
        return existingContexts.length > 0;
    }
}

????? ???? ToggleAudio ??? ?? ?????. ??, ????? ??? ?????. ??? ?? ??? ?? ?? ??? ???? ???? ?? ? ???? ?? ?????. ?? ?? ?? ?? URL? ?? "??" ?? "?? ??" ??? ??? ??? ?????. ????? ???? ????. ?? ????? sendMessage?? ?? ??(sendMessage)? ???? ??? ??? ???? ?? ?? ??? TS? ??? ??? ??? AudioMessage ???? ???? ? ??? ???.

??? ?? ? ?? ??? ?????. ??? ????? ???? ????? ?????.

????? ??? ??? ??

??? ???? ???? ?? ???? ?? ??? ??????

?? ???? offscreen.html?? ???? ????? ???? ???. dist/offscreen.js??? ?? ts/offscreen.ts? ??? ????.

<!-- offscreen.html -->
<script src="dist/offscreen.js" type="module"></script>

??? ???, HTMLAudioElement? ???? ?? ?? ??? ??? ???? ??? ?? ??/?? ?????. ??? ???? ???? ?? ??? ?????. ??? ?? ?? ??? ??? ??? ??? ?????

??

?? ????! www.example.com(?? ??? ????)?? ???? ???? ????? ?????. ?? ??? ??? ?? ???? ???? ?? ????? ?????.

??? ??? ????? ?? ????? ??? 30? ?? ?? ???? ?? ????? ?? ?????! ?? ?? ? ?? ??? ??? ????.

??? ? ?? ?????:

• ????? ??? ???? ? ??? ?????? ? ??? ???? ?????.json? ????????
• ??? ??? ?? ??? ???? ????? ??? ?? ????? ??? ??? ???? ????
• ??? ????? ???? ?? ????? ??? DOM? ???? ??????? ?? ??? ??? ??????

???? ???? ???? ????! ? ?? ?????? ???? ?? ?? ????? ???? ? ????? ?? ?? ???? ??? ? ??? ?? ?? ????? ??? ????. ??? ?? ? ??? ???? ? ?? ??? ???? ?? ???? ???????.

???? ????? ?????!

? ??? Chrome ?? ???? - ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!