Running Flash App after EOL with Electron

Many companies using Flash in their websites are facing this problem because of Adobe Flash Player end-of-life (EOL). One solution is to build a new website to replace the Flash based website using modern web technologies like HTML5, CSS and JaveScripts. But if for any reason, this cannot be done before the EOL date, which is end of 2020, I have tested a workaround solution which can ‘extend’ Flash Player’s life even after 2020.

This solution uses Electron which is an open source and cross-platform framework for creating desktop applications with web technologies. One other option I have before I come across Electron was using Adobe Air to run my legacy Flash app as a native app. But I have used Google Map APIs which needs to run on JavaScript environments. Electron becomes the perfect candidate – it uses Chromium which use Flash Player plugin (PepperFlash) and it also uses Node.js which can run JavaScripts.

Next I’ll explain in step-by-step how to set up an Electron application to run my Flash legacy app.

  1. Setting up develop environments.

Follow the instruction from here to install Node.js and Electron.

  1. build your first Electron app.

Follow this tutorial to build a simple Electron app. The first Electron app file structure should look like this:

my-app/
├── package.json
├── main.js
└── index.html

I made only two changes to make it reference to my Flash app.

First, I need to physically add PepperFlash plugin to my Electron app.

my-app/
├── plugins/
    ├── PepperFlash.dll
├── package.json
├── main.js
└── index.html

Next, I need to tell the program to include Flash plugin. So in main.js, I added:

let pluginName;

switch (process.platform) {
  case "win32":
    pluginName = "plugins/PepperFlashPlayer.plugin";
    break;
  case "darwin":
    pluginName = "plugins/PepperFlashPlayer.plugin";
    break;
  case "linux":
    pluginName = "plugins/libpepflashplayer.so";
    break;
}
app.commandLine.appendSwitch(
  "ppapi-flash-path",
  path.join(__dirname, pluginName)
);

// Optional: Specify flash version, for example, v32.0.0.169
app.commandLine.appendSwitch("ppapi-flash-version", "32.0.0.169");
app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      plugins: true,
    },
  });

So far, I have included Flash plugin, but I haven’t tell Electron app how to run my Flash app. 

win.loadURL("http://www.myflashapp/index.html");

Now I can test my Electron app by:

npm start

I had a few trials and errors to get here. Hopefully this summary will help someone to save some time. What really makes me scratching my head was when everything was looking good and I used asar to package up my Electron app for distribution. Flash plugin stops working in asar archives. I tried many things but couldn’t make it work. Then I tried electron-packager which worked well and I only need to add one twist to main.js. This will help the executable to find Flash plugin.

let basename;
basename = path.basename(__dirname);
case "win32":
    if (basename === "resources") {
      pluginName = "../plugins/pepflashplayer.dll";
    } else {
      pluginName = "plugins/pepflashplayer.dll";
    }
    break;

Tags:
Share: