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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
node.js通过url读取文件
Oct 16 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
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
js静态作用域的功能。
2006/12/25 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
tensorflow 获取变量&打印权值的实例讲解
2018/06/14 Python
python 正确保留多位小数的实例
2018/07/16 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
幼儿园教师个人反思
2014/01/30 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
雷锋的故事观后感
2015/06/10 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python