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插件开发内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 我打开android开发手册的时候:http://www.csdn123.com/html/android/reference/packages.html 发现打开速度很慢,我用按了一下F12打开调试面板,切换到网络的选项卡network...2016-05-19
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
这篇文章主要介绍了利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化),本文给大家介绍的非常想详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-24- 从这一节开始,我们将从零开始打造我们的chrome插件工具库,第一节我们将讲一下插件开发的基础知识并构建一个简单但却很实用的插件,在构建之前,我们先简单的了解一下插件以及插件开发的基础知识...2020-10-03
- 这篇文章主要给大家分享我对JS插件开发的一些感想和心得的相关资料,需要的朋友可以参考下...2016-02-09
- 这篇文章主要介绍了chrome监听cookie变化与赋值问题,cookie监听与赋值操作需要manifest文件里声明权限问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-22
- Chrome 浏览器有一个好处,就是插件极其丰富,只有你想不到的,没有你找不到的,这恐怕是 Chrome 浏览器被众多爱好者钟爱的原因吧。今天给大家分享这些插件太强了,Chrome 必装!尤其程序员...2021-05-19
PyCharm插件开发实践之PyGetterAndSetter详解
这篇文章主要介绍了PyCharm插件开发实践-PyGetterAndSetter,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-02PHP+mysql+ajax轻量级聊天室实例(兼容Chrome和IE)
ajax聊天室就是定时不定的刷新框架页面了,下面来给各位整理了一个PHP+mysql+ajax轻量级聊天室实例(兼容Chrome和IE)的例子,希望对大家有帮助. 做了一个QQ聊天交友...2016-11-25- 其实早在 Chrome 56(今年一月底更新)的时候,Google 就已经加进了 WebGL 2.0 的支持,但当时并没有特别着墨,而是在昨天的一篇博客文章里才做了特别的描述。WebGL 是一套以让网页得以显示靠显卡加速的 3D 画面的 JavaScript API,最早的 1.0 版六年前就已经加入 Chrome 中,而现在的 2.0 版则是增加了对延迟渲染、色调映射、粒子效果等先进的技巧。这也将 WebGL 提升到了与 OpenGL ES 3.0 相同的功能水准。...2017-07-06
C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)
这篇文章主要介绍了C++获取多浏览器上网历史记录示例代码,支持获取IE, Chrome,FireFox等浏览器...2020-04-25Chrome内核下由ashx输出的js代码不起作用的解决方法
Chrome内核下由ashx输出的js代码不起作用的解决方法,需要的朋友可以参考一下...2021-09-22- 这篇文章主要介绍了linux 下selenium chrome使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-10
- 这篇文章主要介绍了使用Python解析Chrome浏览器书签的示例,帮助大家更好的理解和使用python,感兴趣的朋友可以了解下...2020-11-14
- 这篇文章主要介绍了javascript插件开发的一些感想和心得,需要的朋友可以参考下...2016-03-01
- 在过去的十几年里,Google 一直占据着搜索引擎的霸主之位,旗下的 Chrome 浏览器也在上架后的短短几年内超过了 IE 成为 PC 市场占有率最高的浏览器。...2016-12-07
selenium+headless chrome爬虫的实现示例
这篇文章主要介绍了selenium+headless chrome爬虫的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-09- 这篇文章主要介绍了JS使用Chrome浏览器实现调试线上代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-24
Chrome Visual Studio 2005下的编译过程
研究Chrome ,首先得把它编译出来,这对于后续的代码分析和阅读有很大的帮助,想想自己编译出一个 Chrome 浏览器来使用,那是一件很炫的事情。...2020-06-25- 在chrome浏览器中F10设置断点后按此键可以一行一行执行js,在执行的过程中若遇到了一个js函数就可以按F11键跳到那个函数里面去...2020-04-13
- 这篇文章主要介绍了实现在 Chrome 中执行 JavaScript 代码,下面来介绍如何在 Chrome 中打开开发者工具,以及如何在开发者工具中运行调试 JavaScript 代码,具有一的的参考价值,需要的朋友可以参考一下...2022-03-03