fix: crx protocol requests from remote sessions

Author: samuelmaddock

packages/electron-chrome-extensions/README.md

@@ -280,6 +280,22 @@ Add the `<browser-action-list>` element with attributes appropriate for your app
 <browser-action-list alignment="top right"></browser-action-list>
 ```
 
+##### Main process
+
+For extension icons to appear in the list, the `crx://` protocol needs to be handled in the Session
+where it's intended to be displayed.
+
+```js
+import { app, session } from 'electron'
+import { ElectronChromeExtensions } from 'electron-chrome-extensions'
+
+app.whenReady().then(() => {
+  // Provide the session where your app will display <browser-action-list>
+  const appSession = session.defaultSession
+  ElectronChromeExtensions.handleCRXProtocol(appSession)
+})
+```
+
 ##### Custom CSS
 
 The `<browser-action-list>` element is a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components). Its styles are encapsulated within a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). However, it's still possible to customize its appearance using the [CSS shadow parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) selector `::part(name)`.

packages/electron-chrome-extensions/spec/chrome-browserAction-spec.ts

@@ -6,7 +6,7 @@ import { emittedOnce } from './events-helpers'
 import { uuid } from './spec-helpers'
 import { useExtensionBrowser, useServer } from './hooks'
 import { createCrxRemoteWindow } from './crx-helpers'
