JavaScript 文件中的删除函数一次/同时删除两个书签

Question

该问题的详细信息已在 Github 问题部分中解决。我将提供相同的链接，其中已提供了相同的详细说明... 如果为相同的请求创建拉取请求，那将是非常友好的。

链接到问题/存储库： https://github.com/utkarshtambe10/videomark-chromeExtension/issues/3

我通过使用 JavaScript 的event.stopImmediatePropagation() 函数尝试了很多解决问题，但使用该函数又可以解决问题，因为在重新加载同一网页后，已删除的书签也会再次出现，这使得 chrome-extension 无法使用。 ...

如果提供帮助，请提前感谢....

下面附上参考代码：

const onDelete = async e => {
    const activeTab = await getActiveTabURL();
    const bookmarkTime = e.target.parentNode.parentNode.getAttribute("timestamp");
    const bookmarkElementToDelete = document.getElementById("bookmark-" + bookmarkTime);

    bookmarkElementToDelete.parentNode.removeChild(bookmarkElementToDelete);

    chrome.tabs.sendMessage(activeTab.id, {
        type: "DELETE",
        value: bookmarkTime
    }, viewBookmarks);
};

Answer 1

该错误在 addNewBookmarkEventHandler()

您将新书签写入 Storage，但不会更新 currentVideoBookmarks。
这意味着 currentVideoBookmarks 总是落后于 Storage 一个书签。

chrome.runtime.onMessage 处理程序（type === "DELETE"）从 currentVideoBookmarks 而非 Storage 中获取书签。

currentVideoBookmarks = currentVideoBookmarks.filter((b) => b.time != value);
chrome.storage.sync.set({[currentVideo]: JSON.stringify(currentVideoBookmarks)});

请阅读有关Debugging extensions 的教程。

contentScript.js

let currentVideoBookmarks = [];

const addNewBookmarkEventHandler = async () => {
    const currentTime = youtubePlayer.currentTime;
    const newBookmark = {
        time: currentTime,
        desc: "Bookmark at " + getTime(currentTime)
    };
    currentVideoBookmarks = await fetchBookmarks();
    
    chrome.storage.sync.set({
        [currentVideo]: JSON.stringify([...currentVideoBookmarks, newBookmark].sort((a, b) => a.time - b.time))
    });
};

chrome.runtime.onMessage.addListener((obj, sender, response) => {
    const { type, value, videoId } = obj;
    
    if (type === "NEW") {
        currentVideo = videoId;
        newVideoLoaded();
    } else if(type === "PLAY") {
        youtubePlayer.currentTime = value;
    } else if(type === "DELETE") {
        currentVideoBookmarks = currentVideoBookmarks.filter((b) => b.time != value);
        chrome.storage.sync.set({[currentVideo]: JSON.stringify(currentVideoBookmarks)});
        
        response(currentVideoBookmarks);
    }
});