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

簡介

主意

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

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

通用技術(shù)方法

簡而言之，我們需要在某處建立 HTMLAudioElement 並根據(jù)目前標(biāo)籤中的網(wǎng)站播放/暫停它。

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

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

Offscreen API 允許擴(kuò)充功能建立一個不可見的 HTML 文件。使用它，我們將有一個地方來保存 HTMLAudioElement 並在需要時播放/暫停它。請記住，Service Worker 仍然無法執(zhí)行任何 DOM 操作，因此我們需要在螢?zāi)煌馕募闲略鲆恍┹o助腳本來接收 Service Worker 訊息並充分控製播放器。

執(zhí)行

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

我的擴(kuò)充功能需要權(quán)限數(shù)組中的兩個項目：

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

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

閱讀您的瀏覽紀(jì)錄

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

管理螢?zāi)煌馕臋n

正如我所提到的，我只想擁有一個 HTMLAudioElement 並從中播放音訊。為了使其獨(dú)立於選項卡，我將使用離屏 API 建立一個文檔，該文檔將由來自 Service Worker 的訊息保存和控制。

我喜歡物件導(dǎo)向編程，所以這裡有 OffscreenDoc 類別幫助進(jìn)行離螢?zāi)晃募芾怼１举|(zhì)上，它只是創(chuàng)建螢?zāi)煌馕臋n（如果尚未創(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 ，呼叫時需要一些路徑。這是 HTML 文件範(fàn)本的路徑，該範(fàn)本將用於建立我們的螢?zāi)煌馕募?。在我們的例子中，這將非常簡單：

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

從字面上看，只是一個腳本標(biāo)籤。此腳本將用於接收 Service Worker 訊息、建立 HTMLAudioElement 以及播放/暫停音樂。它還有 type="module"，因為我將在那裡導(dǎo)入一些東西。

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

訊息介面

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

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

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

從 Service Worker 發(fā)送訊息

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

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

• 當(dāng)新選項卡啟動時，使用者只需從選項卡 A 切換到選項卡 B，
• 當(dāng)前選項卡更新時，其 URL 已更改，或
• 當(dāng)選項卡關(guān)閉時- 這是一個有點(diǎn)棘手的情況，因為當(dāng)用戶在播放音訊時關(guān)閉最後一個隱身視窗時，如果不調(diào)用上述兩種情況中的任何一種，就可能會發(fā)生這種情況。

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

言歸正傳，這裡是更新後的 ts/background.ts 腳本，對這兩個事件做出反應(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è)定螢?zāi)煌馕臋n。多次呼叫它是安全的，因為如果文件已經(jīng)創(chuàng)建，它不會執(zhí)行任何操作。然後它決定是否應(yīng)該發(fā)送“播放”或“暫?！泵?，具體取決於當(dāng)前選項卡的 URL。最後，它發(fā)送訊息。正如我所提到的，sendMessage 沒有通用變體 (sendMessage)，因此指定訊息類型並不簡單，但 TS 滿足有助於確保我們發(fā)送的物件是 AudioMessage 類型。

也要注意頂部的兩個常數(shù) - 在這裡您指定要播放的音訊以及在哪個網(wǎng)站。

透過離屏文檔接收訊息

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

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

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

簡而言之，如果我們還沒有建立 HTMLAudioElement，我們將使用提供的來源來建立 HTMLAudioElement，然後播放/暫停它。出於打字目的，需要返回未定義。如果您對不同傳回值的含義感興趣，請查看文件

概括

試試看！請造訪 www.example.com（或您設(shè)定的任何網(wǎng)站）並查看音訊是否正在播放。嘗試來回切換選項卡並驗證它是否正確停止和恢復(fù)。

請考慮到，如果您暫停音樂超過 30 秒，它將重新啟動，因為瀏覽器將終止 Service Worker！ 以下是一些相關(guān)文件。

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

• 我們使用所需的權(quán)限更新了manifest.json，以建立螢?zāi)煌馕募K監(jiān)控選項卡上的活動
• 我們讓 Service Worker 觀察選項卡上的活動並向螢?zāi)煌馕臋n中的腳本發(fā)送足夠的命令
• 我們開始透過一個腳本播放音頻，該腳本接收來自 Service Worker 的訊息並控制螢?zāi)煌馕臋n的 DOM

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

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

以上是Chrome 擴(kuò)充功能 - 實現(xiàn)擴(kuò)充功能的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！