关于前端:认识Chrome扩展插件

1、前言

现如今的时代，绝大多数人都要跟浏览器打交道的，说到浏览器那必定是 Chrome 浏览器一家独大，具体数据请看👇

出名流量监测机构 Statcounter 颁布了 7 月份寰球桌面浏览器市场份额，次要数据如下：

浏览器扩大插件的用处

• 生产力工具（和浏览器进行交互：标签、书签、下载、代理、cookie 等）
• 网页内容丰盛（扭转浏览器外观、桌面告诉、右键菜单、定制新标签页）
• 信息聚合（更像是一个 快利用，相似小程序）
• 乐趣和游戏（小恐龙（chrome://dino/）游戏，想必都玩过）

总之扩大程序让浏览器的性能更加弱小，更加贴合用户应用。不论是不是软件开发人员，或多或少都会应用到浏览器扩大插件，常见的比方：书签、网页翻译、广告屏蔽 ……

学习 Chrome 扩大插件势在必行🏃‍♂️🐱‍🏍

• Chrome extensions 文档
• 插件的架构能够参考这里
• Chrome 扩大程序利用商店入口
• 治理应用 chrome 扩大。拜访 url: chrome://extensions，关上开发者模式

扩大程序是基于 Web 技术（如 HTML、CSS 和 JavaScript）构建的软件程序，使用户可能自定义 Chrome 浏览体验。（前端开发人员技能范畴之内😁😁）

本文从利用着手，通过解说扩大插件的个性来启发读者对其进一步摸索。

2、Chrome extensions 和 Chrome Plugin 的区别

• Chrome Extension（Chrome 扩大插件）仅仅是用来加强浏览器网页的性能，它是利用浏览器提供的已有性能和和各种 API，进行性能组合，从而改善浏览器体验，停留在 浏览器层面；
• Chrome Plugin（Chrome 插件）不仅能加强网页的性能，同时可能扩大浏览器自身的性能；当浏览器提供的性能曾经无奈满足你的需要，就须要你通过 C /C++ 这样的编译语言来扩大浏览器的性能，例如咱们罕用的 Flash 插件，Chrome Plugin 工作在 内核层面。

3、扩大如何工作

• 扩大是基于 HTML、JavaScript 和 CSS 等 Web 技术构建的。它们在独自的沙盒执行环境中运行，并与 Chrome 浏览器交互。
• 扩大容许您通过应用 API 批改浏览器行为和拜访 Web 内容来“扩大”浏览器。扩大通过最终用户 UI 和开发人员 API 进行操作：
• 扩大用户界面 这为用户提供了一种统一的形式来治理他们的扩大。
• 扩大 API 容许扩大代码拜访浏览器自身的性能：激活选项卡、批改网络申请等。

要创立扩大，您须要组合一些资源清单: manifest.json、JavaScript、HTML 和 CSS 文件、图片等。

4、Chrome 扩大文件

Chrome 扩大文件以.crx 为后缀名，.crx 实际上是一个压缩文件，应用解压文件关上这个文件就能够看到其中的文件目录

下图是 Axure 扩大插件原文件：

因而能够认为，咱们实际上就是写一个 Web 利用，而后将依照 Chrome 的规定将一个 快捷方式 放在 Chrome 工具栏上。如下图：

上图中右边地址栏外部的按钮是 page action（Chrome 插件，间接内置在 Chrome 里的），左边地址栏内部的是 browser action（Chrome 扩大插件）

5、扩大插件应用

对于开发和测试，您能够应用扩大开发者模式将这些“解压”加载到 Chrome 中，或者间接拖动 crx 文件到治理扩大插件页面。如果扩大感到称心，也能够打包并分享给小伙伴应用。

6、popup 弹出窗口

• popup.html能够在外面搁置任何 html 元素，它的宽度是自适应的。当然，这个弹出窗口不会被 Chrome 拦挡
• popup 无奈通过程序关上，只能由用户点击关上。点击 popup 之外的区域会导致 popup 收起。

下图是 FeHelper 扩大插件的弹出窗👇

7、Background Pages 后盾页面

8、Chrome 扩大插件运行的外围机制

Chrome 扩大插件中比拟外围的几个概念：Extension Page、background.js、content_script.js

下图展现他们之间的关系，以及如何通信

（图片起源网络，侵删）

运行时的三个过程：

• 扩大过程（Extension Process）
• 页面渲染过程（Page Render Process）
• 浏览器过程（Browser Process）

1. 扩大过程 中运行 Extension Page，次要包含backgrount.html 和popup.html,

• backgrount.html中没有任何内容，是通过 background.js 创立生成，当浏览器关上时，会主动加载插件的 background.js 文件，它独立于网页并且始终运行在后盾，它次要通过调用浏览器提供的 API 和浏览器进行交互
• popup.html有内容的，跟咱们一般的 web 页面一样，由 html、css、Javascript 组成，它是按需加载的，须要用户去点击地址栏的按钮去触发，能力弹出页面。

2. 渲染过程 次要运行 Web Page, 当关上页面时，会将content_script.js 加载并注入到该网页的环境中，它和网页中引入的 Javascript 一样，能够操作该网页的 DOM Tree， 扭转页面的展现成果
3. 浏览器过程 在这里更多起到桥梁作用，作为直达能够实现 Extension Page 和content_script.js之间的音讯通信。

最初

本文介绍的是 chrome 扩大基础知识，置信看完以上之后，你会对 Chrome 扩大插件有了一个比拟清晰的意识。置信 chrome 扩大会庸庸碌碌，会不会迫不急待的要体验一下呢🤔，我依据 Chrome 插件开发官网示例写的一个小扩大插件，点击这里查看我的项目。

🌹 继续更文，关注我，你会发现一个虚浮致力的宝藏前端😊，让咱们一起学习，独特成长吧。

🎉 喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路 😉

🎁 欢送大家评论交换, 蟹蟹😊