feat: add IIFE support for main-world content scripts

[Toumash]

Summary

Adds support for IIFE content scripts via the ?iife import query, enabling main-world script injection using chrome.scripting.registerContentScripts with world: 'MAIN'.

Features

• IIFE bundling: Scripts imported with ?iife query are bundled as IIFE (Immediately Invoked Function Expression) for injection into the page's main world
• Dev mode support: IIFE scripts rebuild on file change and trigger extension reload so Chrome picks up the updated content
• Build support: IIFE scripts are properly bundled during production builds
• TypeScript support: Added module declaration for *?iife imports in client.d.ts
• Vite compatibility: Works with Vite 3, 5, 6, and 7

Usage

// background.ts
import mainWorld from './main-world?iife'

chrome.scripting.registerContentScripts([{
  id: 'main-world',
  js: [mainWorld],
  matches: ['<all_urls>'],
  world: 'MAIN',
  runAt: 'document_start',
}])

Technical Details

• IIFE scripts are bundled separately using Vite's build API, not part of Vite's module graph
• Path format: No leading / for registerContentScripts (e.g., main-world.js)
• Dev mode: File changes trigger IIFE rebuild + crx:runtime-reload (Chrome caches registered content scripts)
• IIFE scripts don't support HMR - extension reload is required for changes to take effect

Files Changed

• packages/vite-plugin/src/node/fileWriter-rxjs.ts - IIFE bundling for dev mode
• packages/vite-plugin/src/node/plugin-contentScripts.ts - IIFE bundling for build
• packages/vite-plugin/src/node/plugin-contentScripts_dynamic.ts - ?iife query handling
• packages/vite-plugin/src/node/plugin-hmr.ts - IIFE rebuild detection and runtime reload
• packages/vite-plugin/client.d.ts - TypeScript module declaration

Testing

# Output tests
pnpm vitest --run --mode out tests/out/dynamic-script-iife

# E2E tests (includes rebuild-on-change test)
pnpm vitest --run --mode e2e tests/e2e/mv3-dynamic-script-iife

Closes #1101

demo:

crxjs_demo_1101.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: deea812

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@crxjs/vite-plugin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[salmin89]

this is not quite what I'm looking for.

?iife imports code, but registerContentScript expects a string (file path).

My usage is like this:

import filePath from './content/iife?iife'

const script: chrome.scripting.RegisteredContentScript = {
  id: 'abc',
  matches: ['<all_urls>'],
  js: [filePath],
  runAt: 'document_start',
  world: 'MAIN',
}

;(async () => {
  const existing = await chrome.scripting.getRegisteredContentScripts({
    ids: [script.id],
  })

  if (existing.length) {
    await chrome.scripting.updateContentScripts([script])
  } else {
    await chrome.scripting.registerContentScripts([script])
  }
})()

You might still keep this PR, for iife in background scripts. And I'll use my work-arounds for now.

[Toumash]

Thanks for the clarification! I’ve updated the branch so ?iife behaves as an alias of ?script&iife and resolves to a file path string for registerContentScripts. Tests/fixtures were updated accordingly, im working on the rebuild not being picked up right now and the test for it

[Toumash]

Ok, now the main world script should rebuild just fine

[Toumash]

hmm i only wanted to have full tests for everything between vite versions

[Toumash]

@salmin89 see the demo in the description. Unfortunately tests on windows fail probably because of the same reasons as other e2e were failing before but i dont remember correctly

[Toumash]

@copilot resolve the merge conflicts in this pull request