Chrome扩展程序：网站加载后添加事件监听器不起作用

Question

bounty到期在2天内。该问题的答案有资格获得+ 150声望赏金。Zack Shapiro想要引起更多关注对此问题。

我正在构建Chrome扩展程序，以向我经常使用的网站添加一些快捷功能。我尝试调用addTypingListeners()将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，则应按照所附示例中的当前设置来设置侦听器。

Answer 2

这实际上是对编码的需求，除了您对dom所做的任何事情。

Background.js

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

fetch(url).then(res => res.text()).then((data) => {
  chrome.tabs.sendMessage(tabId, {
    message: data
  });
})

Content.js

function addTypingListeners(data) {
  // Update page dom
}


chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message) {
    addTypingListeners(request.message);
  }
});