乐趣区

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

1、前言

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

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

浏览器 市场份额 月涨跌份额
Chrome 66.19% -0.74%
Edge 10.84% +0.2%
Safari 8.94% +0.01%
Firefox 8.08% +0.28%
Opera 3.06% +0.08%
IE 0.75%

浏览器扩大插件的用处

  • 生产力工具(和浏览器进行交互:标签、书签、下载、代理、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.jsonJavaScriptHTMLCSS 文件、图片等。

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 Pagebackground.jscontent_script.js

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

(图片起源网络,侵删)

运行时的三个过程:

  • 扩大过程(Extension Process)
  • 页面渲染过程(Page Render Process)
  • 浏览器过程(Browser Process)
  1. 扩大过程 中运行 Extension Page,次要包含backgrount.htmlpopup.html,
  • backgrount.html中没有任何内容,是通过 background.js 创立生成,当浏览器关上时,会主动加载插件的 background.js 文件,它独立于网页并且始终运行在后盾,它次要通过调用浏览器提供的 API 和浏览器进行交互
  • popup.html有内容的,跟咱们一般的 web 页面一样,由 htmlcssJavascript 组成,它是按需加载的,须要用户去点击地址栏的按钮去触发,能力弹出页面。
  1. 渲染过程 次要运行 Web Page, 当关上页面时,会将content_script.js 加载并注入到该网页的环境中,它和网页中引入的 Javascript 一样,能够操作该网页的 DOM Tree 扭转页面的展现成果
  2. 浏览器过程 在这里更多起到桥梁作用,作为直达能够实现 Extension Pagecontent_script.js之间的音讯通信。

最初

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


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

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

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

退出移动版