零弐壱蜂

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

1 min read

概要

  • 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,
  },
});
Edit on GitHub