devtools
devtools copied to clipboard
Published
20 hours ago •
vuejs
vuejs
how to use vue-devtools in chrome extension options page
failed to load virtual js files from vue-devtools when running in chrome extension page. how to specify injected js src with origin from dev server.
I am using wxt.dev to develop chrome extension, wxt.config.ts config like this,
// wxt.config.ts
import vueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
vue(),
vueDevtools()
]
})
something i found after start npx wxt on my project,
//.output/chrome-mv3/options.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<script type="module" src="/@id/virtual:vue-devtools-path:overlay.js"></script>
<script type="module" src="/@id/virtual:vue-inspector-path:load.js"></script>
....
as a result, request is failed
Request URL:
chrome-extension://amidodbgcdpbldlmccigekeemjhkkhlh/@id/virtual:vue-devtools-path:overlay.js
Referrer Policy:
strict-origin-when-cross-origin
it would be correct if the injected js src to be prepend with dev server, for example
<script type="module" src="http://localhost:3000/@id/virtual:vue-devtools-path:overlay.js"></script>
<script type="module" src="http://localhost:3000/@id/virtual:vue-inspector-path:load.js"></script>
