认识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扩展插件势在必行♂️
扩展程序是基于 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)
- 扩展进程中运行
Extension Page
,主要包括backgrount.html
和popup.html
,
backgrount.html
中没有任何内容,是通过background.js
创建生成,当浏览器打开时,会自动加载插件的background.js文件,它独立于网页并且一直运行在后台,它主要通过调用浏览器提供的API和浏览器进行交互popup.html
有内容的,跟我们普通的web页面一样,由html
、css
、Javascript
组成,它是按需加载的,需要用户去点击地址栏的按钮去触发,才能弹出页面。
渲染进程主要运行
Web Page
,当打开页面时,会将content_script.js
加载并注入到该网页的环境中,它和网页中引入的Javascript
一样,可以操作该网页的DOM Tree
,改变页面的展示效果浏览器进程在这里更多起到桥梁作用,作为中转可以实现
Extension Page
和content_script.js
之间的消息通信。
最后
本文介绍的是 chrome 扩展基础知识,相信看完以上之后,你会对 Chrome 扩展插件有了一个比较清晰的认识。相信chrome扩展会大有作为,会不会迫不急待的要体验一下呢,我根据Chrome插件开发官网示例写的一个小扩展插件,点击这里查看项目。
持续更文,关注我,你会发现一个踏实努力的宝藏前端,让我们一起学习,共同成长吧。
喜欢的小伙伴记得点赞关注收藏哟,回看不迷路
欢迎大家评论交流, 蟹蟹
认识Chrome扩展插件的更多相关文章
- BlazeMeter发布chrome扩展插件,支持JMeter脚本创建
BlazeMeter发布chrome扩展插件,支持JMeter脚本创建http://www.automationqa.com/forum.php?mod=viewthread&tid=3898 ...
- 自制Chrome扩展插件:用于重定向js
前言 作为一个前端开发, 在调试生产环境的代码时,是否苦于生产环境代码被压缩,没有sourcemap? 有没有想过将生产环境的js直接重定向为本地开发环境的js? 玩微前端时,有没有想过用本地的子应用 ...
- 那些离不开的 Chrome 扩展插件
虽然Chrome浏览器是个吃内存的怪兽,但是,它却因为启动速度.调试功能等成为了程序猿的必备浏览器!今天有时间,整理一下自己最常用的一些Chrome扩展吧: 常用网页浏览非开发类扩展: Tamperm ...
- Chrome扩展插件流程
一.浏览器插件基础步骤: 1.文件最基础的配置 : 一个manifest文件.一个或多个html文件.可选的一个或多个javascript文件.可选的任何需要的其他文件,例如图片:在开发应用(扩展)时 ...
- 17 款程序员必备 Chrome扩展插件,爱了爱了!
整理:小哈学Java 目录 美化 Just Black 午夜黑官方主题 Dark Reader 暗黑主题 为什么你们就是不能加个空格呢? 标签管理 Momentum [新标签页] Tab Manage ...
- Do Chrome extensions access iframes? chrome扩展插件访问所有iframes
32down voteaccepted Yes, a Chrome Extension "content script" can run in all iframes (that ...
- chrome 扩展插件提示
--force-fieldtrials=ExtensionDeveloperModeWarning/None/ ogfahjpoemnbbnlignjbfinfnahmfdlk ahjaciijnoi ...
- 有哪些可以节省chrome内存的扩展插件?
不知道从什么时候开始,chrome浏览器就这样不知不觉的超过IE浏览器成为全球第一大浏览器.我们在赞赏chrome浏览器流畅的速度时,更多的是对其chrome插件功能的赞赏.但是我们也发现了一个致命的 ...
- 提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件
Chrome插件,官方名称extensions(扩展程序):为了方便理解,以下都称为插件. 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开 ...
随机推荐
- C++ 智能指针浅析
C++ 智能指针浅析 为了解决 C++ 中内存管理这个老大难问题,C++ 11 中提供了三种可用的智能指针.(早期标准库中还存在一种 auto_ptr,但由于设计上的缺陷,已经被 unique_ptr ...
- flowable如何适配国产数据库达梦
前言 flowable6.4.1流程引擎官方支持的数据库有:MySQL.hsql.Oracle.DB2 .postgres.SQL Server.H2.对于其他类型的数据库如何支持,尤其是国产数据库的 ...
- Blazor WebAssembly + Grpc Web = 未来?
Blazor WebAssembly是什么 首先来说说WebAssembly是什么,WebAssembly是一个可以使C#,Java,Golang等静态强类型编程语言,运行在浏览器中的标准,浏览器厂商 ...
- Spring框架系列(2) - Spring简单例子引入Spring要点
上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...
- BUUCTF-大白
大白 使用16进制打开没发现什么异常的,根据提示来看图片可能没有显示完整 将第七位修改为02即可正常查看图片.
- BUUCTF-你竟然赶我走
你竟然赶我走 首先看到这个图片没啥感觉,直接用16进制打开了.拖到最下面果然有flag flag{stego_is_s0_bor1ing}
- 【WPF】CAD工程图纸转WPF可直接使用的xaml代码技巧
前言:随着工业化的进一步发展,制造业.工业自动化等多领域,都可能用到上位监控系统.而WPF在上位监控系统方面,应该算是当下最流行的前端框架之一了.而随着监控体系的不断完善与更新迭代,监控画面会变得越来 ...
- POI导出复杂Excel,合并单元格(1)
/** * 导出复杂excel 合并单元格 (HSSFWorkbook) */ @GetMapping("/testHSSFWorkbook.do") public void te ...
- Java已知图片路径下载图片到本地
public static void main(String[] args) { FileOutputStream fos = null; BufferedInputStream bis = null ...
- 记一次 .NET 某新能源系统 线程疯涨 分析
一:背景 1. 讲故事 前段时间收到一个朋友的求助,说他的程序线程数疯涨,寻求如何解决. 等我分析完之后,我觉得这个问题很有代表性,所以拿出来和大家分享下,还是上老工具 WinDbg. 二: WinD ...