contextMenus.create - manifest V3

[Eric T.]

I am currently in the process of converting my AddOn from Manifet'st V2 to V3.
Unfortunately, my context menu entry is missing and I've been searching the net for ages - but I can't find my error.

Does anyone have an idea why the context menu entry is not being created for me?

Manifest:

{
  "manifest_version": 3,
  "key": "",
 
  "name": "__MSG_appName__",
  "short_name": "__MSG_appShortName__",
  "description": "__MSG_appDesc__",
  "default_locale": "de",
 
  "version": "1.61",

  "background.service_worker": {"scripts": "background.js"},
 
  "permissions": ["tabs", "contextMenus", "storage"],
 
  "options_page": "options.html",
 
  "icons": {"16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png"},
 
  "action": {"default_icon": "icon_128.png",
 "default_title": "SiteBar Client",
 "default_popup": "popup.html"}
}

background.js

//Im Fall einer Neuinstallation initiale Optionswerte setzen
chrome.runtime.onInstalled.addListener(function(details) {
  //if (details.reason == "install" || details.reason =="update" ) {
  if (details.reason == "install") {

chrome.storage.sync.get('SiteBarSyncronisieren', function(val) {
if (val['SiteBarSyncronisieren']=="1") {
    chrome.storage.sync.get('SiteBarURL', function(val) {localStorage.SiteBarURL = val['SiteBarURL'];});
    chrome.storage.sync.get('SiteBarWidth', function(val) {localStorage.SiteBarWidth = val['SiteBarWidth'];});
chrome.storage.sync.get('SiteBarHeight', function(val) {localStorage.SiteBarHeight = val['SiteBarHeight'];});
chrome.storage.sync.get('SiteBarUser', function(val) {localStorage.SiteBarUser = val['SiteBarUser'];});
chrome.storage.sync.get('SiteBarPassword', function(val) {localStorage.SiteBarPassword = val['SiteBarPassword'];});
chrome.storage.sync.get('SiteBarSyncronisieren', function(val) {localStorage.SiteBarSyncronisieren = "1";});
   }
else {
  localStorage.SiteBarURL= "http://my.sitebar.org";
  localStorage.SiteBarWidth= "800";
  localStorage.SiteBarHeight= "600";
  localStorage.SiteBarUser = "";
  localStorage.SiteBarPassword= "";
  localStorage.SiteBarSyncronisieren = "0";
 };
}
);
 
  };
     }
   );

//Contextmenü Eintrag anlegen
chrome.contextMenus.removeAll();
chrome.contextMenus.create({
"title": chrome.i18n.getMessage("Contextmenu"),
"id": "AddSitebar",
"contexts": ['all']
});

function contextClick(info, tab) {
  const { menuItemId } = info

  if (menuItemId === 'AddSitebar') {
popup();
  }
};

chrome.contextMenus.onClicked.addListener(contextClick);

//Bei Start einmal Login in background.html Iframe laden damit Cookie gesetzt wird
chrome.runtime.onStartup.addListener(function() {
var url=localStorage.SiteBarURL +"/command.php?command=Log%20In";
var ifrm=document.getElementById("SiteBarFrame");
ifrm.setAttribute("src", url);
});

function popup() {

chrome.tabs.getSelected(chrome.windows.WINDOW_ID_CURRENT, function(tab) {

var target=tab.url;
var url=localStorage.SiteBarURL;
    url = url + "/command.php?command=Add%20Link&url=" + escape(target);

var w = 400;
    var h = 500;
    var l = (screen.width/2)-(w/2);
    var t= (screen.height/2)-(h/2);

chrome.windows.create({url: url,
   type: "popup",
   width: w,
   height: h,
   top: t,
   left: l
   }
 );
 
});

};

[wOxxOm]

There are several problems.

1. You're using `localStorage`, which is not available in a service worker. You can probably use chrome.storage everywhere instead. It's asynchronous, so in some cases you'll have to preload the data at the start of script (example), e.g. a synchronous use is required inside a DOM listener in a visible page to make a decision to call event.preventDefault().
2. You're using DOM which isn't available in a service worker. Use the offscreen document instead and messaging to pass the results.
   
3. You're using `screen`, which is not available in a service worker. Either use the offscreen document or chrome.system.display.getInfo + "system.display" in "permissions".
4. You are updating chrome.contextMenus outside of chrome.runtime.onInstalled so it happens every time the background script wakes up, i.e. it can happen 100 times a day

You could have seen these issues yourself if the background script was a normal page as it was in ManifestV2, but in ManifestV3 it's a service worker and it doesn't support debugging of errors that occur during the initial registration. I vaguely remember debugging experience that bad was around 1990 when I learned programming. To debug these kind of issues you'll have to put the entire code in try {...............} catch (err) { console.log(err) }, although even that won't help with errors in import statements like the wrong paths (luckily you don't use this feature). This problem hasn't been fixed in 10+ years of service workers being increasingly popular, but one can hope it'll be prioritized now that more and more extension developers are forced to suffer due to ManifestV3's use of service workers.