从chrome扩展弹出窗口中删除单个URL似乎无法使用添加事件侦听器（事件侦听器可能是范围的）？ [英] Delete a single URL from a chrome-extension popup-window seems not working with adding event listeners (the event listener might be scoped?)

问题描述

我正在尝试制作功能齐全的Chrome扩展弹出窗口，使用户可以添加链接（基于打开选项卡的URL），并删除一个链接或删除所有的链接只需一个点击。下面是我的所有文件！我必须提前说，我使用jQuery的图书馆不是很好（没有经验），但如果这是我唯一的解决方案，比我将在代码中使用它。

I am trying to make a functional chrome-extension popup-window that enables the user to add links (based on the open tab's URL) when he desires it, and deletes one link or delete all of the links in just one click. Down below are all of my files! I must say in advance that I am not very good (and not experienced) with using jQuery's library but if that's the only solution that I have, than I will use it in my code.

删除所有链接的按钮和添加一个链接的按钮都能正常工作，没有错误。但是，应删除一个链接的按钮不工作，我尝试了各种方式，包括拼接。我正在尝试从DOM和chrome.storage.local中删除链接，这两个操作都不起作用。在下面的代码中，您可以看到我迄今为止所有的文件。按下X按钮时的代码未执行（请参阅这些图片）： https://i.stack.imgur.com/gg1Dy.png 和 https： //i.stack.imgur.com/4oGdI.png

The buttons to delete all the links and the button to add one link does work perfectly without bugs. However, the button to which one link should be deleted doesn't work, I tried various ways including splicing. I am trying to remove the link from the DOM and from the chrome.storage.local, both actions do not work. In the following code you can see all of the files I have thus far. The code of when the 'X' button is pressed doesn't get executed (see these pictures): https://i.stack.imgur.com/gg1Dy.png and https://i.stack.imgur.com/4oGdI.png

manifest.json：

manifest.json:

gist.github.com/kobrajunior/78acda830c2d1c384333542422f1494d

gist.github.com/kobrajunior/78acda830c2d1c384333542422f1494d

弹出窗口.js：

要查看的功能： addToDom 和 removeMe 和第一个事件侦听器 DOM完全加载

functions to look at: addToDom and removeMe and the very first event listener when the DOM is fully loaded

gist.github.com/kobrajunior/4852f85ae18cfb9edbe542a820b8c107

gist.github.com/kobrajunior/4852f85ae18cfb9edbe542a820b8c107

信息（如果需要），popup.html：

For extra information (if needed), the popup.html:

gist.github.com/kobrajunior/1c26691734c19391c62dc336ed2e1791

gist.github.com/kobrajunior/1c26691734c19391c62dc336ed2e1791

先谢谢你。

推荐答案

对于 popup.js 中的以下行，恢复（显示所有项目/按钮）并绑定侦听器，但不要忘记 addToDom 在 chrome.storage.local的回调内部调用。得到，这意味着当您将值分配给 allButtons 时，它们不会添加到DOM，导致 allButtons .length === 0 而且你没有绑定任何东西。

For the following lines in popup.js, you want to restore (show all the items/buttons) and bind listeners, however don't forget addToDom is called inside the callback of chrome.storage.local.get, that means by the time you assign value to allButtons, they're not added to DOM, that causes allButtons.length === 0 and you didn't bind anything in fact.

尝试移动恢复（您可能会遇到其他问题，但这并不包括在这个问题中）。

Try to move the binding logic inside the callback of restore (You may encounter other issues however that's not covered in this quesions).

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扩展弹出窗口中删除单个URL似乎无法使用添加事件侦听器（事件侦听器可能是范围的）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！