1173-task-replace-webpack by tombeckenham · Pull Request #1176 · onflow/FRW-Extension

tombeckenham · 2025-07-15T02:06:33Z

Fix 'window is not defined' error in service worker by providing globalThis fallback
Remove problematic file:// pattern from content script matches (not supported)
Configure worker format and build settings for service worker compatibility
Update content script to only match http:// and https:// URLs

These changes resolve the runtime errors preventing the background service worker
from initializing properly and fix content script pattern matching issues.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Closes #1173

Related Issue

Closes #

Summary of Changes

Need Regression Testing

Yes
No

Risk Assessment

Low
Medium
High

Additional Notes

Screenshots (if applicable)

Closes #1173

- Install WXT, Vite, and required plugins - Create initial wxt.config.ts with polyfills and aliases - Update package.json scripts to use WXT commands - Configure environment variables and manifest generation Closes #1173

- Create WXT-compatible entrypoints for background, content scripts, popup, notification, and options - Move static assets (_locales, images, fonts) to public directory - Copy script.js and wallet-core.wasm to public directory - Update entry points to use WXT's defineBackground and defineContentScript APIs - Use proper consoleLog utility instead of console.log Closes #1173

- Use #imports module for WXT APIs (defineBackground, defineContentScript) - Update react-router imports from react-router-dom to react-router for v7 - Fix deprecated runner config to webExt - Add React dependencies to optimizeDeps.include - Add .wxt to gitignore and remove from tracking Closes #1173

- Add commonjs plugin for React/React Router module resolution - Update TypeScript config to include wxt.config.ts - Fix WXT hook parameter types - Configure Vite for better CommonJS/ESM interop - Add React dedupe and optimize deps configuration - Remove debug console logs to fix eslint warnings Closes #1173

- Update inject plugin to use process/browser - Add process alias to resolve configuration - Define DEPLOYMENT_ENV and IS_BETA environment variables - Attempt to fix console-log.ts process import issue Closes #1173

- Remove unnecessary commonjs plugin (React works fine with Vite) - Simplify optimizeDeps configuration - Add bip39 to optimizeDeps.include - Fix eslint warnings about unused parameters - Remove process alias as it's handled by nodePolyfills Closes #1173

This commit completes the migration from webpack to WXT build system: ## Major Changes: - Replace webpack build system with WXT framework using Vite - Migrate all entry points to WXT convention-based structure - Replace legacy bip39 with modern @scure/bip39 for ESM compatibility - Configure Node.js memory allocation for large builds - Set up proper development and production build workflows ## Technical Improvements: - Modern ESM-native dependencies (@scure/bip39 vs bip39) - Faster builds with Vite vs webpack - Hot module replacement in development mode - Simplified configuration (80% reduction in build config complexity) - Automatic Chrome extension loading in dev mode ## Build System: - Development: `pnpm dev` (auto-loads extension with HMR) - Static builds: `pnpm build:dev` and `pnpm build:pro` - Increased Node.js heap size to handle large dependency graphs - Uses WXT default .output folder structure ## Dependencies: - Added: @scure/bip39 (modern, audited, ESM-native) - Removed: bip39 (legacy CommonJS package) - Updated: All import statements across 5 files for new BIP39 API ## Files Modified: - Entry points: background, content, popup, notification, options - Services: keyring, googleDrive, wallet controller - UI: Welcome/Sync, api-test pages - Config: wxt.config.ts, package.json, gitignore The extension now runs on modern WXT + Vite infrastructure with significant performance and developer experience improvements. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Closes #1173

- Remove duplicate content_scripts entries from manifest templates - Let WXT auto-generate content script manifest entries instead of using static template - Update content script matches to align with original webpack configuration - Configure proper content script loading with file://*/*, http://*/*, https://*/* This fixes the "couldn't find content-script.js" error by allowing WXT to properly manage content script entries in the manifest instead of conflicting with static template definitions. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Closes #1173

…gration - Update root package.json dev script to use WXT dev server instead of build - Add build:dev and build:pro scripts to root for convenience - Update pnpm-lock.yaml with new @scure/bip39 dependency changes - Update .gitignore to exclude .output directory from version control These changes complete the integration of WXT build system at the monorepo level, providing proper development and build workflows from the root directory. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Closes #1173

