workaround for chrome notifications manifest 3

Question

I want to display the notifications using manifest 3, Is there a workaround thats possible than waiting for chrome 91?

As a fix I used data URI, but that doesnt work

chrome.notifications.create(
    "1", {
    iconUrl: "data:image/png;base64,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",
    title: "This should be a notification",
    type: "basic",
    message: "Notification body",
    isClickable: true,
    priority: 2,
},
    function () { }
);

Answer 1

You could create a tiny library that do some similar to chrome.notification. I had done something similar for progress notifications which Firefox (did|do) not support. I hope this code inspires you. However, I suggest you wait for MV3 to be a little more "mature"

JS:

function myNotif(id, title, body, zIdx, evnt) {
    let divL1 = document.createElement("div");
    divL1.id = 'myNotif_' + id;
    divL1.className = 'myNotifClass';
        //X per chiudere
        let divL2 = document.createElement("div");
        divL2.className = 'myNotifClass_X';
        divL2.innerHTML = '<SVG WIDTH="10" HEIGHT="10" viewBox="0 0 20 20"><path stroke-width="3" stroke="black" class="checkmark__check" fill="none" d="M0 0 20 20 M20 0 0 20" /></SVG>';
        if (evnt) {
            if (evnt._onClose)
                divL2.addEventListener('click', function() { evnt._onClose(); document.body.removeChild(this.parentNode) })
            else
                divL2.addEventListener('click', function() { document.body.removeChild(this.parentNode) })
        }
    divL1.appendChild(divL2);
        //TITOLO
        divL2 = document.createElement("div");
        divL2.className = 'myNotifClass_title';
        divL2.textContent = title;
    divL1.appendChild(divL2);
        //img & body
        divL2 = document.createElement("div");
        divL2.className = 'myNotifClass_img_body';
            //img
            let divL3 = document.createElement("div");
            divL3.className = 'myNotifClass_img';
        divL2.appendChild(divL3);
            //body
            divL3 = document.createElement("div");
            divL3.className = 'myNotifClass_body';
                let divL4 = document.createElement("div");
                divL4.className = 'myNotifClass_bodyUp';
                    let divL5 = document.createElement("div");
                    divL5.id = 'myNotif_' + id + '_bodyUp_CT';
                    divL5.className = 'myNotifClass_bodyUp_CT';
                    divL5.innerHTML = body;
                divL4.appendChild(divL5);
            divL3.appendChild(divL4);
                divL4 = document.createElement("div");
                divL4.className = 'myNotifClass_bodyDown';
                    divL5 = document.createElement("progress");
                    divL5.id = 'myNotif_' + id + '_Progress';
                    divL5.value = 0;
                    divL5.max = 100;
                divL4.appendChild(divL5);
            divL3.appendChild(divL4);
        divL2.appendChild(divL3);
    divL1.appendChild(divL2);
    divL1.style.zIndex = zIdx;
    if (evnt)
        if (evnt._onClick)
            divL2.addEventListener('click', function() { evnt._onClick() });
    document.body.appendChild(divL1)
}

CSS:

progress {
    margin:3px 4px;
    width:230px;
    height:6px;
    border-radius:2px
}
progress::-moz-progress-bar {  
    background-color:#1e90ff;
    border-radius:2px
}
.myNotifClass {
    font-family:Verdana, Calibri;
    position:fixed;
    bottom:8px;
    right:9px;
    width:351px;
    height:115px;
    background-color:white;
    border:1px solid gray;
    box-shadow:1px 1px darkgray;
    color:black;
}
.myNotifClass .myNotifClass_X {
    position:relative;
    float:right;
    top:5px;
    right:8px
}
.myNotifClass .myNotifClass_title {
    font-size:12px;
    font-weight:bold;
    position:relative;
    top:7px;
    left:8px;
    width:316px;
    height:14px;
    background-color:inherit;
    border:0px;
    padding:2px;
    overflow:hidden
}
.myNotifClass .myNotifClass_img_body {
    font-size:12px;
    position:relative;
    left:8px;
    top:7px;
    bottom:8px;
    width:320px;
    height:80px;
    background-color:inherit;
    border:0px;
    padding:0px
}
.myNotifClass .myNotifClass_img_body .myNotifClass_img {
    position:inherit;
    float:left;
    left:0px;
    top:0px;
    height:100%;
    width:80px;
    background-image:url('./wait.png');
    background-position:center;
    background-size:auto;
    background-repeat:no-repeat;
    background-color:inherit;
    margin:0
}
.myNotifClass .myNotifClass_img_body .myNotifClass_body {
    position:inherit;
    float:right;
    right:0px;
    height:100%;
    width:240px;
    background-color:inherit;
    margin:0
}
.myNotifClass .myNotifClass_img_body .myNotifClass_body .myNotifClass_bodyUp{
    font-size:11px;
    height:53px;
    line-height:130%;
    width: 236px;   /*calc(100%-4px);*/
    background-color:inherit;
    padding:5px 2px 5px 2px;
    overflow:hidden;
    display:table
}
.myNotifClass .myNotifClass_img_body .myNotifClass_body .myNotifClass_bodyUp .myNotifClass_bodyUp_CT {
    display:table-cell;
    height:100%;
    vertical-align:middle
}
.myNotifClass .myNotifClass_img_body .myNotifClass_body .myNotifClass_bodyDown{
    height:17px;
    width:100%;
    background-color:inherit
}

HTML:

<HTML>
    <HEAD>
        <LINK TYPE="text/css" REL="stylesheet" HREF="./provaNotifDIV.css">
        <SCRIPT SRC="./provaNotifDIV.js"></SCRIPT>
        <SCRIPT LANGUAGE="JavaScript">
            function startProgress() {
                var timer = setInterval(    function() {
                                                let x = document.getElementById('myNotif_1_Progress');
                                                if (x.value >= 100) {
                                                    clearTimeout(timer);
                                                    document.getElementById('myNotif_1_bodyUp_CT').textContent = "FATTO!"
                                                }
                                                else {
                                                    x.value += 1;
                                                    document.getElementById('num').textContent = x.value
                                                }
                                            }, 12)
            }
            document.addEventListener('DOMContentLoaded',   function() {
                                                                myNotif(1, 'Trasferimento Indicatori in corso...', '<SPAN ID="num">0</SPAN> su <SPAN ID="denom">100</SPAN> caricati', 100, {'_onClick': function() { alert('click') }, '_onClose': function() {alert('close')} });
                                                                startProgress()
            })
        </SCRIPT>
    </HEAD>
    <BODY>
Ciao
    </BODY>
</HTML>