Support ESM templates (#185)

Author: cezaraugusto

examples/content-esm/template.spec.mjs

@@ -0,0 +1,44 @@
+import path from 'path'
+import {fileURLToPath} from 'url'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures.mjs'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const exampleDir = 'examples/content-esm'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})

examples/extension-fixtures.mjs

@@ -0,0 +1,70 @@
+import {test as base, chromium} from '@playwright/test'
+
+/**
+ * @typedef {import('@playwright/test').BrowserContext} BrowserContext
+ */
+const extensionFixtures = (
+  /** @type {string} */ pathToExtension,
+  /** @type {boolean} */ headless
+  /** @returns {import('@playwright/test').TestModifier<{}, {context: BrowserContext, extensionId: string}>} */
+) => {
+  return base.extend({
+    /** @type {() => Promise<BrowserContext>} */
+    // eslint-disable-next-line no-empty-pattern
+    context: async ({}, use) => {
+      const context = await chromium.launchPersistentContext('', {
+        headless: false,
+        args: [
+          headless ? `--headless=new` : '',
+          `--disable-extensions-except=${pathToExtension}`,
+          `--load-extension=${pathToExtension}`,
+          '--no-first-run', // Disable Chrome's native first run experience.
+          '--disable-client-side-phishing-detection', // Disables client-side phishing detection
+          '--disable-component-extensions-with-background-pages', // Disable some built-in extensions that aren't affected by '--disable-extensions'
+          '--disable-default-apps', // Disable installation of default apps
+          '--disable-features=InterestFeedContentSuggestions', // Disables the Discover feed on NTP
+          '--disable-features=Translate', // Disables Chrome translation, both the manual option and the popup prompt when a page with differing language is detected.
+          '--hide-scrollbars', // Hide scrollbars from screenshots.
+          '--mute-audio', // Mute any audio
+          '--no-default-browser-check', // Disable the default browser check, do not prompt to set it as such
+          '--no-first-run', // Skip first run wizards
+          '--ash-no-nudges', // Avoids blue bubble "user education" nudges (eg., "… give your browser a new look", Memory Saver)
+          '--disable-search-engine-choice-screen', // Disable the 2023+ search engine choice screen
+          '--disable-features=MediaRoute', // Avoid the startup dialog for `Do you want the application “Chromium.app” to accept incoming network connections?`.  Also disables the Chrome Media Router which creates background networking activity to discover cast targets. A superset of disabling DialMediaRouteProvider.
+          '--use-mock-keychain', // Use mock keychain on Mac to prevent the blocking permissions dialog about "Chrome wants to use your confidential information stored in your keychain"
+          '--disable-background-networking', // Disable various background network services, including extension updating, safe browsing service, upgrade detector, translate, UMA
+          '--disable-breakpad', // Disable crashdump collection (reporting is already disabled in Chromium)
+          '--disable-component-update', // Don't update the browser 'components' listed at chrome://components/
+          '--disable-domain-reliability', // Disables Domain Reliability Monitoring, which tracks whether the browser has difficulty contacting Google-owned sites and uploads reports to Google.
+          '--disable-features=AutofillServerCommunicatio', // Disables autofill server communication. This feature isn't disabled via other 'parent' flags.
+          '--disable-features=CertificateTransparencyComponentUpdate',
+          '--disable-sync', // Disable syncing to a Google account
+          '--disable-features=OptimizationHints', // Used for turning on Breakpad crash reporting in a debug environment where crash reporting is typically compiled but disabled. Disable the Chrome Optimization Guide and networking with its service API
+          '--disable-features=DialMediaRouteProvider', // A weaker form of disabling the MediaRouter feature. See that flag's details.
+          '--no-pings', // Don't send hyperlink auditing pings
+          '--enable-features=SidePanelUpdates' // Ensure the side panel is visible. This is used for testing the side panel feature.
+        ].filter((arg) => !!arg)
+      })
+      await use(context)
+      await context.close()
+    },
+    /** @type {() => Promise<string>} */
+    extensionId: async ({context}, use) => {
+      /*
+      // for manifest v2:
+      let [background] = context.backgroundPages()
+      if (!background)
+        background = await context.waitForEvent('backgroundpage')
+      */
+
+      // for manifest v3:
+      let [background] = context.serviceWorkers()
+      if (!background) background = await context.waitForEvent('serviceworker')
+
+      const extensionId = background.url().split('/')[2]
+      await use(extensionId)
+    }
+  })
+}
+
+export {extensionFixtures}

examples/new-esm/template.spec.mjs

@@ -0,0 +1,39 @@
+import path from 'path'
+import {fileURLToPath} from 'url'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures.mjs'
+
+// Recreate __dirname for ES Modules
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const exampleDir = 'examples/new-esm'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your New ESModule Extension')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})

programs/develop/install_scripts.sh

@@ -9,7 +9,8 @@ html_plugin_files=(
 
 resolve_plugin_files=(
   "$(dirname "$0")/webpack/plugin-extension/feature-resolve/steps/resolver-loader.ts"
-  "$(dirname "$0")/webpack/plugin-extension/feature-resolve/steps/resolver-module.ts"
+  # Defined in line 32 since it needs to be executed in esm format
+  # "$(dirname "$0")/webpack/plugin-extension/feature-resolve/steps/resolver-module.ts"
 )
 
 scripts_plugin_files=(
@@ -28,6 +29,7 @@ minimum_files=(
   "$(dirname "$0")/webpack/plugin-reload/steps/setup-chromium-reload-client/minimum-chromium-file.ts"
   "$(dirname "$0")/webpack/plugin-reload/steps/setup-firefox-reload-client/minimum-firefox-file.ts"
   "$(dirname "$0")/webpack/plugin-extension/feature-html/steps/minimum-script-file.ts"
+  "$(dirname "$0")/webpack/plugin-extension/feature-resolve/steps/resolver-module.ts"
 )
 
 # Define the tsup function

programs/develop/package.json

@@ -25,7 +25,7 @@
     "clean": "rm -rf dist",
     "watch": "tsup-node ./module.ts --format cjs --dts --target=node18 --watch",
     "compile": "tsup-node ./module.ts --format cjs --dts --target=node18 --minify && bash install_scripts.sh",
-    "test": "jest --no-cache --testPathPattern='webpack/.*/__spec__/.*\\.spec\\.ts'",
+    "test": "jest --no-cache --testPathPattern='webpack/.*/__spec__/.*\\.spec\\.*'",
     "test:coverage": "jest --no-cache --testPathPattern='webpack/.*/__spec__/.*\\.spec\\.ts' --coverage",
     "test:build": "jest ./build.spec.ts --no-cache"
   },

programs/develop/webpack/plugin-extension/feature-resolve/index.ts

@@ -56,7 +56,7 @@ export class ResolvePlugin {
 
   public apply(compiler: webpack.Compiler): void {
     new webpack.ProvidePlugin({
-      r: [path.resolve(__dirname, './resolver-module.js'), 'default']
+      r: [path.resolve(__dirname, './resolver-module.mjs'), 'default']
     }).apply(compiler)
 
     // 1 - Add the resolver loader.

programs/develop/webpack/plugin-extension/feature-resolve/steps/resolver-loader.ts

@@ -48,7 +48,7 @@ export default function resolveLoader(
   })
 
   if (new RegExp(options.test).test(this.resourcePath)) {
-    const resolverName = 'resolver-module.js'
+    const resolverName = 'resolver-module.mjs'
 
     if (
       this.resourcePath.includes('node_modules') ||