Chrome插件开发系列一:弹窗终结者开发实战


Posted in Javascript onOctober 02, 2020

一、插件是什么?

插件是遵循一定规范的应用程序接口编写出来的程序,而chrome插件则是运行在chrome浏览器上的小程序,能帮我们解决一下工作学习中一些重复繁琐的事情。

二、插件的基础知识

对于chrome插件来说,最核心的应该是manifest.json这个配置文件了,利用它我们可以定义在什么时机在什么网页执行什么脚本,有一些什么行为,下面先看一下manifest.json的格式:

{
 // 扩展名称
 "name": "MyExtension",
 
 // 版本。由1到4个整数构成。多个整数间用"."隔开
 "version": "1.0",
 
 // manifest文件版本号。Chrome18开始必须为2
 "manifest_version": 2,
 
 // 描述。132个字符以内
 "description": ",
 
 // 扩展图标。推荐大小16,48,128
 "icons": {
  "16": "image/icon-16.png",
  "48": "image/icon-48.png",
  "128": "image/icon-128.png"
 },
 
 // 语言
 "default_locale": "en",
 
 // 地址栏右侧图标管理,含图标及弹出页面的设置等
 // 建议至少保留一个设置,不然扩展图标是暗的
 "browser_action": {
  "default_icon": "image/icon-128.png",
  "default_title": "My Message",
  "default_popup": "html/browser.html"
 },
 
 // 地址栏最后附加图标。含图标及行为等
 "page_action": {
  "default_icon": "image/icon-48.png",
  "default_title": "My Test",
  "default_popup": "html/page.html"
 },
 
 // 主题,用于更改整个浏览器的外观
 "theme": {},
 
 // 指定扩展需要跳转到的URL
 "app": {},
 
 // 指定扩展进程的background运行环境及运行脚本
 "background": {
  "scripts": [
   "lib/jquery-3.3.1.min.js",
   "js/background.js"
  ],
  "page":"html/background.html"
 },
 
 // 替换页面
 "chrome_url_overrides": {
  "pageToOverride": "html/overrides.html"
 },
 
 // 指定在web页面运行的脚本/插入的css及运行/插入时机
 "content_scripts": [{
  "matches": ["https://www.baidu.com/*"],
  "css": ["css/mystyles.css"],
  "js": ["lib/jquery-3.3.1.min.js", "js/content.js"],
  "run_at": "document_idle"
 }],
 
 // 安全策略
 "content_security_policy": ",
 
 "file_browser_handlers": [],
 
 // 扩展的官方主页
 "homepage_url": "http://xxx",
 
 // 插件在隐私模式下的配置
 "incognito": "spanning",
 
 // 用户操作意图描述
 "intents": {},
 
 // 扩展唯一标识。不需要人为指定
 "key": ",
 
 // 扩展所需chrome的最小版本
 "minimum_chrome_version": "1.0",
 
 // 消息与本地处理模块映射
 "nacl_modules": [],
 
 // 是否允许脱机运行
 "offline_enabled": true,
 
 // ominbox即地址栏。用于响应地址栏的输入事件
 "omnibox": {
  "keyword": "myKey"
 },
 
 // 选项页。用于在扩展管理页面跳转到选项设置
 "options_page": "aFile.html",
 
 // 申请权限
 "permissions": [
  "https://www.baidu.com/*",
  "background",
  "tabs"
 ],
 
 // 扩展。可调用第三方扩展
 "plugins": [{
  "path": "extension_plugin.dll",
  "public": true
 }],
 
 // 指定所需要的特殊技术。目前只支持"3D"
 "requirements": {},
 
 // 自动升级
 "update_url": "http://path/to/updateInfo.xml",
 
 // 指定资源路径,为String数组
 "web_accessible_resources": []
}

这么多?先写段代码压压惊,真的别被吓着了,虽然可用的属性有这么多,但是常用的就那么几个,我们一个个看一下:

1、name 扩展名称。

2、version 插件的版本。

