Skip to content

how to use vue-devtools in chrome extension options page #727

Open
@honwhy

Description

@honwhy

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    usageUsage issue/questionvitescope: vite plugin

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions