Cannot load Vue devtools

[Lothindir]

Hey, I tried to add the vue devtools from @MarshallOfSound/electron-devtools-installer. I also installed the @types/electron-devtools-installer.

I took your template and added this line at the top of src.mainproc/main.ts :

import installExtension, { VUEJS_DEVTOOLS} from 'electron-devtools-installer';

and these lines in the same file :

app.on('ready', function() {
  // ...intercept file protocol
  createMainWindow();
  
  if (process.env.NODE_ENV !== 'production') {            
      installExtension(VUEJS_DEVTOOLS)
          .then((name: any) => console.log(`Added Extension:  ${name}`))
          .catch((err: any) => console.log('An error occurred: ', err));
  }
});

But when I launch the app in dev mode the devtools don't load. The Vue tab doesn't appear in the Developer Tools in electron.

I also tried with REDUX_DEVTOOLS and it works.
I disabled dark mode bc I know it caused issues in the past.
Win ver : 10 20H2

Am I missing something ? Ty

[shellyln]

vuejs/vue-devtools seems to use chrome.runtime.getURL() and accept permission file:///* in the manifest.
(and redux-devtools-extension doesn't use it.)

Please comment out protocol.interceptFileProtocol('file', ...) and check Vue devtools appears or not.
(I have not installed and checked it.)

// src.mainproc/main.ts

// protocol.interceptFileProtocol('file', (req, callback) => {
//     ...
// });

[ksta-2]

HI, I've also been trying to get it to work for two days now, but unfortunately it's not working.

I tried to comment the "interceptFileProtocol" but I have loading errors (image 1).

Then I tested several ways but always the same problem the library load well but in the inspector I always have the indication to download dev-tool while the loading of is a success.(image 2)

could you help me to make it work? A big congratulations for this starter that I appreciate very much it would just miss the dev-tool to improve the development of the application :) Thanks again.

try {
    var result = await mainWindow.webContents.session.loadExtension(path.resolve(__dirname, '../src.mainproc/lib/vue-devtools/nhdogjmejiglipccpnnnanhbledajbpd'));
    if (result) {
          console.log("success load : " + result)
    }
} catch (e) {
        console.error('Vue Devtools failed to install:', e.toString())
}

>

[shellyln]

Maybe you can use devtools if you set Content Security Policy.

vue-electron-typescript-quickstart/src.mainproc/windows/MainWindow.ts

Lines 52 to 71 in 523b911

	responseHeaders: {
	...headers,
	'content-security-policy': [
	`default-src 'none';` +
	`frame-ancestors 'none';`,
	],
	},
	});
	});
	} else {
	// NOTE: Remove CSP to use devtools.
	// Refused to load the script 'devtools://devtools/bundled/shell.js'
	// because it violates the following Content Security Policy directive: "default-src 'none'.
	mainWindow.webContents.session.webRequest.onHeadersReceived((details: any, callback: any) => {
	callback({
	responseHeaders: {
	...details.responseHeaders,
	},
	});
	});

How about changing this to the following?

https://github.com/shellyln/mdne-electron/blob/34f062125a8f7048cfc005f731be881852a3d746/src.mainproc/windows/MainWindow.ts#L71-L85