从 chrome-extension 弹出窗口中删除单个 URL-window 似乎不适用于添加事件监听器（事件监听器可能有作用域？）

Question

背景资料

我正在尝试制作一个功能性的 chrome-扩展弹出窗口-window，使用户能够添加 link（基于打开的选项卡的 URL）当他需要时，只需单击一下即可删除一个 link 或删除所有 link。下面是我所有的文件！我必须提前声明，我不太擅长（也没有经验）使用 jQuery 的库，但如果这是我唯一的解决方案，那么我会在我的代码中使用它。

问题

删除所有 link 的按钮和添加一个 link 的按钮可以完美无误地工作。但是，应该删除一个link的按钮不起作用，我尝试了包括拼接在内的各种方法。我正在尝试从 DOM 和 chrome.storage.local 中删除 link，这两个操作都不起作用。在下面的代码中，您可以看到我目前拥有的所有文件。按下 'X' 按钮时的代码不会执行（参见这些图片）：https://i.stack.imgur.com/gg1Dy.png and https://i.stack.imgur.com/4oGdI.png

代码

manifest.json:

gist.github.com/kobrajunior/78acda830c2d1c384333542422f1494d

popup.js:

要查看的函数：addToDom 和 removeMe 以及 第一个事件监听器 DOM 已满载

gist.github.com/kobrajunior/4852f85ae18cfb9edbe542a820b8c107

有关额外信息（如果需要），popup.html:

gist.github.com/kobrajunior/1c26691734c19391c62dc336ed2e1791

提前谢谢你。

Answer 1

对于popup.js中的以下几行，您想恢复（显示所有items/buttons）并绑定监听器，但是不要忘记在回调中调用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]);
        }
    });
}

从 chrome-extension 弹出窗口中删除单个 URL-window 似乎不适用于添加事件监听器（事件监听器可能有作用域？）

Delete a single URL from a chrome-extension popup-window seems not working with adding event listeners (the event listener might be scoped?)

javascript

events

google-chrome

popupwindow

google-chrome-extension

背景资料

问题

代码