fix(webext): bridge tools to the inspected page - #563
Draft
SaKaNa-Y wants to merge 1 commit into
Draft
Conversation
Bind the DevTools panel to its inspected tab and exact document, and relay page actions and in-page channels through dedicated ports. This lets Vue Tracer and A11y operate on the user app instead of the extension iframe. Dispose connections on navigation and surface unsupported page bridges. Requires the companion Devframe bridge release before the downstream dependency upgrade and merge.
@vitejs/devtools
@vitejs/devtools-kit
@vitejs/devtools-oxc
@vitejs/devtools-rolldown
@vitejs/devtools-vite
@vitejs/devtools-vitest
commit: |
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
1 participant
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.
Description
Vue Tracer and A11y in the browser extension currently operate on the DevTools iframe instead of the inspected app. Bind the Vite panel to
chrome.devtools.inspectedWindow.tabIdand the injected main-framedocumentId, then relay page actions and in-page channel messages through dedicated ports.Validate the panel window, origin, and session before connecting. Tear down stale connections on navigation and report an unsupported page bridge instead of executing page tools in the panel document.
Linked Issues
Companion upstream PR: devframes/devframe#363. This follows the browser extension refactor in #530.
Additional context
Step 2 of 2: keep this PR in draft until the upstream release and dependency upgrade are complete.
Merge and release order:
The dependency bump is deliberately pending; a released version containing the upstream fix is not available yet. Local browser verification used the companion Devframe build. A fresh checkout with the current published dependency versions will report that the inspected-page bridge is unsupported.
Verification:
pnpm lint,pnpm typecheck, andpnpm build: passed.pnpm test --run: 324 passed, 2 skipped; includes 13 panel tests covering tab/document binding, handshake validation, message forwarding, navigation cleanup, and unavailable bridges.pnpm -C packages/webext exec vue-tsc --noEmitandpnpm -C packages/webext build: passed.http://localhost:5173/with the companion Devframe build: A11y scans and highlights the app, Vue Tracer displays component bounds and source locations, Escape closes tracing, refresh reconnects, and a second same-origin tab remains unaffected.