[electron] 試験運用版のウェブプラットフォームの機能を有効にする方法

#概要

  • Electronでbackdrop-filter を使いたい
    • 通常のChromeで使用する場合はchrome://flagsで有効にする必要があるが、Electronでは…?

#backdrop-filterとは

backdrop-filter – CSS | MDN – Mozilla Developer Network

backdrop-filter: <filter-function> [<filter-function>]* | none

#有効にする方法

#Google Chromeの場合

Chromeで有効にする場合は、 chrome://flags/#enable-experimental-web-platform-features にアクセスして有効化すれば良い。

試験運用版のウェブ プラットフォームの機能 Mac, Windows, Linux, Chrome OS, Android
開発中の試験運用版ウェブ プラットフォームの機能を有効にします。 #enable-experimental-web-platform-features

#Electronの場合

Electronの場合、chrome://flagsを設定する画面はない。

有効化するためにはBrowserWindowインスタンスを作成する際に、以下のようにwebPreferences{ experimentalFeatures: true }を追加し、開発中の試験運用版プラットフォームを有効化することで使用する事が可能になる。

mainWindow = new BrowserWindow({ 
    webPreferences: {
      experimentalFeatures: true
    }
})