javascript - Chrome 扩展 : Adding event listener not working after site loads

Question

我正在构建一个 Chrome 扩展程序，为我经常使用的网站添加一些快捷方式功能。我试过调用我的addTypingListeners()将 div 与我添加到我正在处理的编辑页面的标题和副标题中的 2 个输入绑定(bind)。但是，我似乎从未进入 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您应该按照附加示例中当前所做的那样设置监听器。