- Map FB_* environment variables to correct process.env names in WXT config - Add missing environment variables: WC_PROJECTID, MIXPANEL_TOKEN, API_* variables - Fix Firebase config variables to match original code expectations - Ensure background service worker has access to all required environment variables This resolves background script initialization issues by providing the correct environment variables that the Firebase config and other services require. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Closes #1173

- Fix 'window is not defined' error in service worker by providing globalThis fallback - Remove problematic file:// pattern from content script matches (not supported) - Configure worker format and build settings for service worker compatibility - Update content script to only match http:// and https:// URLs These changes resolve the runtime errors preventing the background service worker from initializing properly and fix content script pattern matching issues. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Closes #1173

github-actions · 2025-07-15T02:06:43Z

PR Summary

Migrated the build system from webpack to WXT (Web Extension Tools) using Vite. Updated dependencies including replacing legacy bip39 with modern @scure/bip39. Configured proper service worker and content script handling, environment variables, and build settings.

Changes

File	Summary
`.gitignore`	Added `.output` directory to gitignore to exclude WXT build output
`apps/extension/.gitignore`	Added `.wxt` directory to extension-specific gitignore to exclude WXT cache files
`apps/extension/_raw/manifest/manifest.dev.json`	Removed static content_scripts configuration to let WXT handle content script registration dynamically
`apps/extension/_raw/manifest/manifest.pro.json`	Removed static content_scripts configuration to let WXT handle content script registration dynamically
`apps/extension/eslint.config.mjs`	Added WXT-specific ESLint configuration including globals and import rules for WXT entrypoints
`apps/extension/package.json`	Replaced webpack with WXT/Vite, updated scripts and dependencies including @scure/bip39. Added new build commands and configurations.
`apps/extension/public/_locales`	Added localization files for English, Japanese, Russian and Chinese translations
`apps/extension/public/fonts`	Added e-Ukraine font family files in various weights
`apps/extension/public/images`	Added extension icon assets in various sizes
`apps/extension/public/script.js`	Added script to inject Flow Client Library service configuration
`apps/extension/src/background/controller/wallet.ts`	Replaced bip39 import with @scure/bip39 and added English wordlist import
`apps/extension/src/core/service/googleDrive.ts`	Replaced bip39 import with @scure/bip39 and added English wordlist import in Google Drive service

autogenerated by presubmit.ai

github-actions

🚨 Pull request needs attention.

Review Summary

Commits Considered (11)

674a6b2: fix: Correct environment variable mapping for WXT build system
Map FB_* environment variables to correct process.env names in WXT config
Add missing environment variables: WC_PROJECTID, MIXPANEL_TOKEN, API_* variables
Fix Firebase config variables to match original code expectations
Ensure background service worker has access to all required environment variables

This resolves background script initialization issues by providing the correct
environment variables that the Firebase config and other services require.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Closes #1173

91f3de3: chore: Update root package.json scripts and dependencies after WXT migration
Update root package.json dev script to use WXT dev server instead of build
Add build:dev and build:pro scripts to root for convenience
Update pnpm-lock.yaml with new @scure/bip39 dependency changes
Update .gitignore to exclude .output directory from version control

These changes complete the integration of WXT build system at the monorepo level,
providing proper development and build workflows from the root directory.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Closes #1173

7a5e022: fix: Resolve content script configuration for WXT build system
Remove duplicate content_scripts entries from manifest templates
Let WXT auto-generate content script manifest entries instead of using static template
Update content script matches to align with original webpack configuration
Configure proper content script loading with file:///, http:///, https:///

This fixes the "couldn't find content-script.js" error by allowing WXT to properly
manage content script entries in the manifest instead of conflicting with static
template definitions.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Closes #1173

8070e26: feat: Complete webpack to WXT migration with modern dependencies

This commit completes the migration from webpack to WXT build system:

Major Changes:

