@tmkx Thanks for the work on manifest v3! I tried the `refactor/mv3` branch ([61b47be](https://github.com/antfu/vitesse-webext/commit/61b47be7f03ab101d4cefda3386db0c9b78ec86a) at the time of writing) and found two problems:
1. `src/background/contentScriptHMR.ts` got removed and the functionality was never restored anywhere, so it seems content scripts are never injected into the page in dev mode. A quick patch of mine:
```diff
diff --git a/src/background/contentScriptHMR.ts b/src/background/contentScriptHMR.ts
new file mode 100644
index 0000000..00687cb
--- /dev/null
+++ b/src/background/contentScriptHMR.ts
@@ -0,0 +1,21 @@
+import browser from 'webextension-polyfill'
+import { isFirefox, isForbiddenUrl } from '~/env'
+
+// Firefox fetch files from cache instead of reloading changes from disk,
+// hmr will not work as Chromium based browser
+browser.webNavigation.onCommitted.addListener(({ tabId, frameId, url }) => {
+ // Filter out non main window events.
+ if (frameId !== 0)
+ return
+
+ if (isForbiddenUrl(url))
+ return
+
+ // inject the latest scripts
+ browser.scripting
+ .executeScript({
+ target: { tabId },
+ files: [`${isFirefox ? '' : '.'}/dist/contentScripts/index.global.js`],
+ })
+ .catch(error => console.error(error))
+})
diff --git a/src/background/index.ts b/src/background/index.ts
index 3b28a58..d2e14e1 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -2,6 +2,9 @@ import type { Tabs } from 'webextension-polyfill'
import browser from 'webextension-polyfill'
import { onMessage, sendMessage } from 'webext-bridge'
+if (__DEV__)
+ import('./contentScriptHMR')
+
browser.runtime.onInstalled.addListener((): void => {
// eslint-disable-next-line no-console
console.log('Extension installed')
diff --git a/src/manifest.ts b/src/manifest.ts
index 52b947a..c52ab00 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -60,7 +60,7 @@ export async function getManifest() {
// we use a background script to always inject the latest version
// see src/background/contentScriptHMR.ts
delete manifest.content_scripts
- manifest.permissions?.push('webNavigation')
+ manifest.permissions?.push('scripting', 'webNavigation')
}
return manifest
```
Note: this will inject the content script into any page under `host_permissions`; you may need to further limit injection based on `url`.
2. I tried to use this template with Tailwind v3 + PostCSS (the standard setup: https://tailwindcss.com/docs/guides/vite) instead of Windi.css because I'm more familiar with Tailwind and v3 has more features I like. Unfortunately it failed spectacularly with the `MV3Hmr` plugin. Presumably due to some weird interaction between Tailwind's JIT and the `MV3Hmr` plugin's way to detect changes, `writeToDisk` is called in a seemingly infinite loop, and the node process quickly runs out of memory and crashes. I didn't further investigate this.