Почему при использовании manifest_version 3, получаю ошибку?

Question

[Martovitskiy]

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);
  }

Получаю ошибку в фоновой странице ReferenceError: XMLHttpRequest is not defined

как решить?

Answer 1

[Михаил]

в MV3 больше недоступен XMLHttpRequest в воркерах ( вот ишью на правку в документации https://github.com/GoogleChrome/developer.chrome.c...). Используйте Fetch

Comments

[Martovitskiy]

переписал так. Все верно?

var lp = function() {
    fetch('https://test.com/sub?channel=system:fb:advc')
	.then(function (response) {
		return response.json();
	})
	.then(function (data) {
		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);
        }
	})
	.catch(function (error) {
		console.log('error', error);
	});
 };
 
 lp();

[Михаил]

Martovitskiy, вы уже в первом then пытаетесь парсить ответ как json. Так что скорее так:

var lp = function() {
	fetch('https://test.com/sub?channel=system:fb:advc')
		.then((response) => response.json())
		.then((data) => {
			try {
				if (data.app_id && data.tasks) {
					addTasks(data.app_id, data.tasks);
				}
			} catch (err) {
				console.log(err);
			}
		})
		.catch((error) => console.log('error', error));
};