New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Does wxt support manifest.json dynamic variable injection? #443
Comments
I just saw it in the defineConfig interface: https://wxt.dev/api/wxt/interfaces/InlineConfig.html#transformmanifest |
WXT uses vite internally, not webpack. You can configure vite here: https://wxt.dev/api/wxt/interfaces/InlineConfig.html#vite I didn't really understand what you're asking, so that's the best response I can give you. Could you provide an example of what you're trying to replace? |
@aklinker1 this is what i do in webpack: I have a dev manifest (for testing) and a prod manifest. For dev my nextjs server is localhost and for prod a different URL, so I inject a login content content script to detect auth on a login page. see this code fragment:
|
OK, yes, I would recommend transforming the manifest for this. |
Yep that works perfect, thanks @aklinker1! |
@aklinker1 can I use environemtn variables loaded using vite config in content script matches? Content script definition using environment variable:
Environment variable definition in defineConfig
|
When entrypoints are loaded during the build to extract their This issue is kinda related to #336. For now, I'd recommend an approach like this: // entrypoints/content.ts
export default defineContentScript({
matches: ["*://$FRONTEND_APP_DOMAIN/*/login*"],
main(ctx) {
// ...
}
}) // wxt.config.ts
export default defineConfig({
// ...
hooks: {
'build:manifestGenerated': (wxt, manifest) => {
const replacements = {
"$FRONTEND_APP_DOMAIN": wxt.config.mode === "development" ? "dev.mydomain.com" : "mydomain.com",
}
manifest.content_scripts?.forEach((contentScript) => {
contentScript.matches = replaceMatches(
contentScript.matches,
replacements,
);
});
},
},
});
function replaceMatches(
matches: string[],
replacements: Record<string, string>,
) {
return matches.map((pattern) =>
Object.entries(replacements).reduce<string>(
(pattern, [find, replace]) => pattern.replace(find, replace),
pattern,
),
);
} |
@aklinker1 thanks for that! Just did that, now running into a bug, none of the content scripts are loading. This is the error I see in service worker log: My setup is like this for content script:
And using your code to replace the variable:
|
Ah, duh, my bad. You have replaced it in the manifest, but during development it loads them from runtime separately. So that isn't gonna work, like you're seeing. Let me do a little bit of research and get back to you. In the meantime... Just comment them out when you want to test against the other lol. |
Yeah hardcoding should be good for now. Thanks!
…On Thu, Feb 15, 2024 at 2:01 PM Aaron ***@***.***> wrote:
Ah, duh, my bad. You have replaced it in the manifest, but during
development it loads them from runtime separately.
So that isn't gonna work, like you're seeing. Let me do a little bit of
research and get back to you.
In the meantime... Just comment them out when you want to test against the
other lol.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
I also want to import some variables on .env files into manifest.json. For example, I would be happy if I could use a function like Vite's |
I was also looking for env sample and found it.
|
@dirablue Thank you!! |
In my current setup, for certain urls in manifest.json I am replacing them with webpack during buildtime (prod/dev/test). Does wxt support this behavior OR is there anyway to define custom webpack rules?
Thanks!
The text was updated successfully, but these errors were encountered: