Sambungan Chrome - melaksanakan sambungan

Dalam siaran sebelumnya, saya menunjukkan kepada anda cara menyediakan projek sambungan Chromium, jadi ia menyokong TypeScript, autolengkap di mana mungkin dan hanya berfungsi dengan baik sebagai permulaan. Sekarang, saya akan menunjukkan secara ringkas pelaksanaan sambungan Audio Halaman mudah saya.

Pengenalan

Idea

Apa yang saya inginkan daripada sambungan saya adalah sangat mudah - apabila saya pergi ke tapak web tertentu, ia akan mula memainkan audio yang dipratentukan. Nama tapak web dan audio berkod keras adalah baik sepenuhnya.

Dalam lebih terperinci, audio akan mula dimainkan apabila saya membuka www.example.com, berhenti apabila saya beralih ke tab lain dan menyambung semula apabila saya kembali ke www.example.com. Selain itu, jika saya mempunyai dua (atau lebih) tab dengan www.example.com dibuka dan saya bertukar antara tab tersebut, audio harus terus dimainkan tanpa dimulakan semula. Dalam erti kata lain, audio harus dimainkan pada keseluruhan tahap sambungan, bukan tab individu.

Pendekatan teknikal umum

Ringkasnya, kita perlu mencipta HTMLAudioElement di suatu tempat dan memainkan/jedanya bergantung pada tapak web dalam tab semasa.

Ia boleh dilakukan dengan pekerja perkhidmatan dan skrip kandungan - kami boleh mempunyai skrip kandungan yang mencipta elemen HTMLAudioElement pada setiap halaman dan menggunakan pekerja perkhidmatan untuk menyelaraskan main balik. Apabila tab kehilangan fokus, ia menyerahkan rangka masa media semasa kepada pekerja perkhidmatan dan apabila tab lain dengan URL yang sepadan memperoleh fokus, ia meminta pekerja perkhidmatan untuk tempoh masa dan menyambung semula main semula dari sana.

Namun, saya rasa pendekatan ini agak berbelit-belit dan mungkin terdedah kepada ralat. Adalah lebih baik jika kita boleh mempunyai hanya satu elemen HTMLAudioElement dan memainkan/jedanya secara global, bukan daripada tab individu. Nasib baik, terdapat API menarik yang akan sangat membantu kami - API luar skrin.

API luar skrin membolehkan sambungan membuat satu dokumen HTML yang tidak kelihatan. Menggunakannya, kami akan mempunyai tempat untuk menyimpan HTMLAudioElement kami dan hanya memainkan/jedanya apabila diperlukan. Perlu diingat bahawa pekerja perkhidmatan masih tidak boleh melakukan sebarang operasi DOM, jadi kami memerlukan beberapa skrip pembantu pada dokumen luar skrin kami untuk menerima mesej pekerja perkhidmatan dan mengawal pemain dengan secukupnya.

Perlaksanaan

Memerlukan kebenaran dalam manifest.json

Sambungan saya memerlukan dua entri dalam tatasusunan kebenaran:

• tab - ia perlu tahu bila pengguna menukar dan/atau mengemas kini tab
• luar skrin - ia memerlukan keupayaan untuk mencipta dokumen luar skrin untuk memainkan audio dari sana

Jika anda membuka butiran sambungan dalam penyemak imbas, anda akan melihat kebenaran yang diterangkan sebagai:

Baca sejarah penyemakan imbas anda

Ia mungkin kelihatan agak menakutkan, tetapi itulah yang menyebabkan kebenaran menambahkan tab. Malangnya, saya tidak dapat memikirkan pendekatan berbeza dengan kebenaran yang kurang. Idea lain yang saya ada telah menghasilkan set kebenaran yang lebih menakutkan? Dalam urutan ini, anda boleh membaca sebab kebenaran tab menyebabkan entri itu.

Menguruskan dokumen luar skrin

Seperti yang telah saya nyatakan, saya hanya ingin mempunyai satu HTMLAudioElement dan memainkan audio daripadanya. Untuk menjadikannya bebas tab, saya akan menggunakan API luar skrin untuk membuat dokumen yang akan disimpan dan dikawal oleh mesej daripada pekerja perkhidmatan.

Saya rasa seperti pengaturcaraan berorientasikan objek, jadi inilah kelas OffscreenDoc yang membantu pengurusan dokumen luar skrin. Pada dasarnya, ia hanya mencipta dokumen luar skrin jika ia belum dibuat lagi.

// 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;
    }
}

Seperti yang anda lihat, satu-satunya kaedah awam ialah persediaan dan ia memerlukan beberapa laluan apabila dipanggil. Itu adalah laluan ke templat dokumen HTML yang akan digunakan untuk membuat dokumen luar skrin kami. Ia akan menjadi sangat mudah dalam kes kami:

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

Secara literal, hanya satu teg skrip. Skrip ini akan digunakan untuk menerima mesej pekerja perkhidmatan, mencipta HTMLAudioElement dan memainkan/menjeda muzik. Ia juga mempunyai type="modul" kerana saya akan mengimport sesuatu ke sana.

