Loading Chrome Extensions in Electron: Accessing Laya Objects Inside Iframes

How to Integrate

Recently I worked on loading a Google Chrome extension inside an Electron application and documented the development and troubleshooting steps.

Project Background

Electron loads an online index.html.

The index.html embeds a Laya page via an iframe using the file:// protocol.

Loading the Extension

The core code relies on session.defaultSession.loadExtension, an Electron API for dynamically loading Chrome extensions (e.g., React DevTools, Redux DevTools) or custom plugins.

// Load LayaTree extension
async function loadLayaTreeExtension() {
  try {
    const extensionPath = path.join(__dirname, 'extensions', 'LayaTree');
    if (fs.existsSync(extensionPath)) {
      console.log('Loading LayaTree extension from:', extensionPath);
      const extension = await session.defaultSession.loadExtension(extensionPath, {
        allowFileAccess: true
      });
      console.log('LayaTree extension loaded successfully:', extension.name);
      return extension;
    } else {
      console.warn('LayaTree extension directory not found at:', extensionPath);
      return null;
    }
  } catch (error) {
    console.error('Failed to load LayaTree extension:', error);
    return null;
  }
}

Parameters:

extensionPath : Path to the unpacked Chrome extension folder.

Returns a Promise that resolves to an object containing the extension’s details (id, name, version, …).

Electron cannot load a .crx package directly; it must be unpacked first:

unzip react-devtools.crx -d ./extensions/react-devtools

loadExtension

can only be used in the main process.

Cross‑Origin Issue

The main problem was that the Laya object lives inside the iframe, not the top‑level page, so the extension could not read it.

How can the plugin read the Laya object inside the iframe?

Attempts to expose the object via postMessage failed because many Laya properties are non‑serializable. Accessing contentWindow was blocked by Chromium’s site‑isolation security model, which isolates different origins into separate renderer processes.

Site Isolation, introduced in Chromium in 2018, prevents shared rendering processes across sites to mitigate Spectre attacks.

Chrome runs pages from different sites in separate processes.

Even iframes from another origin are placed in their own process.

This results in physical isolation of JS engines and memory.

To bypass the isolation for Electron, the following switch was added:

app.commandLine.appendSwitch('disable-site-isolation-trials');

mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  plugins: true,
  webPreferences: {
    webSecurity: false,
  },
  icon: path.join(__dirname, 'icon.png'),
  show: true
});

After disabling site isolation, the iframe became accessible, but the switch caused compatibility issues with the extension, so the final solution reverted to using a file:// origin for the plugin.

The LayaTree plugin originally reads window.Laya only from the top window. The source was patched to also check visible iframes:

if (!window.Laya) {
  function isElementVisible(el) {
    if (!el) return false;
    const style = window.getComputedStyle(el);
    return style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0' && el.offsetParent !== null;
  }
  function getVisibleLayaIframes() {
    const iframes = Array.from(document.querySelectorAll('iframe'));
    return iframes.filter(iframe => {
      if (!isElementVisible(iframe)) return false;
      try {
        return !!iframe.contentWindow && !!iframe.contentWindow.Laya;
      } catch (e) {
        return false;
      }
    });
  }
  window.Laya = getVisibleLayaIframes().contentWindow.Laya;
}

After these changes, the extension successfully accessed the Laya instance inside the iframe.

Summary

Cross‑origin restrictions are hard to bypass : Disabling site isolation may introduce plugin compatibility problems.

Electron debugging of extensions is poor : Background scripts and popup pages cannot be directly debugged.

Plugin source may need modification : LayaTree only reads the top‑level window; custom code is required for iframe scenarios.

Key takeaways for Electron:

Use session.defaultSession.loadExtension with allowFileAccess when loading extensions from file:// URLs.

Remove the disable-site-isolation-trials switch to avoid compatibility issues.

Chrome extensions can define a devtools_page for custom devtools panels; LayaTree needs adaptation to read Laya objects from iframes.

Problem solving relied heavily on elimination: testing with a fresh project showed that Electron 25 and earlier support Chrome extension V2, while the original project’s special code caused the failures.