Browser extension V3 Manifest devtool

[MehdiMamas]

Will there be support for browser extensions?

I create chrome extensions and I find it difficult to not have the devtool. I tried to use the "standalone" version but in manifest V3 unsafe-eval is kind of banned? so we cannot unsafe-eval to use the standalone app.

Let me know if you guys have any other solutions I really need the devtool haha.

[alexzhang1030]

https://devtools-next.vuejs.org/guide/browser-extension

We have a beta version.

[MehdiMamas]

I did try it, but it's not working on my browser extension.

I mean while developing an extension and trying to use the tool on the popup, it doesnt work.

[alexzhang1030]

I see, which framework are you using?

[MehdiMamas]

You mean what Vue version? Vue 3

[alexzhang1030]

Is your issue that it’s not possible to use Vue Devtools while developing browser extensions? If that’s the case, we already have support for WXT.

[MehdiMamas]

That's a great framework to look into!
But, are native Vue 3 browser extensions not supported? or am I doing something wrong?

[alexzhang1030]

I guess you can config by devtools appendTooption like WXT:

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

// wxt.config.ts
import { defineConfig } from 'wxt'
import vue from '@vitejs/plugin-vue'
import devtools from 'vite-plugin-vue-devtools'

export default defineConfig({
  vite: () => ({
    plugins: [
      vue(),
      devtools({
        // your app entrypoint (wherever you call createApp())
        appendTo: '/entrypoints/popup/main.ts',
      }),
    ],
  }),
})

[MehdiMamas]

Hey @alexzhang1030 ,

Thank for your message, my guess that this is for vite, I am looking for native Vue 3, something to use in vue.config.js.

Please let me know if you have any idea!

[alexzhang1030]

We plan to support webpack users, but now you can only use the standalone app to inspect your Vue CLI project.

For the docs click here

[gumingWu]

We plan to support webpack users, but now you can only use the standalone app to inspect your Vue CLI project.

For the docs click here

Hey bro, it's glad to see that you plan to support webpack!
Can you tell me when it will be supported?

[alexzhang1030]

You can use a standalone app or browser extension now.
We have discussed earlier, many features of vite-plugin-vue-devtools that rely upon the vite server/ecosystem, if we implement the integration of webpack, it should be the same as the standalone app, so webpack integration priority will be low.

[MehdiMamas]

Standalone doesn't work because extensions don't allow 'unsafe-eval' anymore, and it is required for the standalone devtool to work.

[alexzhang1030]

Can you share your minimal project setup? I will try to solve it on my local.

[MehdiMamas]

What portion would you like me to give you, because I can't share the project, I have just a vue.config.js where I configured what to build and what to do like manual, no framework just simple Vue 3.