3、manifest_version manifest配置文件版本。

4、description 对于插件功能的描述。

5、icons 插件的图标 可以为插件找一个好看的图标。

6、browser_action 可以定义插件的图标,点击插件时弹出的页面,以及插件的标题,建议始终保留一个,直接不设置这个属性图标会是灰色的,设置了后才会亮起来。

7、background 背景页,扩展进程的背景运行环境,可以拦截修改请求等等。

8、content_scripts 内容脚本,可以指定在什么时机向什么页面插入什么脚本或者css资源

9、permissions 权限申请项,比如存储权限storage,请求拦截权限webRequest, webRequestBlocking等等。

在了解了这些基础知识之后,剩下的工作就是按照我们想要实现的实际功能,编写代码就好了,下面我们正式开始编写我们的第一个插件,由于是第一个插件,虽然功能很简单,但是我们也要给他取一个响亮的名字“插件终结者”,怎么个终结法,且听我们一一道来。

首先我们打开素材链接:http://webpack.wuhaolin.cn,这是一本在线书籍,叫《深入浅出webpack》,讲的非常全面非常好有兴趣的可以看看,回到整体,当我们看第一章的时候,一切都非常的好,但是到了第二张的时候却出现了一个非常烦人的弹窗

Chrome插件开发系列一:弹窗终结者开发实战

当然,作为程序员的我们肯定不能被这小小的弹窗难住,然后我们做了第一次尝试,打开开发者工具,找到弹窗所在的节点,移除掉,但是当我们滚动的页面的时候那该死的弹框又出现了,说明有代码在监听弹窗节点,当不存在的时候直接新加一个。接着我们做了第二次尝试,既然你不让我移除节点,那我们不移除了,同样的找到弹窗节点,添加样式:

display: none!important;

使用!important的目的是为了提升样式的优先级,让弹窗始终不可见,在写入了这个样式后,弹窗就隐藏了,而且滚动的时候也不会再出现,但是当我们看其他章节或者刷新页面的时候那恼人的弹框又出来了,能不能自动处理隐藏呢?

是时候展示真正的技术了,我们之前在介绍基础知识的时候提到了content_scripts字段,可以定义在什么时机向什么页面插入什么脚本或css资源,我们只需要在上面的页面加载完成后,向页面注入隐藏弹窗的css代码就好了。

.gitbook-plugin-modal {
 display: none!important;
}

manifest配置文件:

{
 "name": "PopBlock",
 "version": "1.0",
 "manifest_version": 2,
 "description": "移除闹人的弹框",
 "browser_action": {
  "default_title": "PopBlock"
 },
 "content_scripts": [{
  "matches": ["http://webpack.wuhaolin.cn/*"],
  "css": ["css/popup.css"],
  "run_at": "document_end"
 }]
}

这个并没有添加图标,可以自行添加,然后我们用chrome浏览器开发者模式加载我们编写的插件,会发现再也不会有烦人的弹窗干扰我们的视线了。

Chrome插件开发系列一:弹窗终结者开发实战

Chrome插件开发系列一:弹窗终结者开发实战

本节的内容到此就结束了,在这个系列中,我尽量会和大家一起编写一些比较实用的插件,请期待后面的文章吧。

到此这篇关于Chrome插件开发系列一:弹窗终结者开发实战的文章就介绍到这了,更多相关Chrome插件开发内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
js转义字符介绍
Nov 05 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
Vue渲染函数详解
Sep 15 Javascript
js通过canvas生成图片缩略图
Oct 02 #Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 #Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 #Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 #Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 #Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 #Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 #Javascript
You might like
基于PHPExcel的常用方法总结
2013/06/13 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Python中将字典转换为列表的方法
2016/09/21 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python操作excel让工作自动化
2019/08/09 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python如何存储数据到json文件
2020/03/09 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
智能室内花园:Click & Grow
2021/01/29 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
教师个人剖析材料
2014/02/05 职场文书
家长学校工作方案
2014/05/07 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2015高考寄语集锦
2015/02/27 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android