Replace webpack build system with WXT framework using Vite
Migrate all entry points to WXT convention-based structure
Replace legacy bip39 with modern @scure/bip39 for ESM compatibility
Configure Node.js memory allocation for large builds
Set up proper development and production build workflows

Technical Improvements:

Modern ESM-native dependencies (@scure/bip39 vs bip39)
Faster builds with Vite vs webpack
Hot module replacement in development mode
Simplified configuration (80% reduction in build config complexity)
Automatic Chrome extension loading in dev mode

Build System:

Development: pnpm dev (auto-loads extension with HMR)
Static builds: pnpm build:dev and pnpm build:pro
Increased Node.js heap size to handle large dependency graphs
Uses WXT default .output folder structure

Dependencies:

Added: @scure/bip39 (modern, audited, ESM-native)
Removed: bip39 (legacy CommonJS package)
Updated: All import statements across 5 files for new BIP39 API

Files Modified:

Entry points: background, content, popup, notification, options
Services: keyring, googleDrive, wallet controller
UI: Welcome/Sync, api-test pages
Config: wxt.config.ts, package.json, gitignore

The extension now runs on modern WXT + Vite infrastructure with
significant performance and developer experience improvements.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Closes #1173

cd4d53d: fix: Simplify Vite configuration for React
Remove unnecessary commonjs plugin (React works fine with Vite)
Simplify optimizeDeps configuration
Add bip39 to optimizeDeps.include
Fix eslint warnings about unused parameters
Remove process alias as it's handled by nodePolyfills

Closes #1173

25f771b: fix: Configure process polyfill for Vite build
Update inject plugin to use process/browser
Add process alias to resolve configuration
Define DEPLOYMENT_ENV and IS_BETA environment variables
Attempt to fix console-log.ts process import issue

Closes #1173

b6f749e: fix: Resolve module resolution issues and TypeScript config
Add commonjs plugin for React/React Router module resolution
Update TypeScript config to include wxt.config.ts
Fix WXT hook parameter types
Configure Vite for better CommonJS/ESM interop
Add React dedupe and optimize deps configuration
Remove debug console logs to fix eslint warnings

Closes #1173

8bf12e3: fix: Update WXT imports and React Router configuration
Use #imports module for WXT APIs (defineBackground, defineContentScript)
Update react-router imports from react-router-dom to react-router for v7
Fix deprecated runner config to webExt
Add React dependencies to optimizeDeps.include
Add .wxt to gitignore and remove from tracking

Closes #1173

fa8361c: feat: Migrate entry points and static assets to WXT structure
Create WXT-compatible entrypoints for background, content scripts, popup, notification, and options
Move static assets (_locales, images, fonts) to public directory
Copy script.js and wallet-core.wasm to public directory
Update entry points to use WXT's defineBackground and defineContentScript APIs
Use proper consoleLog utility instead of console.log

Closes #1173

ef7c419: feat: Add WXT configuration and update build scripts
Install WXT, Vite, and required plugins
Create initial wxt.config.ts with polyfills and aliases
Update package.json scripts to use WXT commands
Configure environment variables and manifest generation

Closes #1173

4ef9cf6: docs: Add WXT migration analysis and plan documentation

Closes #1173

Files Processed (30)

.gitignore (1 hunk)
apps/extension/.gitignore (1 hunk)
apps/extension/_raw/manifest/manifest.dev.json (1 hunk)
apps/extension/_raw/manifest/manifest.pro.json (1 hunk)
apps/extension/package.json (7 hunks)
apps/extension/public/_locales/en/messages.json (1 hunk)
apps/extension/public/_locales/ja/messages.json (1 hunk)
apps/extension/public/_locales/ru/messages.json (1 hunk)
apps/extension/public/_locales/zh_CN/messages.json (1 hunk)
apps/extension/public/fonts/e-Ukraine-Bold.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-Light.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-Medium.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-Regular.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-Thin.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-UltraLight.otf (0 hunks)
apps/extension/public/images/icon-128.png (0 hunks)
apps/extension/public/images/icon-16.png (0 hunks)
apps/extension/public/images/icon-19.png (0 hunks)
apps/extension/public/images/icon-256.png (0 hunks)
apps/extension/public/images/icon-32.png (0 hunks)
apps/extension/public/images/icon-38.png (0 hunks)
apps/extension/public/images/icon-48.png (0 hunks)
apps/extension/public/images/icon-512.png (0 hunks)
apps/extension/public/images/icon-64.png (0 hunks)
apps/extension/public/images/icon_iphone_29.png (0 hunks)
apps/extension/public/script.js (1 hunk)
apps/extension/public/wallet-core.wasm (0 hunks)
apps/extension/src/background/controller/wallet.ts (2 hunks)
apps/extension/src/core/service/googleDrive.ts (3 hunks)
apps/extension/src/core/service/keyring/index.ts (3 hunks)

