refactor: webext - #530
Draft
webfansplz wants to merge 3 commits into
Draft
Conversation
@vitejs/devtools
@vitejs/devtools-kit
@vitejs/devtools-oxc
@vitejs/devtools-rolldown
@vitejs/devtools-vite
@vitejs/devtools-vitest
commit: |
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors the @vitejs/devtools-webext browser extension to use a Vite/Vue/UnoCSS client build, adds a zip packaging script, and updates DevTools’ remote-viewer plumbing (origin allowlisting, dock URL/icon resolution) to support extension-based viewers more cleanly.
Changes:
- Reworks
packages/webextbuild pipeline (Vite client +tsdownscripts) and adds azipbundling script with manifest validation. - Improves standalone/remote viewer support by resolving dock icons/URLs against the RPC server and by stripping/handling remote connection descriptors in iframe URLs.
- Adds viewer-origin registration/allowlisting for WS + connection-meta endpoint to enable extension viewers with controlled CORS.
Reviewed changes
Copilot reviewed 56 out of 70 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| turbo.json | Ensures webext build depends on upstream builds in Turbo pipeline. |
| tsconfig.json | Adds TS project reference for packages/webext. |
| pnpm-workspace.yaml | Adds archiver and @types/archiver to workspace catalogs. |
| pnpm-lock.yaml | Updates lockfile for new webext deps and related dependency bumps. |
| package.json | Adds root zip scripts to build and package the web extension. |
| test/snapshots/tsnapi/@vitejs/devtools/client/webcomponents.snapshot.js | Updates public snapshot exports to include new docks context API. |
| test/snapshots/tsnapi/@vitejs/devtools/client/webcomponents.snapshot.d.ts | Updates type snapshot exports to include createDocksContext. |
| test/snapshots/tsnapi/@vitejs/devtools-kit/client.snapshot.js | Updates kit client snapshot exports for new remote helpers. |
| test/snapshots/tsnapi/@vitejs/devtools-kit/client.snapshot.d.ts | Updates kit client type snapshot exports for new remote helpers. |
| packages/webext/vite.config.ts | Introduces Vite build config for extension HTML entrypoints. |
| packages/webext/uno.config.ts | Adds UnoCSS config aligned with shared DevTools UI theme/shortcuts. |
| packages/webext/tsdown.config.ts | Refactors script bundling config for browser-targeted extension scripts. |
| packages/webext/tsconfig.json | Updates TS config for browser/DOM libs and Vue SFC inclusion. |
| packages/webext/package.json | Updates scripts/deps for the new build + zip flow. |
| packages/webext/manifest.json | Updates MV3 manifest paths (devtools page, popup, icons). |
| packages/webext/scripts/zip.ts | Adds zip build script that validates manifest-required files. |
| packages/webext/scripts/build-app.ts | Removes legacy Nuxt-based app build script. |
| packages/webext/src/window.ts | Removes legacy webext-bridge window messaging implementation. |
| packages/webext/src/proxy.ts | Removes legacy content-script proxy implementation. |
| packages/webext/src/event.ts | Removes legacy webext-bridge event definitions. |
| packages/webext/src/devtools-panel.ts | Removes legacy devtools panel bootstrap/injection logic. |
| packages/webext/src/devtools-background.ts | Removes legacy devtools background page logic. |
| packages/webext/src/background.ts | Removes legacy background import stub. |
| packages/webext/popups/not-found.html | Removes old “Vite not detected” popup page. |
| packages/webext/pages/devtools-panel.html | Removes legacy panel HTML entry. |
| packages/webext/pages/devtools-background.html | Removes legacy background HTML entry. |
| packages/webext/app/shared/action-icon.ts | Adds action-icon helper toggling active/inactive icons. |
| packages/webext/app/scripts/devtools-bg.ts | Adds DevTools-side logic to create the panel when Devframe metadata is present. |
| packages/webext/app/scripts/content-scripts.ts | Placeholder/entrypoint for extension content scripts (as introduced in refactor). |
| packages/webext/app/scripts/background.ts | Adds service worker logic to detect Vite/DevTools presence and set action icon. |
| packages/webext/app/background/background.html | Adds extension devtools-page HTML that loads the built devtools script. |
| packages/webext/app/popup/popup.html | Adds new popup HTML entrypoint. |
| packages/webext/app/popup/main.ts | Adds Vue bootstrap for popup UI. |
| packages/webext/app/popup/App.vue | Adds popup UI that reports detection status and links to docs/repo. |
| packages/webext/app/popup/styles/main.css | Adds baseline popup styling. |
| packages/webext/app/panel/devtools-panel.html | Adds new panel HTML entrypoint. |
| packages/webext/app/panel/main.ts | Adds Vue bootstrap for devtools panel UI. |
| packages/webext/app/panel/App.vue | Implements panel viewer that connects via Devframe metadata + mounts standalone docks. |
| packages/webext/app/panel/inspected-window.ts | Reads Devframe connection info from the inspected page. |
| packages/webext/app/panel/inspected-window.test.ts | Tests inspected-page connection discovery/validation. |
| packages/webext/app/panel/rpc-connection.ts | Adds helper to await RPC connection readiness and surface failures early. |
| packages/webext/app/panel/rpc-connection.test.ts | Tests RPC readiness helper behavior. |
| packages/webext/app/panel/styles/main.css | Adds baseline panel styling and dark-mode scheme. |
| packages/kit/src/client/remote.ts | Removes redundant re-export shim in favor of direct exports. |
| packages/kit/src/client/remote.test.ts | Removes tests for the removed re-export shim. |
| packages/kit/src/client/index.ts | Re-exports remote helper APIs directly from @devframes/hub/client. |
| packages/kit/src/client/connection.ts | Adds support for remote connection descriptors when no explicit connection is supplied. |
| packages/kit/src/client/connection.test.ts | Adds tests for remote connection descriptor usage. |
| packages/core/src/node/ws.ts | Adds viewer origin registry integration for WS auth/origin validation and metadata. |
| packages/core/src/node/server.ts | Adds controlled CORS headers for connection meta endpoint using viewer origin registry. |
| packages/core/src/node/server.test.ts | Adds tests for CORS/origin registration behavior on connection meta endpoint. |
| packages/core/src/client/webcomponents/utils/iframe-url.ts | Adds helpers to derive origins used for dock iframe URL resolution. |
| packages/core/src/client/webcomponents/utils/iframe-url.test.ts | Tests origin resolution for current vs legacy connection metadata. |
| packages/core/src/client/webcomponents/state/dock-settings.ts | Drops empty collapsed groups before category bucket creation. |
| packages/core/src/client/webcomponents/state/tests/dock-groups.test.ts | Adds test coverage for empty-group dropping and default child behavior. |
| packages/core/src/client/webcomponents/state/context.ts | Resolves dock/launcher icons against the RPC server connection base. |
| packages/core/src/client/webcomponents/state/tests/context-cache.test.ts | Adds tests for icon resolution against the RPC server base URL. |
| packages/core/src/client/webcomponents/index.ts | Re-exports docks context creation API from webcomponents entry. |
| packages/core/src/client/webcomponents/components/views/ViewIframe.vue | Refactors iframe URL handling to use shared remote helpers and origin-aware resolution. |
| packages/core/src/client/inject/runtime.ts | Publishes a Devframe connection eagerly and adjusts mounting flow per mode. |
| packages/core/src/client/inject/runtime.test.ts | Updates tests to validate published Devframe connection and RPC client options. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+23
to
+27
| "build": "pnpm run build:scripts && pnpm run build:client", | ||
| "build:scripts": "tsdown", | ||
| "build:client": "vite build", | ||
| "watch": "tsdown --watch && vite build --watch", | ||
| "prepack": "pnpm build", |
Comment on lines
+155
to
+161
| const viewerOrigins = createWsOriginRegistry({ | ||
| allowedOrigins: (context.viteConfig.devtools?.config as DevToolsConfig | undefined)?.allowedOrigins, | ||
| validateOrigin(origin) { | ||
| const protocol = new URL(origin).protocol | ||
| return protocol === 'chrome-extension:' || protocol === 'moz-extension:' | ||
| }, | ||
| }) |
Comment on lines
+50
to
+59
| function setupConnection() { | ||
| return setupDevframeConnection({ | ||
| // Prefer the host page's origin. When the page is served by another | ||
| // backend, fall back to the Vite origin that loaded this module. | ||
| baseURL: [ | ||
| DEVTOOLS_MOUNT_PATH, | ||
| new URL(DEVTOOLS_MOUNT_PATH, import.meta.url).href, | ||
| ], | ||
| }) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.