You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何通过外部JavaScript文件修改Electron应用的run方法行为?

问题描述

kareljs 是一个Electron应用,在该目录下执行npm start会弹出窗口,点击Run Karel按钮时会执行karel.js中的run方法。./eg01/hello_karel.js、./eg02/pick_newspaper.js等文件是基于./kareljs/karel/karel.js模块编写的Karel程序,期望实现:

  • 运行这些示例程序时只需执行node ./eg01/hello_karel.js(或在eg01目录下执行node hello_karel.js),弹出相同窗口
  • 点击Run Karel按钮时调用对应示例文件中的自定义run方法(类似Java方法重写,覆盖默认run方法)
  • 示例目录内无需额外配置文件,尽可能简化新手操作

目前已实现通过node hello_karel.js启动应用,但点击按钮时仍无法调用自定义run方法,相关代码如下:


相关代码

main.js

const { app, BrowserWindow } = require('electron/main')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { 
        contextIsolation: false,
        nodeIntegration: true
       },
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer ... !</h1>
    <p>👋</p>
    <p id="info"></p>
    <p><button class="run">Run Karel</button></p>
    <script src="./renderer.js"></script>  
  </body>  
  
</html>

karel.js

const move = () => {
    alert("Karel moves one step forward!")
};

const turnLeft = () => {
    alert("Kare turns left!")
};

const pickBeeper = () => {
    alert("Karel picks a beeper!")
};

const putBeeper = () => {
    alert("Karel puts a beeper!")
};

const run = () => {
    alert("This is the default run method!")
}
    

// Updated: to write user_defined.js file with content from hello_karel.js
const { exec,spawn } = require("child_process");
const fs  = require("fs");
var path = require('path');

const start_karel = (file_name) => {
    console.log(__dirname)
    console.log("The .js file executed: " + file_name)
    var user_script;
    fs.readFile(file_name, 'utf8', (err, data) => {
        if (err) {
          console.error(err);
          return;
        }
        console.log(data);
        var user_defined = path.join(__dirname, '..', 'user_defined.js');
        var user_script = data.replace(/start_karel\(__filename\)/g, "")
        fs.writeFile(user_defined, user_script, 'utf-8', function (err) {
            console.log(err);
        });
    });
    var index_html = path.join(__dirname, '..', 'index.html');
    
    /*
    fs.readFile(index_html, 'utf8', (err, data) => {
        if (err) {
          console.error(err);
          return;
        }
        console.log("about to replace...")
        console.log(data);
        var replaced = data.replace(/default/g, 'user')

        console.log("replaced " + replaced)

        fs.writeFile(index_html, replaced, 'utf-8', function (err) {
            console.log(err);
        });
        console.log("done replace...")

      });
    */
    
    exec("cd ../kareljs && ./node_modules/.bin/electron main.js " + file_name, (error, stdout, stderr) => {
        if (error) {
            console.log(`error: ${error.message}`);
            return;
        }
        if (stderr) {
            console.log(`stderr: ${stderr}`);
            return;
        }
        console.log(`stdout: ${stdout}`);
    });
    
    /*
    spawn("cd ../kareljs && ./node_modules/.bin/electron main.js " + file_name, {
        stdio: 'inherit',
        shell: true
    })
    */


}

module.exports =  {move, turnLeft, putBeeper, pickBeeper, run, start_karel};

renderer.js

const {move, turnLeft, putBeeper, pickBeeper, run} = require('./karel/karel')

const btn = document.querySelector('.run')
btn.addEventListener('click', () => {run()})

package.json

{
  "name": "hello-electron-app",
  "version": "1.0.0",
  "description": "test",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^28.2.1"
  }
}

hello_karel.js

const {move, turnLeft, putBeeper, pickBeeper, run, start_karel} = require('../kareljs/karel/karel')

function turnRight() {
    turnLeft()
    turnLeft()
    turnLeft()
}

start_karel()

内容的提问来源于stack exchange,提问作者Pyi Soe

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.30 17:34:54