JS 注入基础——原子弹级功能，页面加载时自动执行

什么是 JS 注入

配置页面里有一个叫"脚本文件"的输入框，可以指向你电脑上的任意 .js 文件。PakePlus 打包出来的 APP 在目标网页加载完成后，会自动把这段 JS 代码注入到页面里执行。

文档里标注为"原子弹，不懂代码不要动"——这话说的是它的威力：既能帮你去广告、做自动化，也能帮你操作本地文件、执行系统命令（配合 TauriApi 开关）。

什么时候执行

注入时机：网页 HTML 解析完成、DOM 已就绪，但资源（图片/字体）可能还在加载。

大致等价于浏览器里的 DOMContentLoaded 事件。如果你的 JS 需要等图片加载完再操作，可以自己监听 window.onload 或者 MutationObserver。

脚本文件怎么写

最简单的脚本

// hello.js
console.log('PakePlus injected script loaded!');
document.body.style.background = '#f0f8ff';

保存为 hello.js，在 PakePlus 配置里的"脚本文件"字段选择这个文件 → 预览 → 打开 F12 Console 面板，应该能看到 log 输出，背景会变成浅蓝色。

脚本可以做什么

脚本也有什么做不到的

脚本文件的位置

脚本文件是你电脑上的本地文件，选好之后：

• 云端打包时会被 push 到 GitHub fork 仓库，打包进产物
• 本地打包时会被直接打包进 APP

原始 JS 文件可以放在你电脑上任意位置——选好后它就被"收编"进 PakePlus 的项目里了。后续 APP 运行时执行的是打包时嵌入的版本。

多个脚本怎么处理

配置页面的"脚本文件"字段是单文件——如果有多个脚本需要依次执行，有两种方案：

方案一：在 JS 里手动加载

// main.js - 主入口
const scripts = [
  'inject.js',      // 这里填的是打包后的资源路径
  'hooks.js',
];
scripts.forEach(src => {
  const s = document.createElement('script');
  s.src = src;
  document.head.appendChild(s);
});

方案二：合并成一个文件

把多个脚本的内容拼接到一个文件里，用立即执行函数包裹避免变量冲突：

// combined.js 开头
(function() {
  // 脚本 1 的内容
})();
(function() {
  // 脚本 2 的内容
})();

脚本调试

1. PakePlus 配置里勾选"开发调试"
2. 点预览按钮
3. 在预览窗口里 F12 打开 DevTools
4. Console 面板里看脚本的 log 输出
5. Sources 面板里能找到注入的脚本文件，可以打断点

如果脚本在"开发调试"预览窗口里能正常运行，但打包后就不行——最可能的原因是脚本里用了只在开发环境存在的 API（比如 DevTools 的调试对象），或者路径问题（打包后资源路径变了）。

一个常见的坑：异步加载问题

有些网页的 DOM 是动态加载的（React/Vue 渲染出来的内容，不在初始 HTML 里）：

// ❌ 可能找不到元素——因为它是页面加载后 JS 渲染出来的
document.querySelector('#dynamic-content').remove();

// ✅ 用 MutationObserver 持续监听
const observer = new MutationObserver(() => {
  const el = document.querySelector('#dynamic-content');
  if (el) {
    el.remove();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

脚本安全边界

JS 注入脚本在网页的 JS 上下文里执行——它能访问网页本身的所有全局变量、cookie、localStorage。这意味着：

• 如果目标网页的 JS 有安全漏洞，注入的脚本可能被恶意代码劫持
• 不要在注入脚本里写敏感信息（比如把你的 Token 直接写在 JS 里）
• 如果你打包的是他人网站，注入脚本做的事情可能违反对方的使用条款

和"过滤元素"的区别

两者可以同时使用——简单的用过滤元素，复杂的用 JS 注入。