workaround for chrome notifications manifest 3 - google-chrome

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>