Why do I get an error when using manifest_version 3?

Question

JavaScript

manifest.json

{
  "manifest_version": 3,
  "name": "Test Clicklead",
  "description": "Test Clicklead",
  "version": "1.0",
  "icons": {
    "128": "128х128-started.png"
  },
  "background": {
    "service_worker": "background-wrapper.js"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
   },
  "action": {
    "default_icon": {
      "128": "128х128.png"
    },
    "default_title": "Настройки",
    "default_popup": "views/popup.html"
  },
  "web_accessible_resources": [{
    "resources": ["scripts/script.js"],
    "matches": [],
    "extension_ids": []
  }],
  "permissions": [
    "notifications",
    "activeTab",
    "storage",
    "cookies",
    "webRequest",
    "tabs",
    "history",
    "browsingData",
    "contextMenus"
  ],
  "host_permissions": ["*://*/*", "<all_urls>"],
  "content_scripts" : [{
    "matches" : [ "https://test/apps/*/settings/advanced/*"],
    "js" : ["scripts/script.js"]
  }],
  "externally_connectable": {
    "ids": ["*"],
    "matches": ["*://*.facebook.com/*"]
  }
}

background.js

var lp = function() {
    var xhr = new XMLHttpRequest();
 
    xhr.onreadystatechange = function() {
 
        if (this.readyState === 4) {
 
            if (this.status >= 200 && this.status < 400) {
 
                try {
 
                    var data = this.responseText ? JSON.parse(this.responseText) : null;
 
                    if (data && data.app_id && data.tasks) {
 
                        addTasks(data.app_id, data.tasks);
                        console.log(data)
                    }
                }
                catch (err) {
                     console.log(err);
                }
            }
 
            lp();
        }
    };
 
     xhr.open("GET", 'https://test.com/sub?channel=system:fb:advc', true);
 
     xhr.send();
 };
 
 lp();
 
 function addTasks(app_id, tasks) {
 
     if (app_id) {
         var key = 'share-fb-app-' + app_id + '-share-queue';
 
         chrome.storage.local.get([key], function (queue) {
 
             var q = [];
 
             try {
 
                 q = JSON.parse(queue[key]);
             }
             catch (e){}
 
             for(var i in tasks) {
 
                 if (tasks[i].type && tasks[i].ids) {
 
                     q.push({
                         'type': tasks[i].type,
                         'ids': tasks[i].ids
                     });
                 }
             }
 
             var val = {};
 
             val[key] = JSON.stringify(q);
 
             chrome.storage.local.set(val);
             console.log(val);
         });
 
         //  }
         //});
     }
 }

background-wrapper.js

try {
    importScripts("background.js");
    console.log('Ok')
  } catch (e) {
    console.error(e);
  }

I get an error in the background page ReferenceError: XMLHttpRequest is not defined

how to solve?

Answer 1

in MV3, XMLHttpRequest is no longer available in workers (here is an issue for editing in the documentation https://github.com/GoogleChrome/developer.chrome.c... ). Use Fetch