-import { once } from 'node:events'
+import { ElectronChromeExtensions } from '../'
 
 describe('chrome.browserAction', () => {
   const server = useServer()
@@ -237,9 +237,39 @@ describe('chrome.browserAction', () => {
       extensionName: 'chrome-browserAction-popup',
     })
 
+    it('supports same-session requests', async () => {
+      ElectronChromeExtensions.handleCRXProtocol(browser.session)
+
+      // Load again now that crx protocol is handled
+      await browser.webContents.loadURL(server.getUrl())
+
+      const result = await browser.webContents.executeJavaScript(
+        `(${function (extensionId: any, tabId: any) {
+          const img = document.createElement('img')
+          const params = new URLSearchParams({
+            tabId: `${tabId}`,
+            t: `${Date.now()}`,
+          })
+          const src = `crx://extension-icon/${extensionId}/32/2?${params.toString()}`
+          return new Promise((resolve, reject) => {
+            img.onload = () => resolve('success')
+            img.onerror = () => {
+              reject(new Error('error loading img, check devtools console' + src))
+            }
+            img.src = src
+          })
+        }})(${[browser.extension.id, browser.webContents.id]
+          .map((v) => JSON.stringify(v))
+          .join(', ')});`,
+      )
+
+      expect(result).to.equal('success')
+    })
+
     it('supports cross-session requests', async () => {
+      const extensionsPartition = browser.partition
       const otherSession = session.fromPartition(`persist:crx-${uuid()}`)
-      browser.extensions.handleCRXProtocol(otherSession)
+      ElectronChromeExtensions.handleCRXProtocol(otherSession)
 
       browser.session.getPreloadScripts().forEach((script) => {
         otherSession.registerPreloadScript(script)
@@ -252,17 +282,24 @@ describe('chrome.browserAction', () => {
       await view.webContents.loadURL(server.getUrl())
 
       const result = await view.webContents.executeJavaScript(
-        `(${function (extensionId: any, tabId: any) {
+        `(${function (extensionId: any, tabId: any, partition: any) {
           const img = document.createElement('img')
-          const src = `crx://extension-icon/${extensionId}/32/2?tabId=-1&t=${Date.now()}`
+          const params = new URLSearchParams({
+            tabId: `${tabId}`,
+            partition,
+            t: `${Date.now()}`,
+          })
+          const src = `crx://extension-icon/${extensionId}/32/2?${params.toString()}`
           return new Promise((resolve, reject) => {
             img.onload = () => resolve('success')
             img.onerror = () => {
               reject(new Error('error loading img, check devtools console'))
             }
             img.src = src
           })
-        }})(${JSON.stringify(browser.extension.id)}, ${browser.webContents.id});`,
+        }})(${[browser.extension.id, browser.webContents.id, extensionsPartition]
+          .map((v) => JSON.stringify(v))
+          .join(', ')});`,
       )
 
       expect(result).to.equal('success')

packages/electron-chrome-extensions/src/browser-action.ts

@@ -205,8 +205,14 @@ export const injectBrowserAction = () => {
       private updateIcon(info: any) {
         const iconSize = 32
         const resizeType = 2
-        const timeParam = info.iconModified ? `&t=${info.iconModified}` : ''
-        const iconUrl = `crx://extension-icon/${this.id}/${iconSize}/${resizeType}?tabId=${this.tab}${timeParam}`
+        const searchParams = new URLSearchParams({
+          tabId: `${this.tab}`,
+          partition: `${this.partition || DEFAULT_PARTITION}`,
+        })
+        if (info.iconModified) {
+          searchParams.append('t', info.iconModified)
+        }
+        const iconUrl = `crx://extension-icon/${this.id}/${iconSize}/${resizeType}?${searchParams.toString()}`
         const bgImage = `url(${iconUrl})`
 
         if (this.pendingIcon) {

packages/electron-chrome-extensions/src/browser/api/browser-action.ts

@@ -209,17 +209,9 @@ export class BrowserActionAPI {
     session.on('extension-unloaded', (event, extension) => {
       this.removeActions(extension.id)
     })
-
-    this.handleCRXProtocol(session)
-  }
-
-  handleCRXProtocol(session: Electron.Session) {
-    if (!session.protocol.isProtocolHandled('crx')) {
-      session.protocol.handle('crx', this.handleCrxRequest)
-    }
   }
 
-  private handleCrxRequest = (request: GlobalRequest): GlobalResponse => {
+  handleCRXRequest(request: GlobalRequest): GlobalResponse {
     d('%s', request.url)
 
     try {

packages/electron-chrome-extensions/src/browser/index.ts

@@ -87,6 +87,37 @@ export class ElectronChromeExtensions extends EventEmitter {
     return sessionMap.get(session)
   }
 
+  /**
+   * Handles the 'crx://' protocol in the session.
+   *
+   * This is required to display <browser-action-list> extension icons.
+   */
+  static handleCRXProtocol(session: Electron.Session) {
+    if (session.protocol.isProtocolHandled('crx')) {
+      session.protocol.unhandle('crx')
+    }
+    session.protocol.handle('crx', function handleCRXRequest(request) {
+      let url
+      try {
+        url = new URL(request.url)
+      } catch {
+        return new Response('Invalid URL', { status: 404 })
+      }
+
+      const partition = url?.searchParams.get('partition') || '_self'
+      const remoteSession =
+        partition === '_self' ? session : electronSession.fromPartition(partition)
+      const extensions = ElectronChromeExtensions.fromSession(remoteSession)
+      if (!extensions) {
+        return new Response(`ElectronChromeExtensions not found for "${partition}"`, {
+          status: 404,
+        })
+      }
+
+      return extensions.api.browserAction.handleCRXRequest(request)
+    })
+  }
+
   private ctx: ExtensionContext
 
   private api: {
@@ -141,11 +172,6 @@ export class ElectronChromeExtensions extends EventEmitter {
 
     this.listenForExtensions()
     this.prependPreload(opts.modulePath)
-
-    // Register crx:// protocol in default session for convenience
-    if (this.ctx.session !== electronSession.defaultSession) {
-      this.handleCRXProtocol(electronSession.defaultSession)
-    }
   }
 
   private listenForExtensions() {
@@ -247,9 +273,16 @@ export class ElectronChromeExtensions extends EventEmitter {
 
   /**
    * Handles the 'crx://' protocol in the session.
+   *
+   * @deprecated Call `ElectronChromeExtensions.handleCRXProtocol(session)`
+   * instead. The CRX protocol is no longer one-to-one with
+   * ElectronChromeExtensions instances. Instead, it should now be handled only
+   * on the sessions where <browser-action-list> extension icons will be shown.
    */
   handleCRXProtocol(session: Electron.Session) {
-    this.api.browserAction.handleCRXProtocol(session)
+    throw new Error(
+      'extensions.handleCRXProtocol(session) is deprecated, call ElectronChromeExtensions.handleCRXProtocol(session) instead.',
+    )
   }
 
   /**

packages/shell/browser/main.js

@@ -197,6 +197,9 @@ class Browser {
       },
     })
 
+    // Display <browser-action-list> extension icons.
+    ElectronChromeExtensions.handleCRXProtocol(this.session)
+
     this.extensions.on('browser-action-popup-created', (popup) => {
       this.popup = popup
     })