代码可以在开发者工具中运行，但不能在 Google 扩展的内容脚本中运行

Question

因此，出于某种原因，每当我尝试在 google 扩展的内容脚本上使用此代码时，它都不起作用，但当我在 chrome 开发人员工具上使用它时，它就起作用了。 （我正在尝试制作一个将视频保存到 youtube 上的播放列表的功能。）

这是我使用的代码：

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

let name = "Playlist" + parseInt(Math.random()*100);

async function savePlaylist(listname) {
    let save = await waitForElm("[aria-label='Save to playlist']");
    save.click();
    let createbutton = await waitForElm('#actions > ytd-button-renderer > yt-button-shape > button[class="yt-spec-button-shape-next yt-spec-button-shape-next--text yt-spec-button-shape-next--call-to-action yt-spec-button-shape-next--size-m"]')
    let listinput = await waitForElm('#name-input');
    let checkboxelm = document.querySelector(`yt-formatted-string[title='${listname}']`);
    if (checkboxelm != null) {
        let checked = checkboxelm.parentElement.parentElement.parentElement.parentElement.checked;
        console.log(checked);
        if (checked === false) {
            checkboxelm.click()
        }
        if (checked === true) {
            console.log("added");
        }
    } else {
        console.log(listname)
        let create = document.getElementById('endpoint');
        create.click();
        listinput.value = listname;
        console.log("changed value to "+ listinput.value)
        listinput.dispatchEvent(new Event("input"));
        createbutton.click();
        console.log(createbutton)
        console.log(listinput)
        console.log(create)
    }
    const waitNotif = new MutationObserver(mutations => {
        let notifs = document.querySelectorAll("tp-yt-paper-toast");
        for (let i = 0; i < notifs.length; i++) {
            if (notifs[i].children[1].firstElementChild.firstElementChild && notifs[i].children[1].firstElementChild.firstElementChild.innerHTML === "Saved to ") {
                console.log("added");
                waitNotif.disconnect();
            }
        }
    });
    waitNotif.observe(document.querySelector("ytd-popup-container"), {
        childList: true,
        subtree: true
    });
}

savePlaylist(name)

当从 chrome 开发者工具执行它时，我会重新加载它，然后从控制台运行它。 我会复制我运行的代码并将其放入 Chrome 扩展的内容脚本中。这次它不会执行

create.click()

或输入值。

我尝试延迟它，但它仍然没有输入

listinput.value = listname;

上的值。

控制台中没有显示任何错误，并且我记录到控制台的变量将是有效的。

记录时

console.log("changed value to "+ listinput.value)

它会显示它已更改，但是当我在内容脚本运行后执行它时，它会显示它没有更改。

Answer 1

这可能是由于脚本的执行环境而发生的。我已经在这篇文章中就同样的问题有了一个公认的答案。请告诉我这是否是您的情况。希望这能有所帮助！