electron开发、打包与逆向分析

npm配置源

npm config set registry https://registry.npm.taobao.org
 
// 配置后可通过下面命令来验证是否成功
npm config ls

参考：14fK9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6%4N6%4N6Q4x3X3g2U0L8X3u0D9L8$3N6K6i4K6u0W2j5$3!0E0i4K6u0r3P5X3W2^5N6h3q4F1x3o6m8Q4x3V1k6H3i4K6u0r3x3e0p5I4z5e0M7#2x3K6u0Q4x3X3g2Z5N6r3#2D9

electron-quick-start

参考：1beK9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6%4N6%4N6Q4x3X3g2U0L8X3u0D9L8$3N6K6i4K6u0W2j5$3!0E0i4K6u0r3L8s2g2*7K9r3q4F1M7$3S2A6i4K6u0r3M7q4)9J5c8U0p5H3z5e0j5%4z5e0V1$3i4K6u0W2K9s2c8E0L8l9`.`.

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

即使配置了国内源，在执行npm install的时候还是很容易因为网络问题中断，要多试几次。
图片描述

electron加调试

参考：86cK9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6F1k6i4N6K6L8W2)9J5k6h3&6W2N6q4)9J5c8Y4y4S2P5g2)9J5c8X3g2D9k6h3y4@1M7X3!0F1i4K6u0V1k6r3g2$3N6r3!0G2L8s2y4Q4x3X3g2Z5N6r3#2D9

开发dev状态下使用快捷键打开electron开发者工具

1 2	`win下的快捷键是：ctrl+shift+i` `mac下的快捷键是：alt+花+i`

通过代码打开DevTools

mainWindow.webContents.openDevTools({mode:"detach"})
{mode:"right"}      界面右侧打开devtools
{mode:"left"}       界面左侧打开devtools
{mode:"bottom"}     界面底部打开devtools，没有top
{mode:"detatch"}    分离状态打开devtools，不可合并
{mode:"undocked"}   分离状态打开devtools，可以合到界面

mainWindow.webContents.closeDevTools() 关闭DevTools
图片描述

注意
这个开发者工具devtools在正式打包过的release中，也是可以打开的，只不过快捷键似乎是不生效的。如果想在release中使用开发者工具的话，需要想办法执行mainWindow.webContents.openDevTools()

electron打包

用 asar 打包 App 源代码

1 2	`npm install` `-g asar` `asar pack electron-quick-start app.asar`

打包可执行文件

npm i electron-builder -g
electron-packager electron-quick-start ElectronDemo --platform=win32 --arch=x64 --icon=computer.ico --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules
 
使用app.asar替换app源码
cd electron-quick-start
rm -rf .github .gitignore node_modules
cd ../
asar pack electron-quick-start app.asar
使用 app.asar 替换 ElectronDemo-win32-x64\resources\app
双击ElectronDemo.exe可以弹出界面，正常运行

逆向分析

解压app.asar

1	`asar e app.asar app`

改代码

vim main.js
在createWindow里放开
mainWindow.webContents.openDevTools()

重新打包

asar pack app app.asar
 
其实修改代码后，直接rm app.asar，不用重新打包，也是可以测试代码效果的。
即可以放开调试，也可以直接改代码，开心！

其他说明

1. 问：electron-quick-start 中菜单栏的代码源自哪里，如何关闭菜单栏？

答：源自 electron-quick-start\node_modules\electron\dist\electron.exe 内置的ts代码。
 
 
在 createWindow 函数里关闭菜单
mainWindow.setMenu(null)

2.无窗口栏、全屏、窗口透明

1	`BrowserWindow({height:960,useContentSize:!0,width:1440,frame:!1,fullscreen:!0,transparent:!0})`

3.python执行js

1.
import execjs
print(execjs.eval("a = new Array(1, 2, 3)"))
运行结果：
[1, 2, 3]
 
2.
class JsCode(Base):
    def __init__(self):
        self.ctx = execjs.compile(self.readFileText("JsCode.js"))
 
    def encode64(self, msg):
        return self.ctx.call("encode64", msg)
 
3.
node JsCode.js
使用 node.js 执行时，console.log 相当于 print