Skip to content

fix(build): replace lodash's Function('return this')() with globalThis to bypass Firefox MV3 CSP #84

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.

Sign up for GitHub

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

Closed
laurenthdl wants to merge 1 commit into from
Closed

fix(build): replace lodash's Function('return this')() with globalThis to bypass Firefox MV3 CSP #84

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions wxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,27 @@ import react, { reactCompilerPreset } from "@vitejs/plugin-react";
import { defineConfig } from "wxt";
import pkg from "./package.json";

/**
* Replace lodash's legacy `Function('return this')()` global lookup with `globalThis`.
*
* lodash uses this expression as a fallback when `global`/`self`/etc. are not
* available. In a Firefox MV3 content script the addon runs in an isolated
* world whose realm differs from the page's, so `self.Object === Object` is
* `false` and the fallback is taken. The expression is then blocked by the
* extension's default MV3 CSP (`script-src 'self'`), which throws
* `EvalError: call to Function() blocked by CSP` and prevents the content
* script from mounting. See https://github.com/CrawlerCode/redmine-time-tracking/issues/80
*/
const fixFirefoxCspGlobalThisFallback = () => ({
name: "fix-firefox-csp-globalthis-fallback",
enforce: "post" as const,
transform(code: string, id: string) {
if (!id.includes("lodash")) return null;
if (!/Function\(\s*(['"`])return this\1\s*\)\s*\(\s*\)/.test(code)) return null;
return code.replace(/Function\(\s*(['"`])return this\1\s*\)\s*\(\s*\)/g, "globalThis");
},
});

// See https://wxt.dev/api/config.html
export default defineConfig({
srcDir: "src",
Expand All @@ -20,6 +41,7 @@ export default defineConfig({
presets: [reactCompilerPreset()],
} as Parameters<typeof babel>[0]),
tailwindcss(),
fixFirefoxCspGlobalThisFallback(),
],
}),
manifest: ({ browser, mode }) => ({
Expand Down