在上一篇文章中，我向您展示了如何設(shè)置 Chromium 擴(kuò)展項(xiàng)目，因此它支持 TypeScript、盡可能的自動(dòng)完成功能，并且作為入門工具可以很好地工作?，F(xiàn)在，我將簡要展示我的簡單頁面音頻擴(kuò)展的實(shí)現(xiàn)。

簡介

主意

我對(duì)擴(kuò)展的要求非常簡單 - 當(dāng)我訪問特定網(wǎng)站時(shí)，它應(yīng)該開始播放預(yù)定義的音頻。硬編碼的網(wǎng)站名稱和音頻完全沒問題。

更詳細(xì)地說，當(dāng)我打開 www.example.com 時(shí)，音頻應(yīng)該開始播放，當(dāng)我切換到不同的選項(xiàng)卡時(shí)停止，當(dāng)我返回 www.example.com 時(shí)繼續(xù)播放。另外，如果我有兩個(gè)（或更多）打開 www.example.com 的選項(xiàng)卡并且我在它們之間切換，則音頻應(yīng)該繼續(xù)播放而無需重新啟動(dòng)。換句話說，音頻應(yīng)該在整個(gè)擴(kuò)展級(jí)別播放，而不是單個(gè)選項(xiàng)卡。

通用技術(shù)方法

簡而言之，我們需要在某處創(chuàng)建 HTMLAudioElement 并根據(jù)當(dāng)前選項(xiàng)卡中的網(wǎng)站播放/暫停它。

它可以通過 Service Worker 和內(nèi)容腳本實(shí)現(xiàn) - 我們可以使用一個(gè)內(nèi)容腳本在每個(gè)頁面上創(chuàng)建一個(gè) HTMLAudioElement 元素，并使用 Service Worker 來協(xié)調(diào)播放。當(dāng)選項(xiàng)卡失去焦點(diǎn)時(shí)，它會(huì)將當(dāng)前媒體時(shí)間范圍傳遞給 Service Worker，當(dāng)具有匹配 URL 的另一個(gè)選項(xiàng)卡獲得焦點(diǎn)時(shí)，它會(huì)向 Service Worker 詢問時(shí)間范圍并從那里恢復(fù)播放。

但是，我認(rèn)為這種方法有點(diǎn)復(fù)雜，并且可能容易出錯(cuò)。如果我們可以只有一個(gè) HTMLAudioElement 元素并全局播放/暫停它，而不是從單個(gè)選項(xiàng)卡播放/暫停，那就更好了。幸運(yùn)的是，有一個(gè)有趣的 API 可以為我們提供很大幫助——offscreen API。

Offscreen API 允許擴(kuò)展程序創(chuàng)建一個(gè)不可見的 HTML 文檔。使用它，我們將有一個(gè)地方來保存 HTMLAudioElement 并在需要時(shí)播放/暫停它。請(qǐng)記住，Service Worker 仍然無法執(zhí)行任何 DOM 操作，因此我們需要在屏幕外文檔上添加一些輔助腳本來接收 Service Worker 消息并充分控制播放器。

執(zhí)行

在manifest.json中需要權(quán)限

我的擴(kuò)展需要權(quán)限數(shù)組中的兩個(gè)條目：

• 選項(xiàng)卡 - 它需要知道用戶何時(shí)切換和/或更新選項(xiàng)卡
• 離屏 - 它需要能夠創(chuàng)建離屏文檔才能從那里播放音頻

如果您在瀏覽器中打開擴(kuò)展程序詳細(xì)信息，您將看到如下所示的權(quán)限：

閱讀您的瀏覽歷史記錄

它可能看起來有點(diǎn)可怕，但這就是添加選項(xiàng)卡權(quán)限的原因。不幸的是，我無法找到一種與權(quán)限無關(guān)的不??同方法。我的其他想法導(dǎo)致了更可怕的權(quán)限集？在此線程中，您可以閱讀為什么選項(xiàng)卡權(quán)限會(huì)導(dǎo)致該條目。

管理屏外文檔

正如我所提到的，我只想擁有一個(gè) HTMLAudioElement 并從中播放音頻。為了使其獨(dú)立于選項(xiàng)卡，我將使用離屏 API 創(chuàng)建一個(gè)文檔，該文檔將由來自 Service Worker 的消息保存和控制。

我喜歡面向?qū)ο缶幊?，所以這里有 OffscreenDoc 類幫助進(jìn)行離屏文檔管理。本質(zhì)上，它只是創(chuàng)建屏幕外文檔（如果尚未創(chuàng)建）。

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

如您所見，唯一的公共方法是 setup ，調(diào)用時(shí)需要一些路徑。這是 HTML 文檔模板的路徑，該模板將用于創(chuàng)建我們的屏幕外文檔。在我們的例子中，這將非常簡單：

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

