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

簡(jiǎn)介

主意

我對(duì)擴(kuò)充功能的要求非常簡(jiǎn)單 - 當(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ù)方法

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

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

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

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

執(zhí)行

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

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

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

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

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

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

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

正如我所提到的，我只想擁有一個(gè) HTMLAudioElement 並從中播放音訊。為了使其獨(dú)立於選項(xiàng)卡，我將使用離屏 API 建立一個(gè)文檔，該文檔將由來自 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 ，呼叫時(shí)需要一些路徑。這是 HTML 文件範(fàn)本的路徑，該範(fàn)本將用於建立我們的螢?zāi)煌馕募?。在我們的例子中，這將非常簡(jiǎn)單：

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

從字面上看，只是一個(gè)腳本標(biāo)籤。此腳本將用於接收 Service Worker 訊息、建立 HTMLAudioElement 以及播放/暫停音樂。它還有 type="module"，因?yàn)槲覍⒃谀茄e導(dǎo)入一些東西。

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

訊息介面

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

// 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è)簡(jiǎn)單的解決方法仍然可以從類型安全中受益。

從 Service Worker 發(fā)送訊息

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

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

• 當(dāng)新選項(xiàng)卡啟動(dò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ù)在這裡是最重要的。首先，它會(huì)設(shè)定螢?zāi)煌馕臋n。多次呼叫它是安全的，因?yàn)槿绻募呀?jīng)創(chuàng)建，它不會(huì)執(zhí)行任何操作。然後它決定是否應(yīng)該發(fā)送“播放”或“暫?！泵?，具體取決於當(dāng)前選項(xiàng)卡的 URL。最後，它發(fā)送訊息。正如我所提到的，sendMessage 沒有通用變體 (sendMessage)，因此指定訊息類型並不簡(jiǎn)單，但 TS 滿足有助於確保我們發(fā)送的物件是 AudioMessage 類型。

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

透過離屏文檔接收訊息

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

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

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

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

概括

試試看！請(qǐng)?jiān)煸L 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，以建立螢?zāi)煌馕募K監(jiān)控選項(xiàng)卡上的活動(dòng)
• 我們讓 Service Worker 觀察選項(xiàng)卡上的活動(dòng)並向螢?zāi)煌馕臋n中的腳本發(fā)送足夠的命令
• 我們開始透過一個(gè)腳本播放音頻，該腳本接收來自 Service Worker 的訊息並控制螢?zāi)煌馕臋n的 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)文章！