True HMR for Content Scripts

[jacksteamdev]

HMR for content scripts is tricky, since content scripts are read from the file system, and Vite uses query strings in its HMR implementation.

Status

Tests pass for HMR in content scripts with React and Vue. Both CSS and JS updates preserve application state!

Need to fix tests for CI.

Completed Requirements

1. Chrome extension files must exist on the file system
2. Content scripts must include HMR code from the server
3. Must buffer HMR updates until after the updated files are ready
4. Buffered HMR updates must not interfere with normal HMR updates
5. Content script files should have stable file names; no hashes in file name
6. Content script files should have js extension; eg, /App.vue should be /App.vue.js
7. Content script files should reflect the module query; eg, /App.vue?type=vue&index=0&css should be App.vue.0.css.js, not App.vue.js
8. Content script HMR code must match output file names
9. Buffered HMR update paths must match output file names
10. HMR updates for HTML dependencies should not go to content scripts
11. HTML page dependencies should not trigger full reload in content scripts or background page
12. Chrome aggressively caches content script files; full reloads for content scripts require full extension reload to bust cache
13. Changes to background page require full extension reload
14. Full extension reloads must trigger a page reload for content scripts; the extension context is invalidated when the extension reloads
15. On full extension reload, content scripts must buffer reloads until new extension context is available
16. Must support a prelude script to init React Refresh
17. Tests must demonstrate React support; JS, CSS, full reload, and preserved app state
18. Tests must demonstrate Vue support; JS, CSS, full reload, and preserved app state
19. Unchanged files must be cached in Rollup; changed files should be transformed by server

I'll release an article for content script HMR to explain usage.

[yunsii]

It looks like there is no related article for now, I am strugling with source code now 😂