Chrome 확장 프로그램 - 확장 기능 구현-JS 튜토리얼-php.cn

이전 게시물에서 Chromium 확장 프로젝트를 설정하는 방법을 보여드렸는데, 이 프로젝트는 가능한 경우 TypeScript와 자동 완성 기능을 지원하며 시작으로 훌륭하게 작동합니다. 이제 간단한 Page Audio 확장 프로그램의 구현을 간략하게 보여드리겠습니다.

소개

아이디어

Chrome extension - implementing an extension

제가 확장 프로그램에서 원했던 것은 매우 간단했습니다. 특정 웹사이트로 이동하면 미리 정의된 오디오가 재생되기 시작해야 했습니다. 하드코딩된 웹사이트 이름과 오디오는 전혀 문제가 없습니다.

좀 더 자세히 설명하면 www.example.com을 열 때 오디오 재생이 시작되고, 다른 탭으로 전환하면 중지되고, www.example.com으로 돌아가면 다시 시작되어야 합니다. 또한 www.example.com이 열려 있는 두 개 이상의 탭이 있고 그 탭 사이를 전환하는 경우 오디오는 다시 시작하지 않고 계속 재생되어야 합니다. 즉, 오디오는 개별 탭이 아닌 전체 확장 레벨에서 재생되어야 합니다.

일반적인 기술적 접근 방식

간단히 말하면 HTMLAudioElement를 어딘가에 생성하고 현재 탭의 웹사이트에 따라 재생/일시 중지해야 합니다.

서비스 워커와 콘텐츠 스크립트를 사용하면 가능합니다. 모든 페이지에 HTMLAudioElement 요소를 생성하는 콘텐츠 스크립트를 갖고 서비스 워커를 사용하여 재생을 조정할 수 있습니다. 탭이 포커스를 잃으면 현재 미디어 시간 프레임을 서비스 워커에게 전달하고, 일치하는 URL이 있는 다른 탭이 포커스를 얻으면 서비스 워커에게 시간 프레임을 묻고 거기에서 재생을 다시 시작합니다.

그러나 이 접근 방식은 다소 복잡하고 오류가 발생하기 쉬울 수 있다고 생각합니다. HTMLAudioElement 요소를 하나만 갖고 개별 탭이 아닌 전체적으로 재생/일시 중지할 수 있다면 훨씬 더 좋을 것입니다. 다행히도 우리에게 큰 도움이 될 흥미로운 API가 있습니다. 바로 오프스크린 API입니다.

오프스크린 API를 사용하면 확장 프로그램이 보이지 않는 HTML 문서 하나를 만들 수 있습니다. 이를 사용하면 HTMLAudioElement를 유지하고 필요할 때 재생/일시 중지할 수 있는 공간이 생깁니다. 서비스 워커는 여전히 DOM 작업을 수행할 수 없으므로 서비스 워커 메시지를 수신하고 플레이어를 적절하게 제어하려면 오프스크린 문서에 도우미 스크립트가 필요하다는 점을 명심하세요.

구현

Chrome extension - implementing an extension

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를 생성하지 않은 경우 제공된 소스를 사용하여 생성한 다음 재생/일시 중지합니다. 타이핑 목적으로 정의되지 않은 반환이 필요합니다. 다양한 반환 값의 의미에 관심이 있다면 문서를 확인하세요

요약

Chrome extension - implementing an extension

한번 해보세요! www.example.com(또는 설정한 웹사이트)으로 이동하여 오디오가 재생되는지 확인하세요. 탭을 앞뒤로 전환해 보고 올바르게 중지되고 다시 시작되는지 확인하세요.

서비스 워커가 브라우저에 의해 종료되므로 음악을 30초 이상 일시 중지하면 다시 시작된다는 점을 참고하세요! 이에 대한 몇 가지 문서는 다음과 같습니다.

우리가 한 일을 요약하자면:

오프스크린 문서를 생성하고 탭 활동을 모니터링하는 데 필요한 권한으로 매니페스트.json을 업데이트했습니다
서비스 워커가 탭의 활동을 관찰하고 오프스크린 문서에 있는 스크립트에 적절한 명령을 보내도록 했습니다
서비스 워커로부터 메시지를 받고 오프스크린 문서의 DOM을 제어하는 스크립트를 통해 오디오 재생을 시작했습니다

명확하고 따라하기 쉬웠기를 바랍니다! 이 확장 프로그램에는 사용자가 서로 다른 웹사이트를 지정하고 각 웹사이트에 서로 다른 오디오를 할당할 수 있도록 하는 매우 자연스러운 진행이 있습니다. 시간이 나면 이 내용을 추가하고 내 접근 방식을 설명하는 다른 게시물을 작성하겠습니다.

지금까지 읽어주셔서 감사합니다!

위 내용은 Chrome 확장 프로그램 - 확장 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!