Franz is an integrated chat program based on Electron (node.js + Chromium). It uses web frameworks to act as an application + a web browser. It comes with various services pre-installed, and you can add your own services with plugins. I wanted to add Spotify, but it required Flash and was not enabled by default.
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.mdhttps://github.com/meetfranz/plugins/blob/develop/docs/integration.mdhttps://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
