Удаление одного URL-адреса из всплывающего окна chrome-расширения, кажется, не работает с добавлением прослушивателей событий(прослушиватель событий может быть ограничен?)

Исходная информация

Я пытаюсь сделать функциональное всплывающее окно chrome-extension, которое позволяет пользователю добавлять ссылки (на основе URL-адреса открытой вкладки), когда он этого хочет, и удаляет одну ссылку или удаляет все ссылки одним щелчком мыши. Ниже приведены все мои файлы! Я должен сказать заранее, что я не очень хорошо (и не опытный) с использованием библиотеки jQuery, но если это единственное решение, которое у меня есть, то я буду использовать его в своем коде.

Проблема

Кнопки для удаления всех ссылок и кнопки для добавления одной ссылки прекрасно работают без ошибок. Однако кнопка, с которой нужно удалить ссылку, не работает, я пробовал разные способы, включая сплайсинг. Я пытаюсь удалить ссылку из DOM и из chrome.место хранения.локально, оба действия не работают. В следующем коде вы можете увидеть все файлы, которые у меня есть до сих пор. Код при нажатии кнопки’ X ‘ не выполняется (см. Эти фотографии): https://i.stack.imgur.com/gg1Dy.png и https://i.stack.imgur.com/4oGdI.png

Код

декларация.формат JSON:

gist.github.com/kobrajunior/78acda830c2d1c384333542422f1494d

всплывающий.js:

функции для просмотра: addToDom и removeMe и самый первый прослушиватель событий, когда DOM полностью загружен

gist.github.com/kobrajunior/4852f85ae18cfb9edbe542a820b8c107

Для дополнительной информации (при необходимости), всплывающее окно.формат html:

gist.github.com/kobrajunior/1c26691734c19391c62dc336ed2e1791

Заранее спасибо.

Kobrajunior, в 14:04 (источник)

1 ответ

  1. Для следующих строк popup.jsвы хотите восстановить (показать все элементы/кнопки) и привязать прослушиватели, однако не забывайте addToDom, что вызывается внутри обратного chrome.storage.local.getвызова , то есть к тому времени, когда вы назначаете значениеallButtons, они не добавляются в DOM, что вызываетallButtons.length === 0, и вы ничего не связывали на самом деле.

    Попробуйте переместить логику привязки внутри обратного restoreвызова (вы можете столкнуться с другими проблемами, однако, которые не охвачены в этом вопросе).

    document.addEventListener('DOMContentLoaded', function () {
    restore();
    var allButtons = document.getElementsByClassName('buttons');
    function listenI(i) {
        allButtons[i].addEventListener('click', () => removeMe(i));
    }
    for (var i = 0; i < allButtons.length; i++) {
        listenI(i);
    }
});

function restore() {
    // get the tab link and title
    chrome.storage.local.get({ urlList: [], titleList: [] }, function (data) {
        urlList = data.urlList;
        titleList = data.titleList;

        // add the titles and url's to the DOM
        for (var i = 0, n = urlList.length; i < n; i++) {
            addToDom(urlList[i], titleList[i]);
        }
    });
}