'Trouble creating chrome notification using the chrome chrome.notifications api

I want to create a simple extension that when a user enters some number (representing minutes) a notification will popup saying that the alarm has been set (the alarm itself is a different beast I will tackle after I resolve this issue)

My code looks like this:

manifest.json:

{
    "manifest_version": 3,
    "name": "Blink Reminder",
    "version": "1.0.0",
    "description": "Reminds you to blink your eyes",
    "icons": {
        "128": "Blinker128.png",
        "48": "Blinker48.png",
        "16": "Blinker16.png"
    },
    "permissions": [
        "storage",
        "alarms",
        "notifications"
    ],
    "action": {
        "default_icon": "Blinker128.png",
        "default_popup": "popup.html"
    }
}

popup.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style src="style.css"></style>
    <script src="popup.js" defer></script>

    <title>Blink Reminder</title>
</head>
<body>
    <h2>Blink Reminder</h2>
    <img src="Blinker128.png" alt="Blink Reminder">
    <div>
        <label for="time_set">Set Reminder Period: </label>
        <input type="text" id="time_set" name="time_set"><br><br>
        <button id="btn">Submit</button>
    </div>
    <div>
        <p>Time remining: <span id="time_remaining">0 minutes</span></p>
        <p id="tester">testing</p>
    </div>
</body>
</html>

popup.js:

var btn = document.getElementById('btn');
var time_set = document.getElementById('time_set');
var time_remaining = document.getElementById('time_remaining');

btn.addEventListener("click",function(){
    if(time_set.value > 0){
        time_remaining.innerHTML = time_set.value + " minutes";
    }else{
        time_remaining.innerHTML = "0 minutes";
    }
    notifiy();

});

function notifiy(){
    alert("Alarm set for " + time_set.value + " minutes");
    chrome.notifications.create(
        {
            title: 'Alarm Set',
            message: 'Alarm set for ' + time_set.value + ' minutes',
            iconUrl: 'Blinker128.png',
            type: 'basic'
        }
    )
    document.getElementById('tester').innerHTML = "notif should be set";
}

For some reason this part works:

alert("Alarm set for " + time_set.value + " minutes");

also this part works too:

document.getElementById('tester').innerHTML = "notif should be set";

works this part doesn't seem to do anything and non errors arise:

chrome.notifications.create(
    {
        title: 'Alarm Set',
        message: 'Alarm set for ' + time_set.value + ' minutes',
        iconUrl: 'Blinker128.png',
        type: 'basic'
    }
)

Any suggestions?

Thanks

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Trouble creating chrome notification using the chrome chrome.notifications api

Sources

Related Questions