前端开发
浏览器插件（Browser Extension）是运行在浏览器内、用 HTML/CSS/JavaScript 编写的小程序，能读取和修改网页、增加浏览器 UI、在后台常驻处理事件。它解决的核心问题是：在不修改网站源码的前提下，向浏览器和任意网页注入自定义功能——广告拦截、密码管理、翻译、爬虫辅助、开发者工具增强都属于这一类。 为什么用 Vite + Vue 而不是裸写：插件本质是多个独立 HTML 入口（popup、options、side panel）加上后台脚本和内容脚本的组合。裸写需要手动维护构建、手动复制静态资源、改一行代码要重新加载整个插件。V
前端开发
本文面向已掌握 Manifest V3 基础、要做复杂、高性能、生产级插件的工程师，聚焦深水区：Service Worker（服务工作线程，简称 SW）生命周期深控、Offscreen Document（屏外文档）、declarativeNetRequest（声明式网络请求，简称 DNR）高级规则、性能与大数据存储、身份认证、Native Messaging（原生消息）、WASM（WebAssembly）加载、安全加固、并发竞态、自动化测试与 CI/CD。基础概念见 浏览器插件-基础概念与架构模型(/liu-lan-qi-cha-jian-ji-chu-
前端开发
本篇是浏览器插件（browser extension）系列的"经验篇"。它假设你已经掌握 浏览器插件-基础概念与架构模型(/liu-lan-qi-cha-jian-ji-chu-gai-nian-yu-jia-gou-mo-xing/) 中的组件模型与 浏览器插件-中级开发指南(/liu-lan-qi-cha-jian-zhong-ji-kai-fa-zhi-nan-manifest-v3-vite-vue/) 中的通信、存储、权限知识，聚焦于把"能跑"的插件做成"可上架、可维护、可信任"的产品。 全文分为四部分：高频深坑详解（现象/原因/解决三段式）、
前端开发
本文是"浏览器插件开发"系列的 Debug 篇，聚焦如何对每个上下文（context）打开开发者工具（DevTools）、如何读懂 chrome://extensions 的错误面板、高频错误的准确成因与解决方案，以及一套可落地的系统化排查流程。架构与 API 细节见系列其他篇目（文末"参见"）。 MV3 插件由若干彼此隔离的 JavaScript 执行环境（execution context）组成，每个环境有独立的全局对象、独立的 DevTools 入口、独立的 console。调试第一步永远是确认报错发生在哪个上下文，因为同名 API 在不同上下文里
前端开发
本文是浏览器插件系列的「架构篇」。前面几篇讲清楚了 MV3 有哪些能力、技术栈怎么搭、坑在哪里；这一篇只回答一个问题：当插件从「几百行脚本」长成「几千行多上下文工程」时，代码如何保持优雅、可测、可演进。 What（是什么）：浏览器插件的架构设计，是在 MV3 强制的多上下文（multi-context）隔离模型之上，建立清晰的分层与通信契约。MV3 把代码拆进了相互隔离的进程：Service Worker（后台，随时被杀）、Content Script（注入页面、与宿主 DOM 共存）、Popup / Options（短生命周期 UI 页面）、DevTo
前端开发
浏览器插件本质是「一组特殊上下文（context）的网页 + 一份清单文件 manifest.json」。manifest.json 把多个入口（popup 弹窗、options 选项页、side panel 侧边栏、content script 内容脚本、background/service worker 后台）声明给浏览器。普通前端构建工具默认面向「一个或多个 HTML 页面」，并不理解 manifest.json 里这些特殊入口与权限声明，也不会处理 content script 在目标页面的 CSS 注入、HMR（Hot Module Repla
前端开发
浏览器插件不是一个网页，也不是一个普通应用，而是一组运行在浏览器内、彼此隔离、靠消息通信协作的独立脚本上下文。理解插件开发的关键，不在于记住某个 API，而在于建立正确的心智模型：把一个插件看作"浏览器里的微服务集群"——后台 Service Worker 是常驻调度服务（但会被随时回收），内容脚本（Content Script）是潜伏在每个网页里的探针，Popup/Options/Side Panel 是按需启动的前端进程，它们都没有共享内存，只能通过消息总线和共享存储交换数据。本文是该系列的概念篇，目标是让你在写第一行代码前就理解"谁能做什么、谁和谁
前端开发
本文面向已掌握 Manifest V3 基础（manifest 结构、Service Worker 后台、消息通信）、需要落地真实功能的开发者。每个功能模块给出可直接复用的完整代码，技术栈统一为 Vite + Vue 3 + Pinia，构建假定使用 @crxjs/vite-plugin 或等价的多入口配置（产出 manifest.json 与各 HTML 入口）。 后文所有示例基于以下目录结构。src/manifest.ts 导出 manifest 对象，由构建插件生成最终 manifest.json。 声明式注入（manifest content_s
前端开发
本手册按命名空间组织。每个命名空间一个 ## 主节，每个常用方法一个 ### 子节，配参数表与最小可运行示例。代码若运行在 Service Worker（背景脚本，下文简称 SW）、内容脚本（content script）、弹窗页（popup）或选项页（options），均在示例中标注上下文。 下表用于快速判断某 API 需要在 manifest.json 声明哪些权限，以及可在哪些上下文调用。「SW」=Service Worker；「CS」=内容脚本；「页面」=popup/options/sidePanel 等扩展页。 全上下文可用，无需任何权限，是消