diff --git a/README.md b/README.md index f22a881..d25d76d 100644 --- a/README.md +++ b/README.md @@ -7,10 +7,11 @@ ## 特征 -🏂 **小**：相比传统的 Electron 套壳打包，大小要小将近 40 倍，一般不到 3M ([数据](https://static.tw93.fun/img/pakedata.png)) -😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多 -🩴 **特**：不是单纯打包，实现了通用快捷键的透传、沉浸式的窗口、拖动、样式改写简化 -🐶 **玩**：只是一个很简单的小玩具，用 Rust 替代之前套壳网页老的思路玩法，PWA 也很好，友好交流勿喷 +- 🏂 **小**：相比传统的 Electron 套壳打包，大小要小将近 40 倍，一般不到 3M ([数据](https://static.tw93.fun/img/pakedata.png)) +- 😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多 +- 🩴 **特**：不是单纯打包，实现了通用快捷键的透传、沉浸式的窗口、拖动、样式改写简化 +- 🐶 **玩**：只是一个很简单的小玩具，用 Rust 替代之前套壳网页老的思路玩法，PWA 也很好，友好交流勿喷 + ## 下载 @@ -84,14 +85,14 @@ npm run build 1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 `url、productName、icon、title、identifier` 这 5 个字段，其中 icon 可以从 icons 目录选择一个，也可以去 [macOSicons](https://macosicons.com/#/) 下载符合产品名称的 2. 关于窗口属性设置，可以在 `tauri.conf.json` 修改 `windows` 属性对应的 `width/height`，是否全屏 `fullscreen`，是否可以调整大小 `resizable`，假如你不好适配沉浸式头部，可以将 `transparent` 设置成 `true` 即可。 -3. `npm run dev` 本地调试看看效果，此外可以打开 `main.rs` 中两处注释 `_devtools` 进行容器调试 -4. `npm run build` 运行即可打包，假如有打开 devtools 模式，记得注释掉 +3. `npm run dev` 本地调试看看效果，此外可以使用 `npm run dev:debug` 进行容器调试 +4. `npm run build` 运行即可打生产包 ## 高级 #### 1. 如何改写样式，如去掉原站广告、不想要的模块、甚至重新设计？ -首先需要打开 devtools 调试模式，找到你需要修改的样式名称，先在 devtools 里面验证效果；找到 `pake.js` 中样式位置 `style.innerHTML` ，将需要覆盖的样式加上即可，有一些案例你可以模仿，正式打包前记得干掉 devtools 注释。 +首先需要使用 `npm run dev:debug` 打开 devtools 调试模式，找到你需要修改的样式名称，先在 devtools 里面验证效果；找到 `pake.js` 中样式位置 `style.innerHTML` ，将需要覆盖的样式加上即可，有一些案例你可以模仿。 #### 2. 如何注入 JS 的逻辑，比如实现事件监听，比如说键盘快捷键？ diff --git a/README_EN.md b/README_EN.md index 9c7fb60..9013abc 100644 --- a/README_EN.md +++ b/README_EN.md @@ -7,10 +7,11 @@ ## Features -🏂 **Small**：Nearly 40 times smaller than the Electron shell package, less than 3M ([Data](https://static.tw93.fun/img/pakedata.png)). -😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS, memory is much smaller. -🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility. -🐶 **Toy**：Just a very simple little toy, a way to play with Rust instead of the old idea of shelling the web +- 🏂 **Small**：Nearly 40 times smaller than the Electron shell package, less than 3M ([Data](https://static.tw93.fun/img/pakedata.png)). +- 😂 **Fast**：Using the Rust Tauri, the performance experience is much lighter and faster than JS, memory is much smaller. +- 🩴 **Special**：Not just packaged, with universal shortcut pass-through, immersive windows, drag-and-drop, packaged style compatibility. +- 🐶 **Toy**：Just a very simple little toy, a way to play with Rust instead of the old idea of shelling the web. + ## Download @@ -84,14 +85,14 @@ npm run build 1. Modify the `tauri.conf.json` in the `src-tauri` directory to include 5 fields `url, productName, icon, title, identifier`, icon can be selected from the `icons` directory or downloaded from [macOSicons](https://macosicons.com/#/) to match the product. 2. For window property settings, you can modify the `width/height` of the `windows` property in `tauri.conf.json`, whether it is `fullscreen`, whether it is `resizable`, if you are not good at adapting immersive headers, you can set `transparent` to `true` and you're done. -3. `npm run dev` for local debugging, and open the devtools comments in `main.rs` (search for `_devtools`) for container debugging. -4. `npm run build` can be run to package, if you have devtools mode open, remember to comment it out. +3. `npm run dev` for local debugging; `npm run dev:debug` to open the devtools for container debugging. +4. `npm run build` can be run to package for production. ## Advanced #### 1. How do I rewrite the style, e.g. to remove ads from the original site, or even redesign it? -First open devtools debug mode, find the name of the style you want to change and verify the effect in devtools first, find the location of the style in `pake.js` with `style.innerHTML` and add the style you need to override, there are some examples you can copy. Remember to remove the devtools comments before packaging. +First, open devtools debug mode with `npm run dev:debug`. After that, find the name of the style you want to change and verify the effect in devtools, and find the location of the style in `pake.js` with `style.innerHTML`. Finally, add the style you need to override, there are some examples you can copy. #### 2. How to inject js code, e.g. to implement event listeners, e.g. keyboard shortcuts? diff --git a/package.json b/package.json index a138df2..26ff7b1 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "scripts": { "start": "npm run dev", "dev": "npm run tauri dev", + "dev:debug": "npm run tauri dev -- --features devtools", "build": "npm run tauri build -- --target universal-apple-darwin", "tauri": "tauri" }, diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 1bc557f..f593931 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -28,3 +28,5 @@ default = [ "custom-protocol" ] # this feature is used used for production builds where `devPath` points to the filesystem # DO NOT remove this custom-protocol = [ "tauri/custom-protocol" ] +# Enable DevTools for debugging. +devtools = [] diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index af3ce31..1280e26 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -74,14 +74,17 @@ fn main() -> wry::Result<()> { } }; - let _webview = WebViewBuilder::new(window)? + let webview = WebViewBuilder::new(window)? .with_url(&url.to_string())? - // .with_devtools(true) + .with_devtools(cfg!(feature = "devtools")) .with_initialization_script(include_str!("pake.js")) .with_ipc_handler(handler) .build()?; - // _webview.open_devtools(); + #[cfg(feature = "devtools")] { + webview.open_devtools(); + } + event_loop.run(move |event, _, control_flow| { *control_flow = ControlFlow::Wait; @@ -97,7 +100,7 @@ fn main() -> wry::Result<()> { .. } => { if menu_id == close_item.clone().id() { - _webview.window().set_minimized(true); + webview.window().set_minimized(true); } println!("Clicked on {:?}", menu_id); }