從字面上看，只是一個(gè)腳本標(biāo)簽。該腳本將用于接收 Service Worker 消息、創(chuàng)建 HTMLAudioElement 以及播放/暫停音樂。它還有 type="module"，因?yàn)槲覍⒃谀抢飳?dǎo)入一些東西。

但是要接收消息，我們可能應(yīng)該先發(fā)送它們。

消息接口

消息沒有任何嚴(yán)格的接口。我們只需要確保它們是 JSON 可序列化的。但是，我希望盡可能類型安全，因此我為擴(kuò)展中傳遞的消息定義了一個(gè)簡單的接口：

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

稍后您就會(huì)發(fā)現(xiàn) sendMessage 方法不太適合打字，但有一個(gè)簡單的解決方法仍然可以從類型安全中受益。

從 Service Worker 發(fā)送消息

Service Worker 是我們擴(kuò)展的“大腦”，知道發(fā)生了什么以及何時(shí)發(fā)生，并且應(yīng)該根據(jù)需要發(fā)送適當(dāng)?shù)南?。但具體是什么時(shí)候呢？

我們應(yīng)該在三種情況下改變播放狀態(tài)：

• 當(dāng)激活新選項(xiàng)卡時(shí)，用戶只需從選項(xiàng)卡 A 切換到選項(xiàng)卡 B，
• 當(dāng)前選項(xiàng)卡更新時(shí)，其 URL 已更改，或者
• 當(dāng)選項(xiàng)卡關(guān)閉時(shí) - 這是一個(gè)有點(diǎn)棘手的情況，因?yàn)楫?dāng)用戶在播放音頻時(shí)關(guān)閉最后一個(gè)隱身窗口時(shí)，如果不調(diào)用上述兩種情況中的任何一種，就可能會(huì)發(fā)生這種情況。

所有情況都意味著我們可能正在訪問我們想要播放音頻的網(wǎng)站或者我們剛剛關(guān)閉/離開的網(wǎng)站。

言歸正傳，這里是更新后的 ts/background.ts 腳本，對(duì)這兩個(gè)事件做出反應(yīng)：

// 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 函數(shù)在這里是最重要的。首先，它設(shè)置屏幕外文檔。多次調(diào)用它是安全的，因?yàn)槿绻臋n已經(jīng)創(chuàng)建，它不會(huì)執(zhí)行任何操作。然后它決定是否應(yīng)該發(fā)送“播放”或“暫?！泵?，具體取決于當(dāng)前選項(xiàng)卡的 URL。最后，它發(fā)送消息。正如我所提到的，sendMessage 沒有通用變體 (sendMessage)，因此指定消息類型并不簡單，但 TS 滿足有助于確保我們發(fā)送的對(duì)象是 AudioMessage 類型。

還要注意頂部的兩個(gè)常量 - 在這里您指定要播放的音頻以及在哪個(gè)網(wǎng)站。

通過離屏文檔接收消息

最后，我們正在發(fā)送消息，所以現(xiàn)在是時(shí)候接收它們并播放一些音樂了？

為此，我們需要實(shí)現(xiàn) offscreen.html 使用的腳本。它是 dist/offscreen.js，所以這就是對(duì)應(yīng)的 ts/offscreen.ts 的樣子：

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

簡而言之，如果我們還沒有創(chuàng)建 HTMLAudioElement，我們將使用提供的源來創(chuàng)建 HTMLAudioElement，然后播放/暫停它。出于打字目的，需要返回未定義。如果您對(duì)不同返回值的含義感興趣，請(qǐng)查看文檔

概括

嘗試一下！訪問 www.example.com（或您設(shè)置的任何網(wǎng)站）并查看音頻是否正在播放。嘗試來回切換選項(xiàng)卡并驗(yàn)證它是否正確停止和恢復(fù)。

請(qǐng)考慮到，如果您暫停音樂超過 30 秒，它將重新啟動(dòng)，因?yàn)闉g覽器將終止 Service Worker！ 以下是一些相關(guān)文檔。

總結(jié)我們所做的：

• 我們使用所需的權(quán)限更新了manifest.json，以創(chuàng)建屏幕外文檔并監(jiān)控選項(xiàng)卡上的活動(dòng)
• 我們讓 Service Worker 觀察選項(xiàng)卡上的活動(dòng)并向屏幕外文檔中的腳本發(fā)送足夠的命令
• 我們開始通過一個(gè)腳本播放音頻，該腳本接收來自 Service Worker 的消息并控制屏幕外文檔的 DOM

我希望它清晰易懂！此擴(kuò)展有一個(gè)非常自然的進(jìn)展 - 讓用戶指定不同的網(wǎng)站并為每個(gè)網(wǎng)站分配不同的音頻。希望當(dāng)我有時(shí)間時(shí)我會(huì)補(bǔ)充這一點(diǎn)，并寫另一篇文章來描述我的方法。

現(xiàn)在，感謝您的閱讀！

以上是Chrome 擴(kuò)展程序 - 實(shí)現(xiàn)擴(kuò)展程序的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！