PS-Edge(PowerShell+WebView2+WPF)用の基本ファイルセット

github にダウンロードして初期設定用のバッチを実行するだけで、
PowerShell+WebView2 を実行できるファイル群をアップロードしました。

• tkmry/PS-Edge_StarterKit
  https://github.com/tkmry/PS-Edge_StarterKit

■ 環境

下記環境にて動作を確認しています。

• Windows 10 Pro 21H2
• Windows 11 Home 21H2

■ 使い方

リポジトリ先から [Code]->[Download Zip] でファイルをダウンロードする。
展開後下記のファイルを順次実行する。

init.bat
boot.bat

• init.bat
  PowerShell が WebView2 を実行するためにライブラリを取得し適切な場所(スクリプトフォルダのlibフォルダ)に配置します。
• boot.bat
  PS-Edge_Default.ps1 を Window 非表示で起動します。

なお Windows 11 では標準コンソールを Windows Terminal に変更すると、
Window 非表示に対応していないため、少し邪魔かもしれません。

■ ファイル概要

PS-Edge_StarterKit

+ boot.bat  …  PS-Edge 起動用バッチファイル
+ init.bat  …  WebView2ライブラリ取得バッチ
+ LICENSE  …  MIT LICENSE
+ page01.html  …  WebView2 で初期に表示するページ
+ PS-Edge_Default.ps1  …  本体ファイル
+ README.md  …  Github でリポジトリトップで記載する内容
+ ui01.xaml  …  PowerShell による WPF で画面を構築する用の XAML ファイル
+ ilb  …  WebView2 ライブラリ(dll)の格納先。init.batで取得可能
+ data  …  WebView2 クライアントのデータ管理場所

■ 起動サンプル画面

■ コード内の重要なポイント

他の記事にも記載している部分もあるため、ご存知の範囲については読み飛ばしてください。

◇ 1. WebView2 の DLL 読み込み

[void][reflection.assembly]::LoadFile($libWebView2Wpf)
[void][reflection.assembly]::LoadFile($libWebView2Core)

DLL の読み込みは Add-Type ではなく reflection.assembly の LoadFile を利用する。

◇ 2. XAML による Window 構築

[xml]$xaml  = (Get-Content (Join-Path $PSScriptRoot "ui01.xaml"))
$nodeReader = (New-Object System.XML.XmlNodeReader $xaml)
$window     = [Windows.Markup.XamlReader]::Load($nodeReader)

Window や WebView2 の埋め込み(レイアウト)は XAML にて作成する。

◇ 3. PowrShell <-> WebView2 のメッセージング処理

PS-Edge_Default.ps1 (PowerShell側)

# メッセージの送信
$window.add_LocationChanged({
    param($event)
    $webview.CoreWebView2.PostWebMessageAsJson((@{xPos=$event.Left; yPos=$event.Top} | ConvertTo-Json))  # JSON データ用サンプル行
})

# メッセージの受信
$webview.add_WebMessageReceived({
    param($webview, $message)
    $json = ($message.WebMessageAsJson | ConvertFrom-Json)
    $window.Title = $json.PageTitle
})

PowerShell からメッセージ送信する際には JSON データ形式ではなく文字列形式で送信している。JSON 形式で送信する場合は PostWebMessageAsJSON を利用する。

page01.html (JavaScript側)

# メッセージ送信側
document.querySelector('#submitTitle').addEventListener('click', () => {
  window.chrome.webview.postMessage({PageTitle: document.querySelector('#inputTitle').value});
});

# メッセージ受信側
window.chrome.webview.addEventListener('message', function(event) {
  document.querySelector('#xPos').innerText = event.data.xPos;
  document.querySelector('#yPos').innerText = event.data.yPos;
});

メッセージングについて JavaScript 側のイベントリスナは受信データが event.data に格納されている。
メッセージの受信は設定した関数のみ起動されメッセージの送信側では受信側の関数を選べないので、複雑な処理を行う場合は data の中に目印用の値を入れて分岐するのが良さそうです。

■ おわりに

11か月前(2022年7月ごろ？)に下書きに入れていたようですが、公開するのを忘れていました。
今でも動作する事を確認し、個人的にも便利だったので記事として公開いたします。