I am going to assume you are on Windows, because I am, and if not, I hope you know the analogues for what I am talking about, too.
So I created a spotify plugin pack file :
https://dl.dropboxusercontent.com/u/50769577/spotify.rar (9 kilobytes) (make sure you edit the URL in the package.json file as it currently points to MY spotify page)
http://pastebin.com/hNBYce6f (main.js unpacked/unobfuscated + already pre-edited for 64-bit Flash on Windows)
http://pastebin.com/hByDUD0i (integrationClass.js unpacked/unobfuscated + already pre-edited to remove the bug)
https://dl.dropboxusercontent.com/u/50769577/pepflashplayer64_23_0_0_207.dll (30MB) Pepper Flash 64 bit for windows, version 23.0.0.207
The spotify plugin gets extracted to its own spotify dir inside C:\Users\?????\AppData\Roaming\Franz\Plugins\
Currently with Franz 4.0.4, this is not enough, as you will quickly find out, Flash is not enabled.
Electron supports Flash, but since you have to edit Franz, not everyone can figure it out,
Here is how to edit Franz (complicated, hope you can follow):
1. Go to C:\Users\????\AppData\Local\Franz\app-4.0.4\resources\
2. You will find a few .asar files in there, we are interested in app.asar
2b. Go ahead and delete the pre-existing app.asar.unpacked folder to avoid confusion, as it is a partial duplicate
3a. you will NEED to unpack it with an asar unpacker, which is available through installing node.js:
(sorry I don't have a better way to do this)
3b. Open a command and navigate to the directory above, from this dir, install Asar (link to github) by typing: npm i -g asar
4. Run this command to extract the app.asar file to the "app" dir (has to be named this):
asar e app.asar app
5. The good thing is that now you can run Franz with the asar resources unpacked forever. (the app directory should take precedence over the app.asar file)
6. The .JS files in here are highly obfuscated and you will have a hard time doing much with them besides investigating the structure for now...
Launching Franz.exe sets off a chain reaction where Electron loads main.js, which loads index.html (and pulls css from css\main.css) We need to edit main.js
7. If you open up main.js in Notepad++ you will see its a mess of gobbledygook.
8. Go ahead and visit http://jsbeautifier.org/ and accept all the default options (most notably "detect packers") and paste the entire file into there, hit the "Beautify" button and it will spit out human-readable code (enough).
9. Delete the contents of main.js and Paste the contents back into main.js to replace everything that was there (obviously)
10. We need to replace line 17, the last line of the "window options" (they need to have this added),make sure you have included the comma at the end of title: 'Franz,' to continue the block. :
title: 'Franz',
webPreferences: {
plugins: true
}
//enable "plugins" for flash.
11. Now scroll down to about line 173. You will see, something that says n['on']('ready').
This is the point (Insert directly ABOVE the On ready line) at which you will tell Franz where the plugin is and that it should load it, with the following two lines of code:
//ENABLE ADOBE FLASH PLUGIN (64-bit Windows)
n.commandLine.appendSwitch('ppapi-flash-path', './resources/app/pepflashplayer64_23_0_0_207.dll');
n.commandLine.appendSwitch('ppapi-flash-version', '23.0.0.207');
//thats it.
12. Obviously now you may be wondering, where did I get this .dll file? You likely already have it on your hard drive in multiple places.
First check in C:\Windows\SysWOW64\Macromed\Flash\ (for 32-bit Franz.exe - yes SysWOW64 is backwards and it means 32)
Or C:\Windows\System32\Macromed\Flash\ for 64-bit Franz (on an x64 system). This matters. You can tell by the filename, The filename is approximately (depending on the version, just pick w hatever version you find): pepflashplayer64_23_0_0_207 (30MB for 64bit) and pepflashplayer32_23_0_0_207.dll (17MB for 32-bit)
The other place it could be is: C:\Users\?????\AppData\Local\Google\Chrome\User Data\PepperFlash\23.0.0.207\pepflashplayer.dll or if you have Chrome installed to program files, the same approximate location there. If you are on a mac or linux you will need the appropriate plugin.
If you can't find it at all well, its officially obtained by downloading Flash from here: https://get.adobe.com/flashplayer/?fpchrome
Make sure you get the "System" plugin, not the browser plugin (and dont click any of those extra MCafee crap things) My dropbox link above for it only exists temporarily, for simplicity.
Copy whichever file you need to C:\Users\????\AppData\Local\Franz\app-4.0.4\resources\app\
as this is the path i've referenced in the code above in step 11. If you need to change the filename, do so in the code above. The filenames just need to match.
13. The next file you need to edit is "lib\integrationClass.js" - it currently has a bug in it, and I have reported it.
Repeat the JS Beautifier.org steps you did before now to get this file in an editable form.
13b. The last few lines need to be changed : Please follow along here: https://github.com/meetfranz/plugins/issues/84
OR if it fixed (possibly) by the time you read this, you don't need to
14. Now you should be able to run flash! Load up the spotify plugin and test it out!
If you want the files, they are hosted above.
If you have any questions, message me on Discord @ genr8_#8163
Sources: https://github.com/electron/electron/blob/master/docs/tutorial/using-pepper-flash-plugin.md
https://github.com/meetfranz/plugins/blob/develop/docs/integration.md
https://github.com/meetfranz/plugins/blob/develop/docs/configuration.md
Helpful for further electron editing:
https://github.com/electron/electron/blob/master/docs/api/web-contents.md
https://github.com/electron/electron/blob/master/docs/api/web-view-tag.md
Next up in the Franz editing series will be the UI of Index.html and main.css
2 comments:
Do not go crazy trying to JSBeautify every little file because the conversion process is not perfect, and breaks many of the .js files. We happened to get lucky with the beautifier running right out of the box with these 2 files. With some of the other ones, I edited my own files manually in order to get them properly decoded and fully functional, and this is neither explainable nor advised, as any work you put in will be undone by updates pushed down the line.(you may want to rename Update.exe or Squirrel.exe - this should stop updates.)
It's nice that it works but as we need to edit Franz files directly (not for example override it from plugin level) it won't be really usable for non-tech folks as it will probably break on next Franz update. There is still room for improvement, as pepperflash library is not open source we could just load it depending on system from their respective path if it exists. Well, good job, but we will need some attention from Franz developers for this issue. If they won't implement such feature (at least ability to load flash/other 3rd library from plugin level) I will look for some other platform.
Post a Comment