Chrome 扩展：添加事件侦听器在网站加载后不起作用

Question

我正在构建一个 Chrome 扩展程序，以便向我经常使用的网站添加一些快捷方式功能。我尝试调用 myaddTypingListeners()将 div 与 2 个输入绑定，这些输入已添加到我正在处理的编辑页面的标题和副标题中。然而，我似乎从来没有进入document.eventListener关闭状态。

我的 Chrome 扩展程序运行于，document_idle因此内容应该在我的附加代码运行时加载。如何让这些监听器嵌入到页面上？

即使我不打电话addTypingListeners()，我仍然可以看到a并b登录控制台

function addTypingListeners() {
    console.log('a')
    var meta = {}

    document.addEventListener("DOMContentLoaded",()=>{
        console.log('listeners added pre')
        bind(meta, document.getElementsByTagName('title'), "title");
        bind(meta, document.getElementsByTagName('subtitle'), "subtitle");

        setInterval(()=>{document.getElementsByTagName('h3')[0].innerText=meta.title});
        setInterval(()=>{
            console.log(meta)
            document.getElementsByTagName('h4')[0].innerText = meta.subtitle
        });

        console.log('listeners added')
    })

    console.log('b')
}

const start = async function() {
    // var location = window.location.toString()
    let slug = window.location.toString().split("/")[4]
    let url = `https://example.org/${slug}?as=json`

    const _ = await fetch(url)
        .then(res => res.text())
        .then(text => {
                let obj = JSON.parse(text);
                const { payload } = obj;

                // Container
                const root = document.getElementById('container');
                var clippyContainer = document.createElement('div');
                createShell(clippyContainer, name);
                root.appendChild(clippyContainer);

                // Inputs
                const title = document.getElementsByTagName('h3')[0];
                const subtitle = document.getElementsByTagName('h4')[0];

                var inputDiv = document.createElement('div');
                inputDiv.id = "input-div";
                const titleInput = document.createElement('input');
                titleInput.id = "title"
                titleInput.value = title.innerText;
                inputDiv.appendChild(titleInput);

                const breaker = document.createElement("br")
                inputDiv.appendChild(breaker);

                const subtitleInput = document.createElement('input');
                subtitleInput.id = "subtitle"
                subtitleInput.value = subtitle.innerText;
                inputDiv.appendChild(subtitleInput);
                clippyContainer.appendChild(inputDiv);

                inputDiv.appendChild(breaker);

                // addTypingListeners() // tried here, also doesn't work
        });
}

start()
    .then( (_) => { 
        console.log('hi')
        addTypingListeners() 
        console.log("done")
    })

Answer 1

可能在您设置侦听器时该事件DOMContentLoaded已经被触发。您可以检查document.readyState是否等于complete并执行该函数，而无需订阅该事件（如果该事件已发生）。在相反的情况下，如果readyState是loading或者interactive您应该按照附加示例中当前完成的方式设置侦听器。