Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
honwhy opened this issue Dec 6, 2024 · 6 comments
Open

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

honwhy opened this issue Dec 6, 2024 · 6 comments
Labels
usage Usage issue/question vite scope: vite plugin

Comments

@honwhy
Copy link

honwhy commented Dec 6, 2024

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>
@alexzhang1030
Copy link
Member

If you are using WXT, try this

https://devtools.vuejs.org/help/faq#how-to-work-with-wxt

@alexzhang1030 alexzhang1030 added vite scope: vite plugin usage Usage issue/question labels Dec 6, 2024
@honwhy
Copy link
Author

honwhy commented Dec 7, 2024 •
edited
Loading

Yeah, I am using WXT, work around solution may like this adding another plugin,

export function vueDevtoolsHack(
  config: wxt.ResolvedConfig,
  getWxtDevServer: () => wxt.WxtDevServer | undefined,
): vite.Plugin {
  const server = getWxtDevServer?.()
  return {
    name: `md:vue-devtools-hack`,
    apply: `build`,
    transformIndexHtml: {
      order: `post`,
      handler(html) {
        const { document } = parseHTML(html)
        const inlineScripts = document.querySelectorAll(`script[src^='/@id/virtual:']`)
        inlineScripts.forEach((script) => {
          const src = script.getAttribute(`src`)
          const newSrc = `${server?.origin}${src}`
          script.setAttribute(`src`, newSrc)
        })
        const newHtml = document.toString()
        config.logger.debug(`Old HTML:\n${html}`)
        config.logger.debug(`New HTML:\n${newHtml}`)
        return newHtml
      },
    },
  }
}

@alexzhang1030
Copy link
Member

alexzhang1030 commented Dec 9, 2024 •
edited
Loading

We have supported this by configuring appendTo, which works out-of-box by passing to vite. If you have some other special cases, we can talk about them.

@honwhy honwhy mentioned this issue Dec 9, 2024
Open
@honwhy
Copy link
Author

honwhy commented Dec 9, 2024

Note that there is a slight difference in my setup: the entry point is dynamically added through a WXT hook.
https://github.com/doocs/md/blob/79477702d245b66ce1451ec99227d16e2f729e46/src/modules/build-extension.ts#L20

@alexzhang1030
Copy link
Member

This is your entry point I guess. Can you try it out?

image

@DES2048
Copy link

DES2048 commented Dec 24, 2024

Ufortunately setting appendTo: "/entrypoints/options/main.ts" doesnt working for me. Can you explain how to properly set this option? I tried to set appendTo starting with src: "/src/entrypoints/options/main.ts" and with full url: http://localhost:3000/src/entrypoints/options/main.ts". But it still doesnt work:(. But in rendered main.ts I saw that devtools imports is present:
import "/node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/vite-plugin-vue-devtools/src/overlay.js?__vue-devtools-next-resource"; import { createApp } from "/node_modules/.vite/deps/vue.js?v=1f931d2c"; import vuetify from "/src/plugins/vuetify.ts"; import Options2 from "/src/entrypoints/options/Options2.vue"; const app = createApp(Options2).use(vuetify); app.mount("#app"); import "/node_modules/.pnpm/[email protected][email protected]_@[email protected]_/node_modules/vite-plugin-vue-inspector/src/load.js";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
usage Usage issue/question vite scope: vite plugin
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@honwhy @DES2048 @alexzhang1030