相关疑难解决方法(0)

我正在为自己的目的创建Electron应用程序。我的问题是，当我在HTML页面中使用节点函数时，它引发以下错误：

未定义'require（）'。

有没有办法在我所有的HTML页面中使用Node功能？如果可能的话，请给我举个例子，或者提供一个链接。以下是我要在HTML页面中尝试使用的变量：

  var app = require('electron').remote; 
  var dialog = app.dialog;
  var fs = require('fs');

这些是我在Electron的所有HTML窗口中使用的值。

我最初使用电子稳定（4.xx），并且能够require在我的浏览器和渲染器过程中使用。我升级到电子beta（5.0.0），因为我需要较新版本的node并在渲染器过程中遇到此错误消息Uncaught ReferenceError: require is not defined。

谷歌浏览电子文档，我发现有评论说该错误可能是由webPreferences.nodeIntegration初始化BrowserWindow; 时设置为false 引起的。例如：new BrowserWindow({width, height, webPreferences: {nodeIntegration: false}});。但是我没有这样做，所以我认为还有其他问题，并继续寻求解决方案。

我第一次玩电子。尝试创建一个文本编辑器

在渲染中，我正在发送一条消息以指示内容已更改并需要保存：

document.getElementById('content').onkeyup = e => {
  ipcRenderer.send('SAVE_NEEDED', {
    content: e.target.innerHTML,
    fileDir
  })
}

然后ipcMain接收它没有问题。在菜单上我有这个：

{
  label: 'Save',
  click: _ => {
     saveFile(message)
     // trying:
     // ipcMain.send('SAVED', 'File Saved')
     },
     accelerator: 'cmd+S', // shortcut
}

这样用户就知道文件已经有了。但这似乎不起作用。有没有其他方法可以做到这一点？我原以为“保存”将是一个预先创建的角色（有点）

我的 main.js 中的电子生成器和 browserWindows 预加载选项有问题：

// Create the browser window.
  mainWindow = new BrowserWindow({
    x: mainWindowState.x,
    y: mainWindowState.y,
    width: mainWindowState.width,
    height: mainWindowState.height,
    minHeight: 500,
    minWidth: 1000,
    icon: path.join(__dirname, 'icon.ico'),
    frame: false,
    webPreferences: {
      preload: path.resolve(__dirname, 'preload.js'), // <--- PROBLEM
      nativeWindowOpen: true,
      spellcheck: true,
      nodeIntegration: false
    }
  });

启动打包的应用程序后，我收到以下错误：

无法加载预加载脚本：C:\Users[...]\resources\app.asar\preload.js

preload.js 与 main.js 位于同一目录中。

有什么想法可以解决这个问题吗？

亲切的问候，凯W。

我在 preload.js 中定义了 contextBridge ( https://www.electronjs.org/docs/all#contextbridge )，如下所示：

const {
  contextBridge,
  ipcRenderer
} = require("electron")

contextBridge.exposeInMainWorld(
  "api", {
      send: (channel, data) => {
          ipcRenderer.invoke(channel, data).catch(e => console.log(e))
      },
      receive: (channel, func) => {
        console.log("preload-receive called. args: ");
        ipcRenderer.on(channel, (event, ...args) => func(...args));
      },
      // https://www.electronjs.org/docs/all#ipcrenderersendtowebcontentsid-channel-args
      electronIpcSendTo: (window_id: string, channel: string, ...arg: any) => {
        ipcRenderer.sendTo(window_id, channel, arg);
      },
      // https://github.com/frederiksen/angular-electron-boilerplate/blob/master/src/preload
/preload.ts
      electronIpcSend: (channel: string, ...arg: any) => {
        ipcRenderer.send(channel, arg);
      },
      electronIpcSendSync: (channel: string, ...arg: any) => {
        return ipcRenderer.sendSync(channel, arg); …

我的目标摘要

我想将第三方网站加载到 Electron 中并操作其 CSS。我希望我所做的 CSS 更改能够保留。我想将代码捆绑为应用程序，并且 CSS 更改在用户运行应用程序时持续存在。我想要嵌入的网站使用谷歌进行身份验证。

• 第一种方法

我尝试的第一种方法是通过 Google Chrome 的“覆盖”功能更改浏览器中的 CSS。这不起作用，因为当用户在计算机上打开应用程序时，更改不会持续到用户身上。

第二种方法记录在我发布的这个问题中： In Electron (Forge) when nodeIntegrationInWorker: true, embedding gmail shown a Blank screen

• 第二种方法

注意- 在下面的代码中，我使用 gmail.com 作为要加载的示例网站。它产生了同样的问题。

索引.js

const { app, BrowserWindow } = require('electron');
const path = require('path');




const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    // width: 1000,
    // height: 800,
    // resizable: false,
    // frame:false,
    webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       nodeIntegrationInWorker: true, …

我已经将TS添加到我的React / Redux应用程序中。

我window在我的应用程序中使用对象是这样的：

componentDidMount() {
  let FB = window.FB;
}

TS引发错误：

TypeScript错误：类型“ Window”上不存在属性“ FB”。TS2339

我想修复该错误。

1（无效）

// Why doesn't this work? I have defined a type locally

type Window = {
  FB: any
}

componentDidMount() {
  let FB = window.FB;
}

// TypeScript error: Property 'FB' does not exist on type 'Window'. TS2339

2（修复错误）

我在这里找到答案/sf/answers/3948169781/

declare const window: any;

componentDidMount() {
  let FB = window.FB;
}
// No errors, works well

为什么即使我完全没有指定FB属性，第一个版本也不起作用，而第二个版本却起作用？

我正在按照从以下位置打开文件的对话框示例：https://github.com/electron/electron-api-demos

我复制了示例中的代码。打开文件对话框实际上可以工作，我可以选择一个文件，但无法弄清楚为什么将文件路径发送回渲染器的箭头功能不起作用（console.log 没有记录任何内容）。

任何人都可以发现出了什么问题吗？该项目是使用 electro-forge 启动的，我的操作系统是 linux。谢谢

索引.js

const { app, BrowserWindow, ipcMain, dialog, } = require('electron');
require('electron-reload')(__dirname);
const path = require('path');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}


const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools(); …