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

 

用 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信息” 的按钮时就可以正常看到输出结果了:

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

 

上一篇:eval报错NameError: name 'null' is not defined


下一篇:[Django]name 'HttpResponse' is not defined