Description

When loading a prod mv3 build, we observed that a majority of the time, the offscreen document would not be created. In those case, we saw the following error in the service worker console:

runtime-lavamoat.js:13190
Uncaught Error: LavaMoat - property "chrome" of globalThis is inaccessible under scuttling mode. To learn more visit https://github.com/LavaMoat/LavaMoat/pull/360.
  at Object.get (runtime-lavamoat.js:13190:11)
  at app-init.js:1:1766
get	@	runtime-lavamoat.js:13190
(anonymous)	@	app-init.js:1

Which comes from this code in app-init.js:

async function createOffscreen() {
  if (await chrome.offscreen.hasDocument()) {
    return;
  }

  await chrome.offscreen.createDocument({
    url: './offscreen.html',
    reasons: ['IFRAME_SCRIPTING'],
    justification:
      'Used for Hardware Wallet and Snaps scripts to communicate with the extension.',
  });

  console.debug('Offscreen iframe loaded');
}

The solution is to cache a version of chrome before it has been scuttled.

Related issues

Fixes:

Manual testing steps

1. yarn dist:mv3
2. Install at chrome://extensions
3. A second or so after the service worker is created, the offscreen document should be created.
4. Reload the extension 10 times, the offscreen document should be created every time

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.