Double-click to open files into Electron app


#1

I’m trying to make an Electron app that will open custom filetypes. I’ve gotten it all working so that when you goto file>open it calls a function called open and does everything correctly. Now I want to move toward to make it where when you double-click one of these custom files (say, on their desktop) it will launch my app on a user’s computer. Does anyone know how I would go about doing that?


#2

That - as far as I know - depends on your OS. If you have a Windows system you need to make the correct registry entries for the file type, if you’re on Mac you need to place the information into the application manifest and on Linux it might be (not sure about that) even depending on the desktop environment used.

So usually you need to package your electron app into a distributable version (google for electron-packager) and have the proper scripts at hand to setup the distributable for each platform.


#3

@appelgriebsch: Thanks so much man! I think this gives me a good direction to point at!


#4

See:

Had to quote the link to get the editor to allow it. Since I am a new user, it is not allowing me to post a link


#5

Hi, Steve. Did you make it happen? I am facing the same problem now, My boss asked me to make sure about it. Hope you did it.


#6

I did… I didn’t try any of @frik protocol stuff. (because I think that is more custom _URL_s, (i.e. tweetbot://<screenname>/post) but I could be mistaken…)

Turns out Apple uses a plist to associate filetypes with apps. This plist is read and ‘activiated’ when an app is dragged into the Applications folder. So, you have to modify the plist. Trouble is, you have to do this before signing your app (if you’re doing that). I wrote a gulp task that does it for me. It runs after build but before signing. (replace all of the myfiletype's with your file extension)

gulp.task('app_plist', function() {
  return gulp.src('path/to/my.app/Contents/Info.plist')
    .pipe(peditor({
      CFBundleDocumentTypes: [{
        CFBundleTypeExtensions: ['myfiletype'],
        CFBundleTypeIconFile: 'my_icon.icns',
        CFBundleTypeName: 'public.myfiletype',
        CFBundleTypeRole: 'Editor',
        LSHandlerRank: 'Alternate',
        LSItemContentTypes: ['public.myfiletype']
      }],
      UTImportedTypeDeclarations: [{
        UTTypeConformsTo: ['public.data'],
        UTTypeIdentifier: 'public.myfiletype',
        UTTypeTagSpecification: {
          'com.apple.ostype': 'PDF',
          'public.filename-extension': ['myfiletype'],
          'public.mime-type': 'application/myfiletype'
        }
      }]
    }))
    .pipe(gulp.dest(function(data) {
      console.log("Writing to directory: " + data.base);
      return data.base;
    }));
});

Now files with your filetype will open your app. Now you just have to do the logic of reading the file.

Windows is a completely different beast. I haven’t tried any of this, but Windows uses registries to do all of this. Here is an article that I am going to follow next week to see if I can get it working… https://www.theodo.fr/blog/2015/12/link-files-to-application-in-windows/

Let me know if you get anywhere on this! Good luck!


#7

Thank you very much, you really save my life:relaxed:
I will report to you when I got something.

Right now, I am just doing research, we are still working on technology selection.
Good luck!


#8

Because of the tedious task of writing to the windows registry yourself I’ve created electron-regedit which is an easy and clean way of doing so. Regarding macOS the solution @steveostudios made is very good.


#9

This feature is now available in electron-builder:

Posting the link here because this thread is high on Google search results.