Thiết kế website giá rẻ

Question

I am trying to make a Chrome extension which calls an offscreen file from content.js to play an audio file. However, running it in Chrome, the console window throws this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'createDocument')
    at checkForVideoElement (content.js:28:30)
    at MutationObserver.<anonymous> (VM304 content.js:7:21)

manifest.json:

{
    "manifest_version": 3,
    "name": "Custom",
    "description": "",
    "version": "1.0",
    "action": {
        "default_popup": "templates/popup.html",
        "default_icon": "images/logo.png"
    },
    "background": {
        "service_worker": "scripts/background.js"
    },
    "icons": {
        "16": "images/logo.png",
        "32": "images/logo.png",
        "48": "images/logo.png",
        "128": "images/logo.png"
    },
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "offscreen"
    ],
    "host_permissions": [
        "https://www.netflix.com/watch/*"
    ],
    "content_scripts": [
        {
            "matches": [
                "https://www.netflix.com/watch/*"
            ],
            "js": [
                "scripts/content.js"
            ]
        }
    ]
}

content.js:

// Try to find the video element immediately
if (!checkForVideoElement()) {
    // If not found, use a mutation observer to watch for changes
    const observer = new MutationObserver((mutationsList, observer) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                if (checkForVideoElement()) {
                    // Stop observing once the video element is found
                    observer.disconnect();
                    break;
                }
            }
        }
    });

    // Start observing the document body for added nodes
    observer.observe(document.body, { childList: true, subtree: true });
}

function checkForVideoElement() {
    var video = document.querySelector("video");
    if (video) {
        console.log(video);

        if (video.currentTime <= 60) {
            console.log("Video found less than 60s");
            // creating offscreen document to play the custom Tudum sound
            // chrome.offscreen.createDocument({
            //     url: chrome.runtime.getURL("offscreen.html"),
            //     reasons: ["AUDIO_PLAYBACK"],
            //     justification: "Playing Custom Sound"
            // }, () => {
            //     chrome.runtime.sendMessage("playCustomSound");
            // });
        }

        return true;
    }
    return false;
}

offscreen.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Play Sound</title>
</head>

<body>
    <script src="../scripts/offscreen.js"></script>
</body>

</html>

offscreen.js:

console.log("Offscreen script loaded");

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log("Offscreen script received message:", message);

    if (message.action === "playSound") {
        playSound();
    }
});

function playSound() {
    chrome.storage.local.get("Sound", function (result) {
        let audio = result.Sound;
        if (audio) {
            console.log("Audio found");
            // Convert the data URI to a Blob
            fetch(audio)
                .then(response => response.blob())
                .then(blob => {
                    const audioUrl = URL.createObjectURL(blob);
                    const audioElement = new Audio(audioUrl);
                    audioElement.play().then(() => {
                        console.log("Audio played successfully");
                    }).catch(error => {
                        console.error("Error playing audio:", error);
                    });
                })
                .catch(error => {
                    console.error("Error converting audio data:", error);
                });
        } else {
            console.log("Audio not found");
        }
    });
}

I don’t understand what’s happening since I should not have to define a chrome object in my content.js file if I’m not wrong.

A previous version of my content.js file was able to run chrome.storage.local.get() so I don’t know why this method is not working.

Thiết kế website giá rẻ

Danh mục

Console says “chrome” is undefined in “chrome.offscreen.createObject” in content.js file