0 背景

从小学开始，我就很喜欢玩4399上的宠物连连看flash小游戏。

然而，因为flash的安全性等问题，很多浏览器都不再支持flash。比如chrome，自 2021 年起，在任何版本的 Chrome 中，Flash 内容（包括音频和视频）都将无法再正常播放，并且从v88起完全移除Flash插件的相关代码。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0FL9Hecf-1628325203452)(/static/2021/08/game.png)]

1 解决方案

因此，我想到了，利用 Electron ，指定一个低于v88的版本的chromium，使用 Pepper Flash 插件加载钟爱的flash小游戏，以供随时娱乐^ ^。

1.1 electron原理

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。它嵌入了 Chromium 和 Node.js，允许您使用 JavaScript、HTML 和 CSS 代码创建在Windows、 macOS和Linux上运行的跨平台应用。

按我的理解，就是利用Node.js创建一个服务，把开发者写好的网页部署到Node.js服务中，并在Chromium浏览器中打开这个网址。

1.2 主要代码

版本：项目中的electron版本为^11.4.7，chromium版本为87.0.4280.141。

在index.html，就只放一个宠物连连看flash小游戏。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>宠物连连看</title>
    <link rel="stylesheet" type="text/css" href="./electron/main.css" />
  </head>
  <body style="margin: 0;">
    <embed class="game" src="./electron/assets/game.swf"> </embed>
  </body>
</html>

在window.js中，实现创建窗口方法，打开index.html。

  
const { BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    useContentSize: true,
    webPreferences: {
      plugins: true,
    }
  });

  win.loadFile('index.html');
  const contents = win.webContents;
  contents.on("did-finish-load", () => {
    contents.insertCSS("html, body { height: 100vh; width: 100vw; }");
  });
}

module.exports = createWindow;

在plugins.js中，根据不同的操作系统引入不同的Pepper Flash 插件。

const getFlashPlugin = () => {
  if (process.platform === "win32") {
    if (process.arch === "x64") {
      return {
        pluginPath: "pepflashplayer64_34_0_0_164.dll",
        version: "34.0.0.164",
      };
    }

    return {
      pluginPath: "pepflashplayer32_32_0_0_363.dll",
      version: "32.0.0.363",
    };
  }

  if (process.platform === "darwin") {
    return {
      pluginPath: "PepperFlashPlayer.plugin",
      version: "30.0.0.127",
    };
  }

  return null;
};

module.exports = {
  getFlashPlugin
};

在main.js中引入plugins.js和window.js并调用。

const { app, BrowserWindow } = require('electron');
const path = require('path');
const { getFlashPlugin } = require('./plugins'); 
const createWindow = require('./window'); 

// 获得系统里面flash插件的位置
const flashPlugin = getFlashPlugin();
let flashFlag = false;
if (flashPlugin) {
  const { pluginPath, version } = flashPlugin;
  app.commandLine.appendSwitch("ppapi-flash-path", path.join(__dirname, 'assets', pluginPath));
  app.commandLine.appendSwitch("ppapi-flash-version", version);
  flashFlag = true;
}

app.whenReady().then(() => {
  if (!flashFlag) {
    console.error('get flash plugin error');
  }
  console.log('chrome version: ', process.versions.chrome); //  Chromium v88 以上版本（包含 v88）内核的浏览器不再支持 Flash
  createWindow();
});

// 如果没有窗口打开则打开一个窗口 (macOS)
app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
});

// 关闭所有窗口时退出应用-windows--linux
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
});