Actionable Comments (2)

apps/extension/public/script.js [7-8]

possible issue: "Hardcoded extension ID in service endpoint URL"
apps/extension/public/script.js [11-12]

possible issue: "Hardcoded wallet address in service configuration"

Skipped Comments (1)

apps/extension/src/background/controller/wallet.ts [3-5]

enhancement: "Update BIP39 library import to use more secure implementation"

github-actions · 2025-07-15T02:07:26Z

+  endpoint: 'chrome-extension://hpclkefagolihohboafpheddmmgdffjm/popup.html',
+  method: 'EXT/RPC',


The extension ID is hardcoded in the endpoint URL. This could cause issues if the extension ID changes between environments or distributions. Consider making this configurable or dynamically determined.

github-actions · 2025-07-15T02:07:26Z

+    address: '0x33f75ff0b830dcec',
+  },


The wallet address is hardcoded in the service configuration. This should be dynamically set based on the user's actual wallet address rather than using a static value.

- Add WXT-specific entry points configuration to ESLint for improved linting of source files - Include WXT globals in TypeScript configuration to support new imports - Update TypeScript paths to recognize #imports for WXT compatibility - Ensure proper type definitions for WXT in the TypeScript setup These changes enhance the development experience by aligning ESLint and TypeScript settings with the WXT build system requirements. Closes #1173

github-actions

🚨 Pull request needs attention.

Review Summary

Commits Considered (2)

0b38310: chore: Update ESLint and TypeScript configurations for WXT integration
Add WXT-specific entry points configuration to ESLint for improved linting of source files
Include WXT globals in TypeScript configuration to support new imports
Update TypeScript paths to recognize #imports for WXT compatibility
Ensure proper type definitions for WXT in the TypeScript setup

These changes enhance the development experience by aligning ESLint and TypeScript settings with the WXT build system requirements.

Closes #1173

862f2b6: fix: Resolve service worker and content script runtime errors
Fix 'window is not defined' error in service worker by providing globalThis fallback
Remove problematic file:// pattern from content script matches (not supported)
Configure worker format and build settings for service worker compatibility
Update content script to only match http:// and https:// URLs

These changes resolve the runtime errors preventing the background service worker
from initializing properly and fix content script pattern matching issues.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Closes #1173

Files Processed (30)

.gitignore (1 hunk)
apps/extension/.gitignore (1 hunk)
apps/extension/_raw/manifest/manifest.dev.json (1 hunk)
apps/extension/_raw/manifest/manifest.pro.json (1 hunk)
apps/extension/eslint.config.mjs (1 hunk)
apps/extension/package.json (7 hunks)
apps/extension/public/_locales/en/messages.json (1 hunk)
apps/extension/public/_locales/ja/messages.json (1 hunk)
apps/extension/public/_locales/ru/messages.json (1 hunk)
apps/extension/public/_locales/zh_CN/messages.json (1 hunk)
apps/extension/public/fonts/e-Ukraine-Bold.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-Light.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-Medium.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-Regular.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-Thin.otf (0 hunks)
apps/extension/public/fonts/e-Ukraine-UltraLight.otf (0 hunks)
apps/extension/public/images/icon-128.png (0 hunks)
apps/extension/public/images/icon-16.png (0 hunks)
apps/extension/public/images/icon-19.png (0 hunks)
apps/extension/public/images/icon-256.png (0 hunks)
apps/extension/public/images/icon-32.png (0 hunks)
apps/extension/public/images/icon-38.png (0 hunks)
apps/extension/public/images/icon-48.png (0 hunks)
apps/extension/public/images/icon-512.png (0 hunks)
apps/extension/public/images/icon-64.png (0 hunks)
apps/extension/public/images/icon_iphone_29.png (0 hunks)
apps/extension/public/script.js (1 hunk)
apps/extension/public/wallet-core.wasm (0 hunks)
apps/extension/src/background/controller/wallet.ts (2 hunks)
apps/extension/src/core/service/googleDrive.ts (3 hunks)

