Proposal: publish shell-chrome sub-package to npm.

[Tanimodori]

What problem does this feature solve?

I suggest to publish shell-chrome sub-package as a separate package to npm like shell-electron and api to help simplify the debugging of electron applications.

Normal web apps can easily access vue devtools by simply downloading it from browser extension market, but it is not the case for electron apps.

If you want to add vue devtools to the integrated devtools of electon, as the electron docs said, you need to get the unzipped form of crx extension, which is located in VUE_DEVTOOLS_PATH, and load by session.defaultSession.loadExtension

if (import.meta.env.DEV) {
  app.whenReady().then(() => {
    session.defaultSession.loadExtension(VUE_DEVTOOLS_PATH, {
      allowFileAccess: true,
    });
  });
}

Currently the only available distribution of latest compiled shell-chrome is at Chrome/Edge store:

• Chrome: https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3Dnhdogjmejiglipccpnnnanhbledajbpd%26uc&prodversion=32
• Edge: https://edge.microsoft.com/extensionwebstorebase/v1/crx?response=redirect&prod=chromiumcrx&prodchannel=&x=id%3Dolofadcdnkkjdfgjcmjaadnlehnnihnl%26installsource%3Dondemand%26uc

There are problems of downloading from such a store:

• Such a link schema may change over time causing tools broken.
• You need to wait until the new version of devtools passing vendor's check, like Latest version not available for firefox. #2023 .
• Google's Extension store is having difficulty connecting from some locations, due to well-known reasons. There's no mirror server for it.
• You need to unzip crx for the downloaded form.

That's what the good old electron-devtools-installer does which is unmaintained 2 years ago. Download from chrome store, put into %APPDATA%/extensions and load into electron devtools. You can loaded from locally installed extension from Chrome with:

if (import.meta.env.DEV) {
  app.whenReady().then(() => {
    if (!process.env['APPDATA']) {
      throw new Error('Could not load extensions from local');
    }
    const extPath = join(
      process.env['APPDATA'],
      '../Local/Google/Chrome/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd',
    );
    const extVersions = readdirSync(extPath);
    const VUE_DEVTOOLS_PATH = join(extPath, extVersions[0])
    session.defaultSession.loadExtension(VUE_DEVTOOLS_PATH, {
      allowFileAccess: true,
    });
  });
}

But you need to update using Chrome and still having update delays.

Publishing should be easy as to add pub:chrome command to package.json.

Currently @vue/devtools is not loadable by electron Chromium as it lacks manifest. I tried to load the artifact of building shell-chrome which works perfectly. As the package is published we can add it to devDependency and point VUE_DEVTOOLS_PATH to node_modules, which will get rid of tree-shaking problem.

Why not using @vue/devtools directly?

• It lists electron as dependency, which need to download ~100MB of latest electron.
• You need to open one more window than the integated electron devtools which is the same as developing web apps.
• JavaScript API uses eval which triggers warning "eval" warning during production build #2033 and having tree-shaking problem 生产环境带@vue/devtools-api #1932 import devtools from '@vue/devtools' gets into Vite production build #1961 生产环境仍然会带有devtools #1931