Chrome Расширение: добавление прослушивателя событий не работает после загрузки сайта

Question

Я создаю расширение Chrome, чтобы добавить функциональность ярлыков на сайт, с которым я регулярно работаю. Я попытался вызвать мой addTypingListeners(), чтобы связать div с двумя входами, которые я добавил к заголовку и подзаголовку страницы редактирования, над которой я работаю. Тем не менее, я, кажется, никогда не попадаю в закрытие 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

1. Код, который вы указали, должен быть введен на страницу в виде скрипта содержимого (для детали ).

2. В соответствии с официальным документация, порядок событий при загрузке страницы:

   document_start> DOMContentLoaded> document_end> load> document_idle.

   Разница между load и DOMContentLoaded события объясняются здесь как

   Событие load вызывается, когда загружается вся страница, включая все зависимые ресурсы, такие как таблицы стилей и картинки. Это отличается от DOMContentLoaded , который запускается сразу после загрузки DOM страницы, не дожидаясь завершения ресурсов до sh загрузки.

   Таким образом, вам следует добавьте слушателей, не ожидая события DOMContentLoaded, которое никогда не сработает.

Answer 3

Это буквально все кодированные потребности, кроме того, что вы делаете с домом.

Фон. 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
  });
})

Содержание. js

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


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