Chrome插件开发,美化网页上的文件列表。chrome-extension,content-scripts
趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧。
最近也是需求驱动,研究了下Chrome插件开发。来看一下我们公司运维提供的日志查看页面
所有项目的日志都参杂在一起,每次去找都很痛苦。慢慢发现这些日志的名称都有个规律:项目名-日期-后缀,于是想美化下这个页面,但是服务端还动不了,只能在浏览器端想办法。
Chrome插件可以本地渲染页面,是个非常不错的选择,直接来看下完成的效果
按照“项目名”和“日期”分类了,这样便于查看。同时页面也美化了,不仅实用而且赏心悦目。
一、从零开始了解Chrome插件开发
Chrome插件开发对环境要求极低,有一个最基本的前端开发IDE就可以了,先新建一个必须的文件:manifest.json
{
"name": "WebFileFilter",
"version": "1.0.0",
"description": "fast sort your webpage files",
"icons": {
"16": "images/icon_16px.png",
"48": "images/icon_48px.png",
"128": "images/icon_128px.png"
},
"browser_action": {
"default_icon": "images/icon_16px.png",
"default_title": "WebFileFilter"
},
"content_scripts": [
{
"matches": [
"http://115.28.113.150:55000/log/"
],
"js": [
"js/content_scripts_list.js"
],
"run_at": "document_start"
}
],
"manifest_version": 2
}
其他属性不多说了,看看就明白。说说“content_scripts”下的“matches”节点,这个里面就是要注入js的URL地址,而“content_scripts_list.js”就是要注入的js,在“content_scripts_list.js”写一行测试代码
console.log("hello world!");
看一下项目结构
一个最基本的Chrome插件就完成了,去安装一下:打开Chrome浏览器 - 更多工具 - 扩展程序,打开“开发者模式” - 加载已解压的扩展程序 - 选择src目录 - 确定。再刷新下页面,看看效果
可以看到“content_scripts_list.js”已经注入这个页面了
二、美化页面
可以向这个页面注入js,当然也可以向这个页面注入css
{
"name": "WebFileFilter",
"version": "1.0.6",
"description": "fast sort your webpage files",
"icons": {
"16": "images/icon_16px.png",
"48": "images/icon_48px.png",
"128": "images/icon_128px.png"
},
"browser_action": {
"default_icon": "images/icon_16px.png",
"default_title": "WebFileFilter"
},
"content_scripts": [
{
"matches": [
"http://115.28.113.150:55000/log/"
],
"css": [
"css/bootstrap.min.css"
],
"js": [
"js/jquery.min.js",
"js/bootstrap.min.js",
"js/content_scripts_list.js"
],
"run_at": "document_start"
}
],
"manifest_version": 2
}
jQuery和Bootstrap都注入进来了,那就可以随意渲染页面了。这回“content_scripts_list.js”就不输出“hello world”了,要去获取页面原有的数据绑定到bootstrap插件上,然后去覆盖页面原来的内容,具体实现看文章结尾的源码链接。
注:“run_at”设置成“document_start”表示在原页面加载之前就注入css和js。如果不这么设置,访问页面的时候,原页面刷的一下过去再显示美化后的页面,体验较差。
同时“content_scripts_list.js”里面所有的js都需要写在document的DOMContentLoaded事件里面,否则也是达不到效果的
document.addEventListener('DOMContentLoaded', function () {
//your js...
});
三、总结
本文以美化日志页面为例,其实适用于所有web服务器输出的文件列表页面。最近上网发现这个页面
文件名完全符合这样的格式:分类A-分类B-分类C,于是代码都不用改,直接把这个URL地址(https://jiacrontab.iwannay.cn/download/)配置到content_scripts下的matches节点,来看下美化后的效果
Chrome插件本地源码路径,方便学习其他优秀插件的代码:
1)windows xp:C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions
2)windows xp+:C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions
3)MAC:~/Library/Application Support/Google/Chrome/Default/Extensions
4)Ubuntu:~/.config/google-chrome/Default/Extensions
四、其他
Chrome插件开发有很多的api,功能非常强大。这里仅抛砖引玉,更多使用场景大家自己去发挥。源码地址 Chrome商店 开发文档
Chrome插件开发,美化网页上的文件列表。chrome-extension,content-scripts的更多相关文章
- Chrome插件开发,美化网页上的文件列表。chrome-extension,background
上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...
- Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常
在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, butto ...
- 基于Apache服务在centos7上搭建文件列表
参考文献: https://www.cnblogs.com/snake553/p/8856729.html https://blog.csdn.net/yejinxiong001/article/de ...
- php网页上传文件到Ubuntu服务器(input type=fire)- 赖大大
直接上代码: <form enctype="multipart/form-data" method="post" action=""& ...
- 【已解决】ERR_BLOCKED_BY_XSS_AUDITOR:Chrome 在此网页上检测到了异常代码:解决办法
工作中,用Selenium自动化填表并获取结果时,程序一直安静的读取数据库,网页填表,获取结果,存库,但跑着跑着突然报错了. 排查后,原来不是Selenium的问题,是数据比较特殊,带了个双引号,如下 ...
- linux下载网页上的文件夹以及删除文件(stream)
wget -nd -r -l1 --no-parent http://www.cs.virginia.edu/stream/FTP/Code/ 注:-nd 不创建目录:-r 递归下载:-l1只下载当前 ...
- 网页上下载文件提示框(vb.net)
Public Sub downLoadFile(ByVal fPath As String) Dim fileInfo As System.IO.FileInfo = New System.IO.Fi ...
- IIS发布的网页上传文件被拒绝
在IIS所在的服务器共享的权限(如下图示,但注意不是加everyone)和共享文件夹的权限里都加上IIS_USER完全控制,如果不行再加上NETWORK SERVICE权限
- 在MVC中利用uploadify插件实现上传文件的功能
趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同 ...
随机推荐
- 随便写写,也有一些参考了我jio的很好的他人的成果
Spring框架学习记录(1) 一. https://www.cnblogs.com/yuanqinnan/p/10274934.html (一)只要用框架开发java,一定躲不过spring,Spr ...
- UniGui中使用Grid++Report报表控件子报表获取数据的方法
Grid++Report是为优秀的报表控件,子报表是其重要功能之一,但Grid++Report提供的网页报表示范主要是以页面为主的,UniGui在Delphi中以快速编写web管理软件著称,但由于资料 ...
- 在使用可变数组过程中遇到*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: '-[__NSCFDictionary setObject:forKey:]: mutating method sent to immutable object'问题
*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: '-[__NSCFD ...
- UglifyJs打包压缩问题引起的思考
问题背景 最近做了一个webapp项目,qa用手机测试功能时,在iphone6plus上表现是白屏,其他手机目测是ok的:因为之前在测试其他项目时也发现在这个iphone6上表现与其他手机不太一样.于 ...
- JVM指令集
指令集,其实就是一系列指令的集合.例如我们需要给一个局部变量赋予1这个值,即这个动作:int a = 1; 在我们看来,这很简单,但对于机器来说需要很多个动作.所以Java虚拟机指令集就是将这些常用的 ...
- Javascript高级编程学习笔记(77)—— 表单(5)过滤输入
在日常实践中,我们常常会需要用户按照某种规则输入数据 但是文本框在默认情况下缺少验证数据的手段,因此需要使用JS来完成此类过滤输入的操作 通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件 ...
- Python学习笔记【第四篇】:基本数据类型
变量:处理数据的状态 变量名 = 状态值 类型 python中有以下基本数据类型: 1:整形 2:字符串类型 3:Bool类型 4:列表 5:元祖(不可变) 6:字典(无序) 7:集合 (无序.不重复 ...
- js控制多层单选,多选按钮,做隐藏操作
项目中遇到多层级单选,多选按钮的置灰/隐藏操作.特意写了一个公用组件: //置灰方式 //controllerArr数组添加如下数据: //{ctrlName:"gds_anquanyuan ...
- Robot Framework - 4 - 创建和扩展测试库的示例
创建和扩展Library的示例 示例:Check status on Linux OS 创建与使用library的基本步骤: 1--- library实现的内容和实现的方式 ...
- Spring AOP实战例子与springmvc整合不起效果的解决办法
在使用AOP之前,首先我们先了解一下什么是AOP吧.在网上很多人将AOP翻译为“面向切面编程”,什么是面向切面?与面向对象有什么区别呢? 在回答这两个问题之前,我们先要明白切面的概念. 切面由切点与增 ...