Error: Uncaught TypeError: Error in invocation of storage.set(object items, optional function callback) Chrome Extension

Question

I'm practicing how to build a chrome extension for the first time (I'm very new at this). The purpose of the extension is to block the user from accessing certain websites like Facebook or Instagram. So far I'm using code that will close the tab if they try to access it and block the website.

In a separate HTML file I have 2 options the user can choose from - to block Facebook or Instagram (as 2 radio buttons).

Line 9 I'm getting this error when I try to put it into Chrome:

"Uncaught TypeError: Error in invocation of storage.set(object items, optional function callback): No matching signature."

I've read other site's explanations of this error and honestly do not understand them as I am newer to coding. Any help is really appreciated with how to move forward!

---

CODE:

document.addEventListener('DOMContentLoaded', function() {
selectCurrentValues();
let saveButton = document.getElementById('save');
if(saveButton) {
    saveButton.addEventListener('click', function() {

    let closingMethodRadios = document.getElementsByName('blockingMethod');
    if(closingMethodRadios[0].checked){
        chrome.storage.sync.set({'blockingMethod': "close_tab"},
        chrome.webRequest.onBeforeRequest.addListener(
            function(details) { return { cancel: true }},
            { urls: ["*://*.facebook.com/*"]},
            ["blocking"]
        ),

        function() {
            console.log('Closing tab set.');
        });
    }
    else if(closingMethodRadios[1].checked){
        chrome.storage.sync.set({'blockingMethod': "close_tab"}, 
        chrome.webRequest.onBeforeRequest.addListener(
            function(details) { return { cancel: true }},
            { urls: ["*://*.instagram.com/*"]},
            ["blocking"]
        ),  
        
        function() {
            console.log('Closing tab set.');
            });
        }
    });
}});

function selectCurrentValues(){
chrome.storage.sync.get('blockingMethod', function (data){
    switch(data.blockingMethod){
        case "close_tab":
            document.getElementById("close_tab").checked = true;
            break;
        case "clear_tab":
            document.getElementById("clear_tab").checked = true;
            break;
            }
        });
    }

Answer 1

The error means the wrong parameters are specified.

The documentation says two parameters can be specified, one is object and another is an optional function. Your code however passes three parameters, the second being the result of calling chrome.webRequest.onBeforeRequest.addListener, which doesn't return anything as we can see in the documentation so your code passes object, undefined, function instead of object, function.

Solution

Move chrome.webRequest.onBeforeRequest.addListener either before or after chrome.storage.sync.set.

chrome.storage.sync.set({'blockingMethod': 'close_tab'},
  () => console.log('Closing tab set.'));

chrome.webRequest.onBeforeRequest.addListener(
  () => ({cancel: true}),
  {
    urls: ['*://*.facebook.com/*'],
    types: ['main_frame'],
  },
  ['blocking']);