feat: add module exports for preload scripts

Author: samuelmaddock

build/esbuild/esbuild.config.base.js

@@ -5,7 +5,7 @@ function createConfig(opts = {}) {
   return {
     bundle: true,
     platform: opts.platform || 'node',
-    target: 'es2020',
+    target: 'esnext',
     sourcemap: !prod,
     minify: false,
     external: [],

packages/electron-chrome-extensions/.gitignore

@@ -1,2 +1,3 @@
 dist
-*.map
+*.map
+*.preload.js

packages/electron-chrome-extensions/README.md

@@ -26,20 +26,18 @@ Simple browser using Electron's [default session](https://www.electronjs.org/doc
 
 ```js
 const { app, BrowserWindow } = require('electron')
-const { ElectronChromeExtensions } = require('electron-chrome-extensions')(
-  (async function main() {
-    await app.whenReady()
+const { ElectronChromeExtensions } = require('electron-chrome-extensions')
 
-    const extensions = new ElectronChromeExtensions()
-    const browserWindow = new BrowserWindow()
+app.whenReady().then(() => {
+  const extensions = new ElectronChromeExtensions()
+  const browserWindow = new BrowserWindow()
 
-    // Adds the active tab of the browser
-    extensions.addTab(browserWindow.webContents, browserWindow)
+  // Adds the active tab of the browser
+  extensions.addTab(browserWindow.webContents, browserWindow)
 
-    browserWindow.loadURL('https://samuelmaddock.com')
-    browserWindow.show()
-  })(),
-)
+  browserWindow.loadURL('https://samuelmaddock.com')
+  browserWindow.show()
+})
 ```
 
 ### Advanced
@@ -50,45 +48,68 @@ Multi-tab browser with full support for Chrome extension APIs.
 
 ```js
 const { app, session, BrowserWindow } = require('electron')
-const { ElectronChromeExtensions } = require('electron-chrome-extensions')(
-  (async function main() {
-    await app.whenReady()
+const { ElectronChromeExtensions } = require('electron-chrome-extensions')
+
+app.whenReady().then(() => {
+  const browserSession = session.fromPartition('persist:custom')
+
+  const extensions = new ElectronChromeExtensions({
+    session: browserSession,
+    createTab(details) {
+      // Optionally implemented for chrome.tabs.create support
+    },
+    selectTab(tab, browserWindow) {
+      // Optionally implemented for chrome.tabs.update support
+    },
+    removeTab(tab, browserWindow) {
+      // Optionally implemented for chrome.tabs.remove support
+    },
+    createWindow(details) {
+      // Optionally implemented for chrome.windows.create support
+    },
+  })
+
+  const browserWindow = new BrowserWindow({
+    webPreferences: {
+      // Same session given to Extensions class
+      session: browserSession,
+      // Recommended options for loading remote content
+      sandbox: true,
+      contextIsolation: true,
+    },
+  })
 
-    const browserSession = session.fromPartition('persist:custom')
+  // Adds the active tab of the browser
+  extensions.addTab(browserWindow.webContents, browserWindow)
 
-    const extensions = new ElectronChromeExtensions({
-      session: browserSession,
-      createTab(details) {
-        // Optionally implemented for chrome.tabs.create support
-      },
-      selectTab(tab, browserWindow) {
-        // Optionally implemented for chrome.tabs.update support
-      },
-      removeTab(tab, browserWindow) {
-        // Optionally implemented for chrome.tabs.remove support
-      },
-      createWindow(details) {
-        // Optionally implemented for chrome.windows.create support
-      },
-    })
-
-    const browserWindow = new BrowserWindow({
-      webPreferences: {
-        // Same session given to Extensions class
-        session: browserSession,
-        // Recommended options for loading remote content
-        sandbox: true,
-        contextIsolation: true,
-      },
-    })
-
-    // Adds the active tab of the browser
-    extensions.addTab(browserWindow.webContents, browserWindow)
-
-    browserWindow.loadURL('https://samuelmaddock.com')
-    browserWindow.show()
-  })(),
-)
+  browserWindow.loadURL('https://samuelmaddock.com')
+  browserWindow.show()
+})
+```
+
+### Including the preload script
+
+This module requires including its preload script. Be sure to copy it next to your app's entry
+point script so it works in your packaged app.
+
+```js
+const fs = require('node:fs')
+const path = require('node:path')
+
+const preloadPath = require.resolve('electron-chrome-extensions/preload')
+const buildPath = './path/to/entry/point'
+
+fs.cp(preloadPath, path.join(buildPath, path.basename(preloadPath)))
+```
+
+For bundlers, you can try using [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin), [vite-plugin-static-copy](https://github.com/sapphi-red/vite-plugin-static-copy), or [rollup-plugin-copy](https://github.com/vladshcherbin/rollup-plugin-copy).
+
+The `modulePath` option can be used for loading the preload from elsewhere.
+
+```js
+new ElectronChromeExtensions({
+  modulePath: path.resolve('./out', 'node_modules', 'electron-chrome-extensions'),
+})
 ```
 
 ## API
@@ -221,7 +242,7 @@ To enable the element on a webpage, you must define a preload script which injec
 Inject the browserAction API to make the `<browser-action-list>` element accessible in your application.
 
 ```js
-import { injectBrowserAction } from 'electron-chrome-extensions/dist/browser-action'
+import { injectBrowserAction } from 'electron-chrome-extensions/browser-action'
 
 // Inject <browser-action-list> element into our page
 if (location.href === 'webui://browser-chrome.html') {

packages/electron-chrome-extensions/esbuild.config.js

@@ -25,7 +25,7 @@ build(browserESMConfig)
 
 const preloadConfig = createConfig({
   entryPoints: ['src/preload.ts'],
-  outfile: 'dist/preload.js',
+  outfile: 'dist/chrome-extension-api.preload.js',
   platform: 'browser',
   external,
   sourcemap: false,

packages/electron-chrome-extensions/package.json

@@ -11,11 +11,17 @@
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.js"
     },
+    "./browser-action": {
+      "types": "./dist/types/browser-action.d.ts",
+      "import": "./dist/esm/browser-action.mjs",
+      "require": "./dist/cjs/browser-action.js"
+    },
     "./dist/browser-action": {
       "types": "./dist/types/browser-action.d.ts",
       "import": "./dist/esm/browser-action.mjs",
       "require": "./dist/cjs/browser-action.js"
-    }
+    },
+    "./preload": "./chrome-extension-api.preload.js"
   },
   "scripts": {
     "build": "yarn clean && tsc && node esbuild.config.js",

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

@@ -1,7 +1,7 @@
 import { session as electronSession } from 'electron'
 import { EventEmitter } from 'node:events'
 import path from 'node:path'
-import { promises as fs } from 'node:fs'
+import { existsSync } from 'node:fs'
 
 import { BrowserActionAPI } from './api/browser-action'
 import { TabsAPI } from './api/tabs'
@@ -85,7 +85,11 @@ export class ElectronChromeExtensions extends EventEmitter {
       store,
     }
 
-    this.modulePath = modulePath || path.join(__dirname, '../..')
+    console.log('***load', {
+      resolve: require.resolve('electron-chrome-extensions/preload'),
+      require: require('electron-chrome-extensions')
+    })
+    this.modulePath = modulePath || __dirname
 
     this.api = {
       browserAction: new BrowserActionAPI(this.ctx),
@@ -112,7 +116,7 @@ export class ElectronChromeExtensions extends EventEmitter {
   private async prependPreload() {
     const { session } = this.ctx
 
-    const preloadPath = path.join(this.modulePath, 'dist/preload.js')
+    const preloadPath = path.join(this.modulePath, 'chrome-extension-api.preload.js')
 
     if ('registerPreloadScript' in session) {
       session.registerPreloadScript({
@@ -130,16 +134,12 @@ export class ElectronChromeExtensions extends EventEmitter {
       session.setPreloads([...session.getPreloads(), preloadPath])
     }
 
-    let preloadExists = false
-    try {
-      const stat = await fs.stat(preloadPath)
-      preloadExists = stat.isFile()
-    } catch {}
-
-    if (!preloadExists) {
-      console.error(
-        `Unable to access electron-chrome-extensions preload file (${preloadPath}). Consider configuring the 'modulePath' constructor option.`,
+    if (!existsSync(preloadPath)) {
+      const preloadError = new Error(
+        `electron-chrome-extensions: Preload file not found at "${preloadPath}". ` +
+          'Copy "electron-chrome-extensions/preload" into your build files and/or configure the modulePath option.',
       )
+      console.error(preloadError)
     }
   }
 

packages/electron-chrome-web-store/.gitignore

@@ -1 +1,2 @@
-dist
+dist
+*.preload.js

packages/electron-chrome-web-store/README.md

@@ -57,6 +57,31 @@ app.whenReady().then(async () => {
 })
 ```
 
+### Including the preload script
+
+This module requires including its preload script. Be sure to copy it next to your app's entry
+point script so it works in your packaged app.
+
+```js
+const fs = require('node:fs')
+const path = require('node:path')
+
+const preloadPath = require.resolve('electron-chrome-web-store/preload')
+const buildPath = './path/to/entry/point'
+
+fs.cp(preloadPath, path.join(buildPath, path.basename(preloadPath)))
+```
+
+For bundlers, you can try using [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin), [vite-plugin-static-copy](https://github.com/sapphi-red/vite-plugin-static-copy), or [rollup-plugin-copy](https://github.com/vladshcherbin/rollup-plugin-copy).
+
+The `modulePath` option can be used for loading the preload from elsewhere.
+
+```js
+installChromeWebStore({
+  modulePath: path.resolve('./out', 'node_modules', 'electron-chrome-web-store'),
+})
+```
+
 ## API
 
 ### `installChromeWebStore`

packages/electron-chrome-web-store/esbuild.config.js

@@ -3,7 +3,12 @@ const { createConfig, build, EXTERNAL_BASE } = require('../../build/esbuild/esbu
 
 console.log(`building ${packageJson.name}`)
 
-const external = [...EXTERNAL_BASE, 'adm-zip', 'pbf']
+const external = [
+  ...EXTERNAL_BASE,
+  'adm-zip',
+  'pbf',
+  'electron-chrome-web-store/preload'
+]
 
 const esmOnlyModules = ['pbf']
 
@@ -26,8 +31,8 @@ build(browserConfig)
 build(browserESMConfig)
 
 const preloadConfig = createConfig({
-  entryPoints: ['src/renderer/web-store-preload.ts'],
-  outfile: 'dist/renderer/web-store-preload.js',
+  entryPoints: ['src/renderer/web-store.preload.ts'],
+  outfile: 'web-store.preload.js',
   platform: 'browser',
   external,
   sourcemap: false,

packages/electron-chrome-web-store/package.json

@@ -10,7 +10,8 @@
       "types": "./dist/types/browser/index.d.ts",
       "import": "./dist/esm/browser/index.mjs",
       "require": "./dist/cjs/browser/index.js"
-    }
+    },
+    "./preload": "./web-store.preload.js"
   },
   "scripts": {
     "build": "yarn clean && tsc && node esbuild.config.js",