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

[lbssousa]

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

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:

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: 'file-loader'
        })
      }
    },
    electron: {
      // (...)
      packager: {
        // (...)
        extraResource: [
          `${pluginDir(ctx)}/${pluginName(ctx)}`,
          `${pluginDir(ctx)}/manifest.json`
        ]
      }
    }
  }
}

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

import { app, BrowserWindow } from 'electron'
import path from 'path'
import fs from '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
    }
  })

  // (...)
}

// (...)

Hints

5. 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. See this example:

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

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