Chrome扩展开发问题：删除书签数组元素后保存至chrome.storage.local异常

问题出在回调函数中的this上下文丢失：当你在chrome.storage.local.get的回调里使用$(this)时，这里的this已经不再指向被点击的.removeButton元素，而是指向回调函数的执行上下文，导致$(this).parent().index()获取的索引不正确，最终总是删除数组最后一个元素。

修复方案 #

在进入异步回调前，先把当前点击元素的上下文保存到变量中，比如$button：

$("ul").on("click", ".removeButton", function() {
    // 提前保存当前按钮及其父元素的索引
    const $button = $(this);
    const itemIndex = $button.parent().index();

    chrome.storage.local.get({bookmarks: []}, function(data) {
        var bookmarks = data.bookmarks;
        // 使用提前保存好的索引
        bookmarks.splice(itemIndex, 1);
        chrome.storage.local.set({ bookmarks: bookmarks}, function() {
            console.log(data.bookmarks);
        });
    });
    $button.parent().remove();
});

额外优化建议 #

可以把DOM操作放在chrome.storage.local.set的回调里，确保存储更新完成后再删除DOM元素，避免数据和UI不同步：

$("ul").on("click", ".removeButton", function() {
    const $button = $(this);
    const $parent = $button.parent();
    const itemIndex = $parent.index();

    chrome.storage.local.get({bookmarks: []}, function(data) {
        var bookmarks = data.bookmarks;
        bookmarks.splice(itemIndex, 1);
        chrome.storage.local.set({ bookmarks: bookmarks}, function() {
            console.log(data.bookmarks);
            // 存储更新后再删除DOM
            $parent.remove();
        });
    });
});

内容的提问来源于stack exchange，提问作者rafey04