Error ReferenceError: XMLHttpRequest is not defined in manifest version 3

[Pranjali Bidwai]

I am getting an error "Uncaught (in promise) Error: Could not establish a connection. Receiving end does not exist." How can I change with respect to manifest version 3?
Kindly help to find the solution. Thank you.



    // http request promise wrapper
    function HttpRequest(url) {
    return new Promise(function(resolve, reject) {

        var badgeText = new String();
        var badgeColor = new String();
        chrome.action.getBadgeText({}, function(result) {badgeText = result;});
        chrome.action.getBadgeBackgroundColor({}, function(result) {badgeColor = result;});
        chrome.action.setBadgeText({text: 'R'});
        chrome.action.setBadgeBackgroundColor({color: '#3070c0'});

        var req = new XMLHttpRequest();
        req.open('GET', url, true);
        req.timeout = 5000;
 
        req.onload = function() {
            chrome.action.setBadgeText({text: badgeText});
            chrome.action.setBadgeBackgroundColor({color: badgeColor});
            if (req.status == 200) {
                resolve(req.response);
            }
            else {
                reject(Error(req.statusText));
            }
        };
 
        req.onerror = function() {
            chrome.action.setBadgeText({text: badgeText});
            chrome.action.setBadgeBackgroundColor({color: badgeColor});
            reject(Error("Unspecified Network Error"));
        };
 
        req.ontimeout = function() {
            chrome.action.setBadgeText({text: badgeText});
            chrome.action.setBadgeBackgroundColor({color: badgeColor});
            reject(Error("Timeout Error"));
        };

        req.send();

        });
        }

        // check connection
        function checkConnection() {
            if (fxSim == false) {  
        return new Promise((resolve, reject) => {
            HttpRequest('http://' + this.fxIP + '/deviceinfo').then(function(response) {
                chrome.action.setBadgeText({text: 'On'});
                chrome.action.setBadgeBackgroundColor({color: '#70c070'});
                resolve(response);
            }).catch(function(error) {
                chrome.action.setBadgeText({text: '-'});
                chrome.action.setBadgeBackgroundColor({color: '#707070'});
                reject(error.toString());
            });
                });
            }
            else {
                return new Promise((resolve, reject) => {
                    resolve('OK');
                });
            }
        };

        // retrieve report
        function retrieveReport(serialNumber) {
            return new Promise((resolve, reject) => {
                retrieveReports().then(response => {
                    var matchedReports = [];
            try {
                var reports = JSON.parse(response);
            }
            catch (e) {
                reject(e.message);
            }
            reports.forEach(function(report) {
                if (report.snapshot.tags[fxSNTag].v === serialNumber) {
                    matchedReports.push(report);
                }
            });
            if (matchedReports.length === 0) {
                reject('S/N not found')
            }
            else {
                resolve(JSON.stringify(matchedReports));
            }
                }).catch(error => {
                    reject(error.toString());
                });
            });
        }

        function retrieveReports() {
            if (fxSim == false) {
        return new Promise((resolve, reject) => {

            let url = 'http://' + this.fxIP + '/snapshots' +
            '?archive=' + this.fxArchive +
            '&count=' + this.fxLogs +
            '&ascending=0' +
            '&type=jsonstream';

            HttpRequest(url).then(function(response) {
                resolve(response);
            }).catch(function(error) {
                reject(error.toString());
            });
                });
            }
            else {
                return new Promise((resolve, reject) => {

                    let url = chrome.runtime.getURL("simulation.json");

                    HttpRequest(url).then(function(response) {
                resolve(response);
            }).catch(function(error) {
                reject(error.toString());
            });
               });        
            }
        }

        // set alarm to check connection periodically (1 min)
        function setSimMode() {
            if (this.fxSim == false) {
                chrome.alarms.create('connectionPolling', {periodInMinutes: 1});
                checkConnection().then(function(response) {
        }).catch(function(error) {
            console.log(error);
        });
        chrome.runtime.sendMessage({simMode: false});
            }
            else {
                 chrome.alarms.clear('connectionPolling');
                 chrome.action.setBadgeText({text: 'S'});
                 chrome.action.setBadgeBackgroundColor({color: '#701070'});
                 chrome.runtime.sendMessage({simMode: true});
            }
        }

        chrome.alarms.onAlarm.addListener(function(alarm) {
            if (alarm.name === 'connectionPolling') {
                checkConnection().then(function(response) {
        }).catch(function(error) {
            console.log(error);
        });
            }
        });

[Robbi]

With manifest V3 you can use  XMLHttpRequest in your extension pages but not in service worker.

In SW you'll have to use fetch.

[Pranjali Bidwai]

Can you give me an example or some hints on how can I change this part in the above code? 

Kind regards,

Pranjali 

[Benjamin Bruneau]

You can change your `XMLHttpRequest` to a `fetch` call instead. If you have many such requests, you could try using a shim to handle them all at once, but it's probably advisable as a best practice to make use of the fetch API directly.

[Benjamin Bruneau]

Sorry, this isn’t enough information to debug. If you’re getting a “failed to fetch” error, then there are many possibilities:

* The url is bad

* The protocol is mixed

* Some issue with CORS

* Missing or wrong headers

You’ll have to debug for yourself, but there are many articles and resources about fetch and CORS available online.

Best,

B

Benjamin Bruneau

Senior Developer, Browser Experience

benjamin...@1password.com

More than 100,000 businesses trust 1Password to secure their most important information. Try it free.

--
You received this message because you are subscribed to a topic in the Google Groups "Chromium Extensions" group.
To unsubscribe from this topic, visit https://groups.google.com/a/chromium.org/d/topic/chromium-extensions/1v9HDJqZbdA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/6569c863-7fe9-45f2-a0b7-8d80dc243fc4n%40chromium.org.