ElectronJS 中的动态样式

ElectronJS是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS组合成一个单一的运行时。

为了使桌面应用程序对用户更具吸引力和吸引力，除了预定义的CSS之外，开发人员还希望提供一个功能，用户可以在执行期间控制应用程序的外观和感觉并动态更改应用程序的样式.例如，更改应用程序的主题，动态为元素添加动画等。Electron 提供了一种方法，我们可以使用内置BrowserWindow的 Instance 方法和事件成功地为页面内容添加动态样式对象和webContents属性。本教程将演示如何在 Electron 中为页面内容添加动态样式。

我们假设您熟悉上述链接中涵盖的先决条件。为了使 Electron 正常工作，需要在系统中预先安装node和npm 。

项目结构：

示例：我们将首先按照给定的步骤构建基本的电子应用程序。

第 1 步：导航到空目录以设置项目，然后运行以下命令，
```
npm init
```
生成package.json文件。如果没有安装Electron ，请使用 npm 安装。
```
npm install electron --save
```
此命令还将创建package-lock.json文件并安装所需的node_modules依赖项。成功安装 Electron 后，打开package.json文件并在scripts键下执行必要的更改。
包.json：
```
{
  "name": "electron-dynamic",
  "version": "1.0.0",
  "description": "Dynamic Styling in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}
```

第二步：根据项目结构创建一个main.js文件。该文件是主进程并充当应用程序的入口点。复制以下链接中给出的main.js文件的样板代码。我们已经修改了代码以满足我们的项目需求。

主.js：

const { app, BrowserWindow } = require('electron')
  
function createWindow () {
  
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  
  // Load the index.html of the app.
  win.loadFile('src/index.html')
  
  // Open the DevTools.
  win.webContents.openDevTools()
}
  
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
// This method is equivalent to 'app.on('ready', function())'
app.whenReady().then(createWindow)
  
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
  
app.on('activate', () => {
    // On macOS it's common to re-create a window in the 
    // app when the dock icon is clicked and there are no 
    // other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
  
// In this file, you can include the rest of your 
// app's specific main process code. You can also 
// put them in separate files and require them here.

第三步：在src目录下创建index.html文件、 index.js文件和index.css文件。我们还将从上述链接复制index.html文件的样板代码。我们已经修改了代码以满足我们的项目需求。

索引.html：




  
    
    Hello World!
    
    
    
  
  
    Hello World!
    We are using node
    , Chrome
    , and Electron
    .

输出：此时，我们的基本电子应用程序已设置完毕。要启动 Electron 应用程序，请运行以下命令：
```
npm start
```

Electron 中的动态样式： BrowserWindow实例和webContents属性是Main Process的一部分。要在渲染器进程中导入和使用BrowserWindow ，我们将使用 Electron远程模块。 webContents.insertCSS(css, options)实例方法将CSS动态注入当前BrowserWindow页面内容并返回插入样式表的唯一键。此方法返回一个Promise并解析为一个字符串，该字符串表示将 CSS 插入BrowserWindow页面内容的唯一键。稍后可以使用相同的唯一键使用webContents.removeInsertedCSS()方法从页面内容中删除 CSS。它接受以下参数。

CSS: String此值不应为空。 css 字符串包含要应用于BrowserWindow页面内容的 CSS。 css String 遵循与CSS3相同的规则，除了它是在 String 中声明的。
options: Object （可选）它接受以下参数，
- CSSOrigin：字符串（可选）值可以是user或author 。将值设置为user使开发人员可以防止外部网站覆盖开发人员设置的 CSS。默认值为作者。

webContents.removeInsertedCSS(key)实例方法根据webContents.insertCSS()方法返回的表示样式表的唯一键从当前页面内容中删除插入的 CSS。它返回一个void Promise并在移除 CSS 成功时解决。

要在Renderer Process中获取当前BrowserWindow实例，我们可以使用BrowserWindow对象提供的一些静态方法。

BrowserWindow.getAllWindows()：此方法返回活动/打开的BrowserWindow实例的数组。在这个应用程序中，我们只有一个活动的 BrowserWindow实例，它可以直接从 Array 中引用，如代码所示。
BrowserWindow.getFocusedWindow()：此方法返回在应用程序中聚焦的BrowserWindow实例。如果没有找到当前BrowserWindow实例，则返回null 。在这个应用程序中，我们只有一个活动的 BrowserWindow实例，可以直接使用该方法引用它，如代码所示。

index.html：在该文件中添加以下代码段。

Dynamic Styling in Electron

注意：此时index.css文件为空。
index.js ：在该文件中添加以下代码段。

const electron = require('electron');
// Importing BrowserWindow from Main Process
const BrowserWindow = electron.remote.BrowserWindow;
  
var style = document.getElementById('style');
let win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
var cssKey = undefined;
  
var css = "body { background-color: #000000; color: white; }"
  
style.addEventListener('click', () => {
    win.webContents.insertCSS(css, {
        cssOrigin: 'author'
    }).then(result => {
        console.log('CSS Added Successfully')
        console.log('Unique Key Returned ', result)
        cssKey = result;
    }).catch(error => {
        console.log(error);
    });
});
  
var clear = document.getElementById('clear');
clear.addEventListener('click', () => {
    if (cssKey) {
        win.webContents.removeInsertedCSS(cssKey)
            .then(console.log('CSS Removed Successfully')).catch(error => {
                console.log(error);
            });
    }
});

输出：

注意：如果我们指定了外部样式表，例如index.css文件或在 HTML 文档中使用了内联样式，则webContents.insertCSS()实例方法将在现有样式之外添加 CSS。它将无法覆盖或更改外部样式表中定义的 CSS 或当前BrowserWindow内容的内联样式（如果有）。

index.css：在该文件中添加以下代码段。

html, body {
    background-color: lightgray;
}

background-color属性在index.css文件中定义，我们也在index.js文件中的webContents.insertCSS()方法中动态设置它，并使用不同的值。因此，根据行为， BrowserWindow页面的背景颜色应该没有变化。如果我们在这段代码之外运行上面的代码，我们应该会看到以下输出：

输出：