More than 5 years have passed since last update.

[Electron] webviewタグの使い方

Electron

Posted at 2018-05-29

概要

Electronでwebviewタグの使い方を試すのに、簡易ブラウザーを作成してみる。

任意のページを開く
入力フォームにURLを入力してEnterキー
入力したURLを<webview>で読込み
Developer Toolsを開く
入力フォームにdevtoolsを入力してEnterキー
<webview>のDeveloper Toolsを開く
ナビゲーション
<ボタンで戻る、>ボタンで進む、Reloadボタンで再読込み
Flash Player Pluginを有効にする

環境

macOS High Sierra 10.13.4
Electron v2.0.2

ファイル構成

package.json
app.js
index.html
style.css
plugin/PepperFlashPlayer.plugin

実装

package.json

{
  "name": "BrowserDemo",
  "version": "1.0.0",
  "description": "Browser demo",
  "main": "app.js",
  "scripts": {
    "start": "electron app.js"
  },
  "devDependencies": {
    "electron": "^2.0.2"
  }
}

app.js

const path = require('path')
const url = require('url')
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

let mainWindow
let pluginName
switch (process.platform) {
  case 'win32':
    pluginName = 'pepflashplayer.dll'
    break
  case 'darwin':
    pluginName = 'PepperFlashPlayer.plugin'
    break
  case 'linux':
    pluginName = 'libpepflashplayer.so'
    break
}

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
    }
  })
  mainWindow.on('closed', () => {
    mainWindow = null
  })
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
}

app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, 'plugin', pluginName))
app.on('ready', () => {
  createWindow()
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

style.css

html {
 width: 100%;
 height: 100%;
}
body {
 margin: 0; padding:0;
 height: 100%;
}
#header-container {
 position: fixed;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 40px;
 background-color: #EFF0EE;
}
#address-bar {
 position: fixed;
 padding: 5px;
 width: -webkit-calc(100% - 130px);
 max-height: 30px;
 background-color: #EFF0EE;
 color: #000000;
 display: block;
 white-space: nowrap;
}
#address-bar input {
 width: -webkit-fill-available;
 min-height: 20px;
 font-size: 14px;

}
#address-bar button {
 min-height: 20px;
 font-size: 14px;
}
#browser-container {
 margin-top: 40px;
 position: bottom;
 height: 100%;
}
#browser {
 height: 100%;
 width: 100%;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Browser Demo</title>
    <link rel="stylesheet" href="style.css">
    <script>
      onload = () => {
        const didNavigete = (event) => {
          document.getElementById('url').value = event.url
        }
        const webview = document.querySelector('webview')    
        webview.addEventListener('did-navigate', didNavigete)
      }
      goBack = () => {
        const webview = document.querySelector('webview')
        webview.goBack()
      }
      goForward = () => {
        const webview = document.querySelector('webview')
        webview.goForward()
      }
      reload = () => {
        const webview = document.querySelector('webview')
        webview.reload()
      }
      load = () => {
        const webview = document.querySelector('webview')
        const url = document.getElementById('url').value
        if (url == 'devtools') {
          openDevTools()
        }
        webview.loadURL(url)
      }
      go = () => {
        if (window.event.keyCode == 13) {
          load()
        }
      }
      openDevTools = () => {
        const webview = document.querySelector('webview')
        webview.openDevTools()
      }
    </script>
  </head>
  <body>
    <div id="header-container">
      <div id="address-bar">
        <button onclick="goBack();">&lt;</button>
        <button onclick="goForward();">&gt;</button>
        <button onclick="reload();">Reload</button>
        <input type="text" id="url" value="" onkeydown="go();"></input>
      </div>
    </div>
    <div id="browser-container">
      <webview id="browser" src="https://electronjs.org/" plugins></webview>
    </div>
  </body>

</html>

メモ

Flash Player Pluginを有効にする

ElectronでFlash Pluginを有効にする手順は、基本的には、Using Pepper Flash Pluginに記載の通りですが、Chrome 57からchrome://pluginsが廃止されてページが表示されなくなったので、Chromeから抜き出すのではなく、Flash Player Pluginをインストールをする。

Flash Player Pluginのダウンロード

PPAPIプラグインがインストールされているかを確認、インストールする。

システム環境設定 -> Flash Player -> 更新 -> 今すぐインストールをクリックする。
※ここページが開くと思うので、インストーラーをダウンロードして、インストールする。

Flash Player Pluginをインストールすれば、デフォルトではPPAPIプラグインは以下にインストールされるので、コピーする。
/Library/Internet Plug-Ins/PepperFlashPlayer/PepperFlashPlayer.plugin

PPAPIプラグインのパスを設定する

app.commandLine.appendSwitch（'ppapi-flash-path', <plugin path>）でPepperFlashPlayer.pluginのパスを指定する。

const app = electron.app

let pluginName
switch (process.platform) {
  case 'win32':
    pluginName = 'pepflashplayer.dll'
    break
  case 'darwin':
    pluginName = 'PepperFlashPlayer.plugin'
    break
  case 'linux':
    pluginName = 'libpepflashplayer.so'
    break
}
app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, 'plugin', pluginName))

<webview>タグにplugins属性を追加する。

<webview id="browser" src="https://www.adobe.com/software/flash/about/" autosize plugins></webview>`

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up