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

一、插件是什么?

插件是遵循一定规范的应用程序接口编写出来的程序,而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》,讲的非常全面非常好有兴趣的可以看看,回到整体,当我们看第一章的时候,一切都非常的好,但是到了第二张的时候却出现了一个非常烦人的弹窗

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

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插件开发内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

    一.插件是什么? 插件是遵循一定规范的应用程序接口编写出来的程序,而chrome插件则是运行在chrome浏览器上的小程序,能帮我们解决一下工作学习中一些重复繁琐的事情. 二.插件的基础知识 对于chrome插件来说,最核心的应该是manifest.json这个配置文件了,利用它我们可以定义在什么时机在什么网页执行什么脚本,有一些什么行为,下面先看一下manifest.json的格式: { // 扩展名称 "name": "MyExtension", // 版本.由

  • SpringBoot开发实战系列之定时器

    前言 定时器功能在项目里面往往会用到,比如定时发送邮件.定时释放数据库资源:这里记录一下springboot对定时器的支持的简单实例 cron表达式 开始之前要先介绍一下cron表达式,这里当一下百度百科搬运工: Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: Seconds Minutes Hours DayofMonth Month DayofWeek Year或 Seconds Minutes Hours Dayof

  • SpringBoot开发实战系列之动态定时任务

    目录 前言 代码编写 效果演示 启动 修改 停止 后记 前言 定时器是我们项目中经常会用到的,SpringBoot使用@Scheduled注解可以快速启用一个简单的定时器(详情请看我们之前的博客<SpringBoot系列--定时器>),然而这种方式的定时器缺乏灵活性,如果需要对定时器进行调整,需要重启项目才生效,本文记录SpringBoot如何灵活配置动态定时任务 代码编写 首先先建表,重要字段:唯一表id.Runnable任务类.Cron表达式,其他的都是一些额外补充字段 DROP TABL

  • vue.js 初体验之Chrome 插件开发实录

    背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中

  • Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

    Chrome浏览器的alert弹窗,选择了禁止再次弹出后,就不会再弹出了. 第一次弹出alert弹窗没有"禁止此页再显示对话框"选项,第二次和以后才有. 这个功能在开发测试中,或者程序出现bug时,页面不断弹出对话框时,很有作用,这时候只需要勾选不再弹出对话框,就不会再出现了. 但如果要让他再次弹出,怎么办呢? 试了刷新页面,不能让弹窗再次出现. 其实只要把页面关闭,或者浏览器关闭,然后再打开,就能恢复弹出了. 手机版的浏览器也可以这样处理. 也就是说重启一下浏览器,或者关闭重开页面就

  • Python3网络爬虫开发实战之极验滑动验证码的识别

    上节我们了解了图形验证码的识别,简单的图形验证码我们可以直接利用 Tesserocr 来识别,但是近几年又出现了一些新型验证码,如滑动验证码,比较有代表性的就是极验验证码,它需要拖动拼合滑块才可以完成验证,相对图形验证码来说识别难度上升了几个等级,本节来讲解下极验验证码的识别过程. 1. 本节目标 本节我们的目标是用程序来识别并通过极验验证码的验证,其步骤有分析识别思路.识别缺口位置.生成滑块拖动路径,最后模拟实现滑块拼合通过验证. 2. 准备工作 本次我们使用的 Python 库是 Selen

  • 微信小程序开发实战快速入门教程

    目录 注册微信小程序 微信开发者工具 第一个小程序 新建项目 项目目录结构 目标成果 步骤分解 页头页尾 个人中心 生活指南 模拟弹窗 预览图片 注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册.注册的账号类型可以是订阅号.服务号.小程序以及企业微信,我们选择 “小程序” 即可. 接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册.未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序. 激活邮箱之后,选择主体类型为

  • JavaScript使用DeviceOne开发实战(二) 生成调试安装包

    在上篇文章给大家介绍了JavaScript使用DeviceOne开发实战(一) 配置和起步,本篇文章继续给大家介绍关于javascript实战相关内容,一起学习吧. 生成调试安装包 首先需要说明的是,这个步骤并不是每次调试App都必须的,大部分情况生成一次调试安装包,安装到手机上之后就可以忽略整个这个步骤.因为调试安装包包含了很多原生组件,都是可以定制勾选的,如果你需要额外增加一些原生组件,则需要勾选更多的组件并要重新生成调试安装包. 点击调试程序的菜单里的"Build Debug Versio

  • 微信小程序开发实战教程之手势解锁

    代码:https://github.com/jsongo/wx-gesture-lock 这个手势解锁的demo使用了https://github.com/lvming6816077/H5lock这个项目的算法和主逻辑,整合到微信小程序来,修改了很多地方的语法来适配小程序,去掉了window.document等函数,同时也添加了新的机制来解耦界面的操作和第三方库,这个下面会介绍到. 不过可惜的是,这个demo也只能在开发工具上玩玩,到真机上测试的时候,手指一滑动,页面会跟着滚动,手势没法使用.

  • Android之使用Android-query框架开发实战(二)

    在上篇文章跟大家介绍了Android之使用Android-query框架开发实战(一),本文继续跟大家介绍有关Android-query框架.具体内容请看下文. 异步网络: 1. 添加权限:<uses-permission android:name="android.permission.INTERNET" /> 2. 支持的类型 JSONObject JSONArray String (HTML, XML) XmlDom (XML parsing) XmlPullPars

随机推荐