Tetapi untuk menerima mesej, kita mungkin perlu menghantarnya dahulu.

Antara muka mesej

Tidak ada antara muka yang ketat untuk mesej. Kami hanya perlu memastikan ia boleh bersiri JSON. Walau bagaimanapun, saya ingin selamat jenis yang mungkin, jadi saya menentukan antara muka mudah untuk mesej yang dihantar dalam sambungan saya:

// 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;
}

Anda akan melihat sebentar lagi bahawa kaedah sendMessage tidak begitu sesuai untuk menaip, tetapi terdapat penyelesaian mudah untuk masih mendapat manfaat daripada keselamatan jenis di sana.

Menghantar mesej daripada pekerja perkhidmatan

Pekerja perkhidmatan ialah "otak" sambungan kami, tahu perkara dan bila sedang berlaku, dan harus menghantar mesej yang sesuai mengikut keperluan. Tetapi bilakah ia sebenarnya?

Kita harus menukar keadaan main balik dalam tiga situasi:

• apabila tab baharu diaktifkan, jadi pengguna hanya menukar daripada tab A ke tab B,
• apabila tab semasa dikemas kini, jadi URLnya telah berubah, atau
• apabila tab ditutup - itu adalah kes yang agak rumit, kerana ia mungkin berlaku tanpa menggunakan mana-mana daripada dua kes di atas apabila pengguna menutup tetingkap inkognito terakhir semasa audio dimainkan.

Semua situasi bermakna kami mungkin berada di tapak web di mana kami mahu audio dimainkan atau kami baru sahaja menutup/meninggalkannya.

Tanpa berlengah lagi, berikut ialah skrip ts/background.ts yang dikemas kini yang bertindak balas terhadap dua peristiwa:

// 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;
    }
}

Seperti yang anda lihat, fungsi toggleAudio adalah yang paling penting di sini. Pertama sekali, ia menyediakan dokumen luar skrin. Ia selamat untuk memanggilnya beberapa kali, kerana ia tidak melakukan apa-apa jika dokumen itu sudah dibuat. Kemudian ia memutuskan sama ada ia perlu menghantar arahan "main" atau "jeda", bergantung pada URL tab semasa. Akhirnya, ia menghantar mesej. Seperti yang telah saya nyatakan, sendMessage tidak mempunyai varian generik (sendMessage) jadi bukan perkara remeh untuk menentukan jenis mesej, tetapi TS memenuhi bantuan dengan memastikan objek yang kami hantar adalah daripada jenis AudioMessage.

Perhatikan juga dua pemalar di bahagian atas - di sini anda menentukan audio yang ingin anda mainkan dan di tapak web mana.

Menerima mesej melalui dokumen luar skrin

Akhir sekali, kami menghantar mesej, jadi kini tiba masanya untuk menerimanya dan memainkan muzik ?

Untuk melakukan ini, kita perlu melaksanakan skrip yang digunakan oleh offscreen.html. Ia adalah dist/offscreen.js, jadi begitulah rupa ts/offscreen.ts yang sepadan:

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

Ringkasnya, jika kami belum mencipta HTMLAudioElement kami melakukannya menggunakan sumber yang disediakan dan kemudian kami memainkan/menjedanya. Mengembalikan undefined diperlukan untuk tujuan menaip. Jika anda berminat dengan maksud nilai pulangan yang berbeza, semak dokumen

Ringkasan

Cubalah! Pergi ke www.example.com (atau mana-mana tapak web yang telah anda tetapkan) dan lihat sama ada audio sedang dimainkan. Cuba tukar tab ke sana ke mari dan sahkan sama ada tab berhenti dan disambung dengan betul.

Pertimbangkan bahawa jika anda menjeda muzik selama lebih daripada 30 saat, muzik itu akan dimulakan semula, kerana pekerja perkhidmatan akan ditamatkan oleh penyemak imbas! Berikut ialah beberapa dokumen mengenainya.

Untuk meringkaskan apa yang kami lakukan:

• kami mengemas kini manifest.json kami dengan kebenaran yang diperlukan untuk membuat dokumen luar skrin dan memantau aktiviti pada tab
• kami membuat pekerja perkhidmatan memerhati aktiviti pada tab dan menghantar arahan yang mencukupi kepada skrip yang terdapat dalam dokumen luar skrin
• kami mula memainkan audio melalui skrip yang menerima mesej daripada pekerja perkhidmatan dan mengawal DOM dokumen luar skrin

Saya harap ia jelas dan mudah diikuti! Terdapat perkembangan semula jadi bagi sambungan ini - membenarkan pengguna menentukan tapak web yang berbeza dan menetapkan audio yang berbeza kepada setiap satu daripadanya. Mudah-mudahan, saya akan menambahnya apabila saya mempunyai sedikit masa dan menulis catatan lain yang menerangkan pendekatan saya.

Buat masa ini, terima kasih kerana membaca!

Atas ialah kandungan terperinci Sambungan Chrome - melaksanakan sambungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!