Chrome 扩展 - 通知上的按钮侦听器执行多次

Question

我正在编写一个 chrome 扩展，它向 API 发出请求，我注意到在我使用 chrome 的通知 [=22] 从后台脚本创建通知后=]，通知按钮上的侦听器被执行多次。在第一个运行只有一次然后增加。我认为听众只是在页面上加起来，但我找不到刷新背景页面的方法。

这是创建通知及其侦听器的函数。

var myNotificationID
const displayNotification=(userEmail, password, website,username) =>{
    chrome.notifications.create("", {
        type:    "basic",
        iconUrl: "./icon128.png",
        title:   "PERMISSION",
        requireInteraction: true,
        message: "question",
        buttons: [{
            title: "YES",
        }, {
            title: "NO",
        }]
    }, function(id) {
        myNotificationID = id;
    })

    chrome.notifications.onButtonClicked.addListener(function(notifId, btnIdx) {
        if (notifId === myNotificationID) {
            if (btnIdx === 0) {
                console.log('inserting')
                try{
                    fetch (`http://localhost:8080/users/${userEmail}/accounts`,{      
                    })
                }catch(err){ 
                }
            } else if (btnIdx === 1) {
                console.log('clearing')
                chrome.notifications.clear(myNotificationID)
            }
        }
    });
}

这就是调用函数的地方

chrome.runtime.onMessage.addListener((message, sender, response)=>{
    if(message.message === 'showNotification'){
        console.log('received insert')
        displayNotification(message.userEmail,message.password, message.currentSite,message.username)
        response({status:"received"})
    }
})

listener中的fetch执行了多次，但是onMessage listener的log只显示了一次，所以listener是这里的问题。我尝试了 chrome.notifications.onButtonClicked.removeListener()，但正如我所提到的，没有成功。有没有其他方法可以在使用后从后台脚本中清除侦听器？

Answer 1

使用通知存储：

const notificationsByID = {};

chrome.notifications.onButtonClicked.addListener((notifId, btnIdx) => {
    // Avoid access to the notification if not registered by displayNotification
    if (!notificationsByID[ notifId ]) { return null; }
    if (btnIdx === 0) {
        console.log('inserting')
        try{
            fetch (`http://localhost:8080/users/${ notificationsByID[ notifId ].userEmail }/accounts`,{ /**/ });
        }catch(err){
            console.log(err);
        }
        delete notificationsByID[ notifId ]; // Cleanup
    } else if (btnIdx === 1) {
        console.log('clearing')
        chrome.notifications.clear(myNotificationID);
        delete notificationsByID[ notifId ]; // Cleanup
    }
});

chrome.notifications.onClosed.addListener((notifId) => {
    if (notificationsByID[ notifId ]) { delete notificationsByID[ notifId ]; }
});

const displayNotification=(userEmail, password, website,username) =>{
    chrome.notifications.create("", {
        type:    "basic",
        iconUrl: "./icon128.png",
        title:   "PERMISSION",
        requireInteraction: true,
        message: "question",
        buttons: [{ title: "YES", }, { title: "NO", }]
    }, function(id) {
        // Insertion
        notificationsByID[ id ] = { userEmail, password, website,username };
    })
}

Chrome 扩展 - 通知上的按钮侦听器执行多次

Chrome extension - button listener on notification executes multiple times

javascript

google-chrome

google-chrome-extension