王志远，微医前端技术部
系列文前言
chrome扩展开发的系列文章，个人推荐学习方式：
- 系统知识框架搭建：根据本文中的【学习脉络】内容先形成关于 chrome 扩展的知识框架（每个知识点都有实战 demo）
- 实战实战：可以考虑根据市面上的扩展找自己感兴趣的去实现一款，可见网友整理的扩展推荐列表；此外，多关注自己平时的吐槽
本系列文章预期包含如下内容
关于训练营的学习流程
| 小节主题 | 文档 | 期待产出 | 补充 |
|---|---|---|---|
| 学习起始篇 | 本文 | 扩展能做到什么/如何学习扩展/扩展基础组成概念 | |
| 开发调试发布 | 熟悉谷歌扩展的开发流程/调试流程/发布流程 | ||
| 谷歌扩展核心机制详解：数据流处理能力、UI 能力、浏览器特性 | 扩展能力知识体系学习，根据文档实现所有相关 demo | ||
| 谷歌扩展核心机制详解：下载、网络请求、代理、系统信息 | 扩展能力知识体系学习，根据文档实现所有相关 demo | ||
| 综合实战：一键合并窗口、消息通知 | 一键合并窗口、消息通知、实现自己 promisify 版谷歌 api | ||
| 框架升级：Vue 开发实现一图一诗（新开 tab 页打开自己的内容） | 使用 Vue 开发扩展，实现自己对扩展脚手架 | ||
| 落地：debug-plugin 集成谷歌扩展 | 原调试插件重构为谷歌扩展并集成进项目 |
关于 chrome 知识体系的学习流程
- 基础概念：chrome 宏观拆分，Extension Page / Content_script / chrome API
- 扩展注册：manifest.json
- 数据流：用户页面操作 ｜后台逻辑｜弹出层逻辑｜扩展通信 ｜ 跨域请求 ｜ 数据存储
- 扩展的 UI 界面：popup ｜ browser_action（page_action）｜右键菜单 ｜桌面通知 ｜ 地址栏
- 浏览器特性：书签 ｜ cookies ｜ 历史 ｜ 标签 ｜自定义页面
- 其余高级特性：下载 ｜网络请求｜代理｜系统信息
项目产出
快来看看你将收获到啥叭～，超多实战小demo，方便学习理解以及后续cv使用，所有项目代码均在仓库：github.com/Sympath/tra…
【永远找不到的百度搜索】：操作用户页面，恶作剧扩展，让你永远也点击不到 baidu 的搜索按钮
【窗口合并】：操作标签和窗口，点击扩展时，实现将所有窗口等 tab 页合并到当前窗口
【显示百度对名称的搜索结果】：请求，获取用户输入关键词，调用接口，将结果返回
【实时查询美元汇率】：地址栏提示
【图标不断旋转的扩展】：操作图标
【使用 百度 翻译当前用户所选文本】：右键菜单
【一图一诗】：Vue 开发扩展，新开 tab 页时采用自己的 html 页作为默认页，类似掘金插件
基础概念
Chrome 扩展是一个用 Web 技术开发结合浏览器暴露的能力用来增强浏览器功能的软件，它其实就是一个由 HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包（crx可能是Chrome Extension的简写），本地也可以直接引入文件夹。
从最上层chrome扩展可以分为三大块
- Extension Page：包括 background.html 和 popup.html
- background：独立于网页并且一直运行在后台，通过调用浏览器提供的 API 和浏览器进行交互
- popup：点击图标的弹出层
- Content_script：加载并注入到该网页的环境中，可以理解为就是脚步（xss？）
- chrome API：chrome 提供的能力
存在相关的三个进程：扩展进程（Extension Process）、页面渲染进程（Render Process）、浏览器进程（Browser Process）。渲染进程主要运行 Web Page，浏览器进程在这里更多起到桥梁作用，作为中转可以实现 Extension Page 和 Content_script.js 之间的消息通信。
这里补充两个小 tip：
- 扩展和插件是有区别的，我们学习的是扩展，仅仅是用浏览器提供的能力聚合来增强浏功能，前端三大件进行开发；而 chrome 插件则能够更改浏览器本身的能力，C/C++进行开发。
- 目前 chrome 扩展应用市场不再支持 Manifest V2 了，需要指定 V3 版本才能发布，可以参考Welcome to Manifest V3
Chrome 扩展能做到什么
- 扩展 UI 管理：用户页内容控制（一键换肤） / 自定义浏览器打开页（掘金） / 书签控制（Ease Bookmarks，生成书签内所有链接） / 窗口控制（窗口合并） / 下载控制（ 猫爪 + chrome Download）
- 数据流状态控制：页面脚本（网页批注工具 Hypothesis） / 后台运行 / cookie 处理（cookie Manage）
- 网络请求控制：转发/重发/日志（微医乾坤袋） 等等，chrome 可以无视跨域限制
- 等等等
简单来说：Chrome 扩展插件是用前端的技术栈，来定制浏览器的功能，改善用户体验。
尾声
总之，一个工具的诞生，无非就是根据需求和已有的能力考虑产品雏形，该怎么呈现，有哪些功能，解决了什么问题，想拥有你自己的扩展插件吗？冲呀！
