vscode electron error (Refused to execute inline event handler because it violates the following Con

2024-02-03 17:49:16

用 vscode 运行 electron 的时候出现了以下两个错误，在 stack overflow 上找到了答案，分享给大家。

vscode Version: 1.46.0
Electron: 9.0.3
Node.js: 12.14.1
OS: Linux x64 4.15.0-106-generic

安装 electron 步骤：

（1）git clone https://github.com/electron/electron-quick-start （克隆项目仓库）

（2）cd electron-quick-start （进入仓库）

（3）npm install （安装依赖，这个过程会非常慢，最好*，或者使用国内镜像）

（4）npm start (启动运行)

vscode 运行和调试 electron 的 launch.json 配置如下（点击 Run -> Open Configurations 就可以打开配置文件了）：

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "windows": {"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"},
        "args": ["."],
        "outputCapture": "std"
      }
    ]
  }

我用 vscode 打开 electron-quick-start 这个目录，修改了其中的 index.html 和 renderer.js 文件如下所示 (这个代码修改我是从B站上看electron的教学视频跟着修改的，但是我这里出现了错误)：

index.html:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="UTF-8">
 5     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
 6     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
 7     <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
 8     <title>Hello World!</title>
 9   </head>
10   <body>
11     
12     <div>
13       <h2>Process</h2>
14       <button onclick="getProcessInfo()">查看preocess信息</button>
15     </div>
16 
17     <!-- You can also require other files to run in this process -->
18     <script src="./renderer.js"></script>
19   </body>
20 </html>

renderer.js:

1 function getProcessInfo(){
2     console.log("getCPUUsage: ", process.getCPUUsage());
3     console.log('env', process.env);
4     console.log('arch', process.arch);
5     console.log('arch', process.platform);
6     console.log('arch', process.versions);
7 }

这时候出现了以下错误：

error1：Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

这时候查阅资料，在 https://*.com/questions/36324333/refused-to-execute-inline-event-handler-because-it-violates-csp-sandbox 中找到答案。

解决方法：

index.html: 把 <button onclick="getProcessInfo()">查看preocess信息</button> 改成 <button id="btn">查看preocess信息</button>

renderer.js: 在 function getProcessInfo() 这一句上面添加上： document.getElementById("btn").addEventListener("click", getProcessInfo);

修改好后，再次编译运行就没有以上错误了，但是当按下 “查看preocess信息” 的按钮时，又出现了以下错误：

error2 ：renderer.js:10 Uncaught ReferenceError: process is not defined

查阅资料，找到了答案 https://*.com/questions/30239060/uncaught-referenceerror-process-is-not-defined

解决方法：

打开 main.js 文件，在 function createWindow() 里面加上一行： nodeIntegration: true ，如下图所示：

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true 
    }
  }

注意，这个 nodeIntegration: true 的添加非常重要，只有添加了它，才能使 require 和 process 等变量有效。

把这两个bug都去除后，在 vscode 上按下 F5 运行代码，再按下 “查看preocess信息” 的按钮时就可以正常看到输出结果了：

码农公寓

相关文章