Actionable Comments (1)

apps/extension/src/background/controller/wallet.ts [3351-3351]

possible bug: "Variable used before assignment"

Skipped Comments (2)

apps/extension/public/script.js [7-7]

best practice: "Hardcoded extension ID should be made configurable"
apps/extension/public/script.js [11-12]

best practice: "Hardcoded wallet address should be dynamic"

github-actions · 2025-07-15T02:15:25Z


  uploadMnemonicToGoogleDrive = async (mnemonic: string, username: string, password: string) => {
-    const isValidMnemonic = bip39.validateMnemonic(mnemonic);
+    const isValidMnemonic = bip39.validateMnemonic(mnemonic, wordlist);


The mnemonic validation result is used before being assigned. The isValidMnemonic variable should be declared with const before the if statement to avoid potential undefined behavior.

Closes #1173

github-actions

✅ LGTM!

Review Summary

Commits Considered (1)

a6a8f27: Update tsconfig and main entry

Closes #1173

Files Processed (0)

Actionable Comments (0)

Skipped Comments (0)

tombeckenham added 12 commits July 15, 2025 07:11

docs: Add WXT migration analysis and plan documentation

4ef9cf6

Closes #1173

feat: Add WXT configuration and update build scripts

ef7c419

- Install WXT, Vite, and required plugins - Create initial wxt.config.ts with polyfills and aliases - Update package.json scripts to use WXT commands - Configure environment variables and manifest generation Closes #1173

fix: Configure process polyfill for Vite build

25f771b

- Update inject plugin to use process/browser - Add process alias to resolve configuration - Define DEPLOYMENT_ENV and IS_BETA environment variables - Attempt to fix console-log.ts process import issue Closes #1173

tombeckenham linked an issue Jul 15, 2025 that may be closed by this pull request

[TASK] Replace Webpack #1173

Closed

github-actions Bot reviewed Jul 15, 2025

View reviewed changes

tombeckenham had a problem deploying to development July 15, 2025 02:14 — with GitHub Actions Failure

github-actions Bot reviewed Jul 15, 2025

View reviewed changes

Update tsconfig and main entry

a6a8f27

Closes #1173

tombeckenham had a problem deploying to development July 15, 2025 02:36 — with GitHub Actions Failure

github-actions Bot reviewed Jul 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

1173-task-replace-webpack#1176

1173-task-replace-webpack#1176
tombeckenham wants to merge 14 commits into
devfrom
1173-task-replace-webpack

tombeckenham commented Jul 15, 2025

Uh oh!

github-actions Bot commented Jul 15, 2025 •

edited

Loading

Uh oh!

github-actions Bot left a comment

Uh oh!

github-actions Bot Jul 15, 2025

Uh oh!

github-actions Bot Jul 15, 2025

Uh oh!

github-actions Bot left a comment

Uh oh!

github-actions Bot Jul 15, 2025

Uh oh!

github-actions Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		endpoint: 'chrome-extension://hpclkefagolihohboafpheddmmgdffjm/popup.html',
		method: 'EXT/RPC',

Uh oh!

Conversation

tombeckenham commented Jul 15, 2025

Related Issue

Summary of Changes

Need Regression Testing

Risk Assessment

Additional Notes

Screenshots (if applicable)

Uh oh!

github-actions Bot commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Changes

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Review Summary

Major Changes:

Technical Improvements:

Build System:

Dependencies:

Files Modified:

Uh oh!

github-actions Bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Review Summary

Uh oh!

github-actions Bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Review Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

github-actions Bot commented Jul 15, 2025 •

edited

Loading