How to connect dev-tools

[rendomnet]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

I'm using Vite-CRX with Vue and can't find a way to connect Vue DevTools to my extension. Is there any solution or documentation available for this?

Reproduction

1

Logs

2

System Info

latest

Severity

annoyance

[MishaYanov]

Using other extensions within your popup window is not allowed because it would imply that an extension, which is a standalone bundle, shares a direct connection with another extension, posing a severe security risk. This is due to Chrome's strict Content Security Policy (CSP) restrictions, not an issue with this repository.

Here's what you can try:

1. Download and Build Standalone Vue Devtools:

   • Visit: Vue.js Devtools Releases.
   • Download the source code and extract it.
   • Follow the instructions in installation.md to generate a standalone Electron app for Vue Devtools.
   • Add <script src="http://localhost:8098"></script> to the head of your HTML file.

2. Update Your Manifest JSON:

   • Include localhost permissions:

     "host_permissions": [
     "http://localhost/*",
     ],
     "content_security_policy": {
     "extension_pages": "script-src 'self' http://localhost:8098; object-src 'self'"
     }

3. The eval Issue:

   • Although you might attempt to add 'unsafe-eval' to your CSP:

     "extension_pages": "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"

     Chrome's extension security policy (especially in Manifest V3) typically disallows unsafe-eval. Vue Devtools uses eval internally, which will likely lead to issues if you try to run it within a Chrome extension.

Alternatives:

• Proxy Tools: Consider using a tool like ngrok to proxy your localhost environment to a public, secure URL. This allows you to bypass some of the strict CSP restrictions.
• Develop in a Regular Browser Tab: For development, it’s often easier and more effective to work within a standard browser tab. Vue Devtools can be fully utilized here without the CSP limitations imposed by Chrome extensions.

Summary:

While there are workarounds, developing and debugging your Vue.js application outside the Chrome extension environment is often the most effective approach. This ensures that you can use tools like Vue Devtools without running into CSP-related issues.

[rendomnet]

@MishaYanov Manifest v3 prohibits the use of unsafe-eval, rendering the primary method you provided ineffective. It will only confuse another developers that will visit this page.

[Toumash]

My solution was working up until the last update - you could try to update the patch provided. You can find the solution, explanation, code, patch in the readme https://github.com/Toumash/crxjs-vite-plugin-react-devtools

It has one flaw - HMR does not work with it