浏览器插件核心技术与功能速查清单
🧭 浏览器插件核心技术与功能速查清单
Section titled “🧭 浏览器插件核心技术与功能速查清单”1. 核心四大组件（宿主环境）
Section titled “1. 核心四大组件（宿主环境）”- Manifest.json (配置清单): 插件的声明文件，定义名称、版本、组件路径及所需的所有系统权限。这是插件的“身份证”和“权限表”。
- Content Scripts (内容脚本): 注入到网页内部的脚本。这是唯一可以直接读取、操作网页 DOM 的组件，运行在隔离沙箱中，无法直接访问网页自带的 JS 变量。
- Service Worker (后台服务工作线程): 插件的“大脑”。负责后台监听事件、跨域请求等。它是**基于事件触发，随用随灭（无状态）**的，不能存储全局变量，需要配合持久化存储方案。
- Popup / Options (弹出层与设置页): 插件的独立 UI 页面，本质上是标准的 HTML/CSS/JS，用于提供用户交互界面和配置选项。
2. 网页篡改与控制能力（肉搏层）
Section titled “2. 网页篡改与控制能力（肉搏层）”| 核心能力 | 技术实现 / 关键 API | 经典应用场景 | 备注/边界限制 |
|---|---|---|---|
| DOM 深度操作 | Content Scripts (document.querySelector) | 网页去广告、注入自定义按钮、修改样式 | 面对单页应用（SPA）页面需配合 MutationObserver 监听动态生成的 DOM，以处理异步内容加载。 |
| 穿透影子 DOM | element.shadowRoot | 抓取或修改现代前端框架/微前端包裹的隐式组件 | 只有模式为 open 的 Shadow DOM 可直接穿透，closed 模式下无法直接访问。 |
| 事件深度监听 | addEventListener | 自动化抢票、表单自动填充、用户行为埋点 | 模拟点击等事件其 isTrusted 属性为 false，可能被高级反爬机制拦截。 |
3. 网络请求与跨域处理（数据层）
Section titled “3. 网络请求与跨域处理（数据层）”| 核心能力 | 技术实现 / 关键 API | 经典应用场景 | 备注/边界限制 |
|---|---|---|---|
| 无限制跨域请求 | Service Worker 发起 fetch | 绕过浏览器 CORS 限制，将网页抓取的数据无阻碍发送到自有服务器 | 必须在 manifest.json 中声明目标域名的权限，否则请求将被阻止。 |
| 声明式请求拦截 | chrome.declarativeNetRequest (DNR) | 强力广告拦截、隐私保护（阻止追踪脚本加载） | Manifest V3 中取代了旧版动态拦截 API，采用“静态规则声明”由浏览器代执行，性能更高，安全性更强。 |
| 全网 Cookie 读写 | chrome.cookies | 多账号一键免密切换、跨站登录态同步 | 拥有极高隐私权限，上架官方商店时审查极严，需谨慎使用。 |
4. 存储与状态管理（数据持久化）
Section titled “4. 存储与状态管理（数据持久化）”| 存储分区 | 关键 API | 存储容量限制 | 生命周期 / 特点 |
|---|---|---|---|
| 本地存储 | chrome.storage.local | 默认 5MB (声明 "unlimitedStorage" 后不限容量) | 永久保存在用户硬盘，适合存储大量数据或缓存。支持 Object/Array 原生类型，读写异步非阻塞。 |
| 云端同步 | chrome.storage.sync | 极严格：总容量 ~100KB，单条上限 8KB | 登录谷歌账号后自动多端同步，适合存储用户个性化配置，保证数据一致性。 |
| 会话内存 | chrome.storage.session | 受限于内存大小 | 浏览器关闭即抹去。读写速度极快，适合在 Service Worker 休眠期间传递 Token 等敏感、非持久化数据。 |
| 全局变更监听 | chrome.storage.onChanged.addListener | - | 任何组件修改了存储，全量组件实时收到通知，可用于构建插件跨组件状态管理，实现数据响应式更新。 |
5. 浏览器外壳与 UI 控制（上帝视角层）
Section titled “5. 浏览器外壳与 UI 控制（上帝视角层）”🗂️ 标签页与窗口管理
Section titled “🗂️ 标签页与窗口管理”- 标签页状态检索：
chrome.tabs.query— 检索当前打开的所有标签页，获取其标题、URL、是否静音等状态，支持强大的过滤条件。 - 标签页生命周期操控：
chrome.tabs.create/remove/update— 自动批量打开新页、关闭闲置页、强制刷新特定标签页，实现自动化工作流。 - 标签页深度分类：
chrome.tabs.move/group— 拖拽移动标签页，或将同类标签归纳进标签组 (Tab Group)，提升多标签管理效率。 - 内存挂起/睡眠：
chrome.tabs.discard— 强制指定标签页进入睡眠释放内存，用户点击时再唤醒，有效优化浏览器性能。 - 窗口外壳控制：
chrome.windows— 创建新窗口、一键最大化/最小化、跨屏幕调整窗口坐标，实现多窗口布局管理。
🖼️ 系统外壳 UI 增强
Section titled “🖼️ 系统外壳 UI 增强”- 常驻侧边栏 (Side Panel):
chrome.sidePanel— 开辟独立的纵向常驻面板，不受主视窗网页刷新切换的影响，是实现 AI 聊天、笔记助手等常驻功能的神器。 - 右键菜单拓展 (Context Menus):
chrome.contextMenus— 选中划词、右键图片、右键链接时，注入自定义菜单项（如“划词翻译”、“保存到云端”），增强用户交互。 - 地址栏接管 (Omnibox):
chrome.omnibox— 注册自定义关键字，接管地址栏输入，实现快速搜索、命令执行（如输入md5 test直接在地址栏返回加密结果）。
💻 操作系统级深度交互
Section titled “💻 操作系统级深度交互”- 系统桌面通知 (Notifications):
chrome.notifications— 弹出系统级别的原生通知弹窗（如 Windows 右下角或 macOS 右上角），即使用户最小化了浏览器也能看到重要信息。 - 系统空闲检测 (Idle):
chrome.idle— 监听操作系统层面的鼠标、键盘输入，判断当前用户是否离开电脑（锁屏/闲置），可用于智能暂停任务或触发特定行为。 - 原生应用通信 (Native Messaging):
chrome.runtime.connectNative— 插件通往操作系统的终极桥梁。允许插件直接与电脑上安装的独立本地软件 (如 Python 脚本、C++ 编译的 .exe) 进行双向实时数据通信（如 1Password 插件与桌面客户端同步数据），实现深度集成。 - 下载器接管 (Downloads):
chrome.downloads— 监听、暂停、取消浏览器的下载，或者通过代码强制发起下载并重命名/自定义保存路径，实现下载管理自动化。
📌 复习：油猴脚本 (Userscript) vS 浏览器插件 (Extension)
Section titled “📌 复习：油猴脚本 (Userscript) vS 浏览器插件 (Extension)”在构思功能时，可以根据下表快速决定技术方案：
- 选择【油猴脚本】： 只需要“改造单网页内部”（DOM、事件、简单样式）、自用、或者因功能敏感（如视频下载）无法通过官方审核、需要快速上线的轻量工具。它更侧重于对单个页面的定制化改造。
- 选择【浏览器插件】： 需要“掌控浏览器外壳”（侧边栏、右键菜单、下载接管、系统通知、标签页管理）、需要复杂状态管理（Storage）、需要商业化产品上架、追求完美产品体验的 SaaS 应用。插件提供了更广阔的权限和更强大的系统级集成能力。