0

I have programmed an Chrome Extension with Manifest Version 3, and it works very well in chrome with no problems. I use Firebase Cloud Messaging API V1 to get messages from my server to clients. However the problem is that when i use the extensions in MS Edge it pops up with the default notification as well as my custom one in the push event.

So my question is how do i get it to work in edge without it sending the "This site has been updated in the background" and my custom one at the same time. Rather i want only my custom notification to be shown.

I have tried doing research online as to how i can resolve the issue, however that does not seem to be much information on the web directly related to ms edge and only chrome instead.

manifest.json:

{
    "name": "Staines Memorial College Notifications",
    "version": "1.0.1",
    "description": "Recieve notifications for Staines Memorial College and the Diary App.",
    "manifest_version": 3,
    "author": "Braydan Mengel - Staines Memorial College",
    "action": {
        "default_popup": "Ext_Status.html",
        "default_title": "Staines Memorial College Notifications Extension"
    },
    "permissions": [
        "notifications",
        "background",
        "storage"
    ],
    "background": {
        "service_worker": "background.js",
        "type": "module"
    },
    "icons": {
        "48": "Images/ExtensionIcon48.png",
        "128": "Images/ExtensionIcon128.png"
    }
}

background.js:

import { getMessaging } from "./firebase/firebase-messaging-sw.js";
import { getToken } from "./firebase/firebase-messaging.js";
import { initializeApp } from "./firebase/firebase-app.js";

//init firebase
initializeApp({
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
});

//global variables
var UserID;

//chrome local storage
chrome.storage.local.get(["userData"]).then((result) => {
    if (result.userData === undefined) {
        chrome.tabs.create({ url: chrome.runtime.getURL("Ext_Login.html") });
    } else {
        UserID = result.userData.uuid;
        setTimeout(() => {
            RegTopic();
        }, 1000)
    }
});

async function RegTopic() {
    //get the gcm device token and send it to the server
    const token = await getToken(getMessaging(), {
        serviceWorkerRegistration: self.registration
    });

    const details = {
        "userid": UserID,
        "token": token
    };

    fetch("https://example.com/ins/tokens/fcm/regToken", {
        method: "POST",
        headers: {
            "Content-Type": "application/json; charset=UTF-8"
        },
        body: JSON.stringify(details)
    })
        .then(response => response.json())
        .then(data => {
            if (data.message === 'Registered') {
                console.log('Registered token successfully!');
            }
        })
        .catch(error => {
            setTimeout(() => {
                RegTopic();
            }, 5000)
            console.error("Error:", error);
        });
}

//when a message is received
self.addEventListener('push', function (event) {
    const Message = event.data.json();

    if (Message.data.link === "NONE") {
        // No link found
        if (Message.data.priority === "0") {
            // Priority is set to 0 meaning Normal
            const showNotification = self.registration.showNotification(`Staines Notifications - ${Message.data.title}`, {
                icon: "../Images/Notify.png",
                body: Message.data.body,
                requireInteraction: false,
                data: {
                    notificationid: Message.data.notificationid,
                    linkOpening: Message.data.link
                }
            });

            event.waitUntil(showNotification);
        } else if (Message.priority === "1") {
            // Priority is set to 1 meaning Important
            const showNotification = self.registration.showNotification(`Staines Notifications - ${Message.data.title}`, {
                icon: "../Images/Notify.png",
                body: Message.data.body,
                requireInteraction: true,
                data: {
                    notificationid: Message.data.notificationid,
                    linkOpening: Message.data.link
                }
            });

            event.waitUntil(showNotification);
        }
    } else {
        // Link is included; priority is set to 1 meaning Important by default
        const showNotification = self.registration.showNotification(`Staines Notifications - ${Message.data.title}`, {
            icon: "../Images/Notify.png",
            body: Message.data.body,
            requireInteraction: true,
            data: {
                notificationid: Message.data.notificationid,
                linkOpening: Message.data.link
            }
        });

        event.waitUntil(showNotification);
    }
});

//Login message handler
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'login') {
        UserID = message.data.userid;
        const response = { status: 'success' };
        sendResponse(response);

        RegTopic();
    }
});

// Notification handlers
self.addEventListener('notificationclick', function (event) {
    const clickedNotification = event.notification;
    const linkOpening = clickedNotification.data.linkOpening;

    if (linkOpening !== 'NONE') {
        event.waitUntil(
            clients.openWindow(linkOpening)
        );
    }
});

self.addEventListener('notificationclose', function (event) {
    const clickedNotification = event.notification;
    const linkOpening = clickedNotification.data.linkOpening;

    if (linkOpening !== 'NONE') {
        event.waitUntil(
            clients.openWindow(linkOpening)
        );
    }
});

Note that i use version 9.0.0 of firebase-app.js, firebase-messaging.js, and firebase-messaging-sw.js. These files are packaged with the extension.

Here is the directory tree if you need it: file tree source

Braydan
  • 25
  • 6
  • I'm not able to reproduce the issue because it looks like those HTML files are missing from your example. It would be better if you could provide a minimal code example for us to reproduce this issue. – Kendrick Li Aug 22 '23 at 07:43
  • The HTML files should not be needed. All i really need is a way to receive push notifications with the push event and send them via self.registration.showNotification. This works in chrome just fine, however edge sends both the custom notification and the default "This site has been updated in the background". So how do get rid of the default notification in edge and just send my custom one? – Braydan Aug 23 '23 at 04:32
  • May I know whether there's any error message in Edge DevTools console? – Kendrick Li Aug 29 '23 at 07:23
  • No there's no error message in the edge or chrome dev console what so ever. – Braydan Aug 30 '23 at 09:13

0 Answers0