How to integrate Adobe Flash Plugin with Electron in your Quasar Framework project

Adobe Flash Plugin integration for Quasar Framework (Electron)

GENERAL INSTRUCTIONS
--------------------

1. Under your src-electron/ folder, create a folder called ppapi-flash-plugin and separate subfolders for your
   supported platforms (linux, win32, darwin) and architectures (ia32, x64).

2. Under each platform/architecture subfolder, put a copy of the plugin binary and manifest.json companion file.
   If needed, rename the binary files to pepflashplayer.dll (Windows), PepperFlashPlayer.plugin (macOS)
   or libpepflashplayer.so (Linux).

3. Set your quasar.conf.js file as follows.

4. Set your src-electron/main-process/electron-main.js file as follows.

HINTS
-----

5. If you intend to include local .swf files in your bundle, add swf-loader to your devDependencies
   (it has a peer dependency on openfl).

6. In your Vue component which will render the .swf media, use a <embed> tag for local files,
   or a <webview> tag for remote ones. In order to prevent cross-domain issues, avoid using <embed> for remote URLs.

electron-main.js

import { app, BrowserWindow } from 'electron'

// (...)

const path = require('path')
const fs = require('fs')

const pluginDir = process.env.PROD
  ? process.resourcesPath
  : path.resolve(__dirname, '..', 'ppapi-flash-plugin', process.platform, process.arch)

const pluginName =
  process.platform === 'win32'
    ? 'pepflashplayer.dll'
    : process.platform === 'darwin'
      ? 'PepperFlashPlayer.plugin'
      : 'libpepflashplayer.so'

app.commandLine.appendSwitch(
  'ppapi-flash-path',
  path.join(pluginDir, pluginName)
)

app.commandLine.appendSwitch(
  'ppapi-flash-version',
  JSON.parse(fs.readFileSync(path.join(pluginDir, 'manifest.json'))).version
)

// (...)

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    // (...)
    webPreferences: {
      plugins: true
    }
  })

  // (...)
}

// (...)

quasar.conf.js

const qTarget = ctx => ctx.targetName || process.platform

const qArch = ctx => ctx.archName || process.arch

const pluginDir = ctx =>
  `src-electron/ppapi-flash-plugin/${qTarget(ctx)}/${qArch(ctx)}`

const pluginName = ctx =>
  qTarget(ctx) === 'win32'
    ? 'pepflashplayer.dll'
    : qTarget(ctx) === 'darwin'
      ? 'PepperFlashPlayer.plugin'
      : 'libpepflashplayer.so'

module.exports = function (ctx) {
  return {
    // (...)
    build: {
      // (...)
      extendWebpack (cfg) {
        // (...)
        // Optional, only if you want to include local .swf files in your bundle.
        cfg.module.rules.push({
          test: /\.swf$/,
          loader: 'swf-loader'
        })
      }
    },
    electron: {
      // (...)
      packager: {
        // (...)
        extraResource: [
          `${pluginDir(ctx)}/${pluginName(ctx)}`,
          `${pluginDir(ctx)}/manifest.json`
        ]
      }
    }
  }
}

sample-page.vue

<template>
  <q-page>
    <webview v-if="onlineOnly" plugins :src="url" />
    <embed v-else src="statics/file.swf" wmode="transparent" allowNetworking="internal" />
  </q-page>
</template>

<script>
export default {
  name: 'PageSWFExample',
  props: {
    onlineOnly: Boolean,
    url: String
  }
}
</script>

<style scoped>
embed {
  display: block;
  height: calc(100vh - 50px);
  width: 100vw;
}

webview {
  height: calc(100vh - 50px);
}
</style>