欢迎光临
我们一直在努力

[Chrome 扩展]Chrome V33+ 版本自建扩展实现Custom.CSS效果的使用

Chrome V33+ 版本自建扩展实现Custom.CSS效果的使用

实现步骤:
1、新建一个文件夹,比如customCSS,包含custom.css和manifest.json,custom.css就是新版被阉割的那个文件
2、manifest.json的内容如下

{
   "content_scripts": [ {
      "css": ["custom.css"],
      "matches": [ "http://*/*", "https://*/*" ]
   } ],
   "description": "PiaoYun.CC_custom.css",
   "name": "PiaoYun.CC_custom.css",
   "version": "1.0",
   "manifest_version": 2
}

description是扩展简介,name是扩展名字,version是版本号,都可以自己改

3、打开chrome的扩展管理,选择打包扩展程序,扩展程序根目录选择customCSS文件夹,私有密匙文件不用管,然后选择打包扩展程序,生成customCSS.crx和customCSS.pem密匙
4、将customCSS.crx拖入扩展管理安装即可,任务管理器里面无进程

扩展模板下载:
千军万马:http://piaoyuncc.7958.com/down_11975928.html
YunFile:http://filemarkets.com/fs/7pi7aofyu1n305b1/
360云盘:http://yunpan.cn/QIepLGqyJwHfZ
百度云盘:http://pan.baidu.com/s/1pJ2lgq3

以后还要修改可以去userdata里找到扩展文件夹 修改css文件即可!

custom.css分享内容:
以下代码来自卡饭论坛!

功效如下:

1.文字替换为微软雅黑,文字加粗,并有阴影效果~
2.网页上链接去除本身下划线,更美观。
3.鼠标指向链接,链接变大,并有淡蓝色效果。
4.Mac版输入框蓝色,边框变为圆角。
5.访问过的链接网址变为红色。firefox上的习惯红色了。也就改成红色了。
6.滚动条上下两端为圆角,鼠标放在上面会有蓝色荧光效果。
7.鼠标移动到图片上,周围会有绿色光晕效果。

/*三行分别是字体粗细(整百数字),字体样式,字体阴影*/
*{font-weight:500!important;}
*{font-family: "Microsoft Yahei", "Microsoft Yahei" !important; }
*{text-shadow:0.01em 0.01em 0.1em #999999 !important;}

/*滚动条*/
::-webkit-scrollbar{width: 6px;height: 6px;}
::-webkit-scrollbar-track-piece{background-color: #CCCCCC;-webkit-border-radius: 6px;}
::-webkit-scrollbar-thumb:vertical{height: 5px;background-color: #999999;-webkit-border-radius: 6px;}
::-webkit-scrollbar-thumb:horizontal{width: 5px;background-color: #CCCCCC;-webkit-border-radius: 6px;}
::-webkit-scrollbar {width: 9px;height: 9px;}
::-webkit-scrollbar-track-piece {background-color: transparent;}
::-webkit-scrollbar-track-piece:no-button {}
::-webkit-scrollbar-thumb {background-color: #3994EF;border-radius: 3px;}
::-webkit-scrollbar-thumb:hover {background-color: #A4EEF0;}
::-webkit-scrollbar-thumb:active {background-color: #666;}
::-webkit-scrollbar-button:vertical { width: 9px; }
::-webkit-scrollbar-button:horizontal { width: 9px; }
::-webkit-scrollbar-button:vertical:start:decrement { background-color: white; }
::-webkit-scrollbar-button:vertical:end:increment { background-color: white; }
::-webkit-scrollbar-button:horizontal:start:decrement { background-color: white; }
::-webkit-scrollbar-button:horizontal:end:increment { background-color: white; }
body::-webkit-scrollbar-track-piece {background-color: white;}

/*指向图片绿光*/
img:hover{box-shadow: 0px 0px 4px 4px rgba(130,190,10,0.6) !important;-webkit-transition-property: box-shadow;-webkit-transition-duration: .31s;}
img{-webkit-transition-property: box-shadow;-webkit-transition-duration: .31s;}

/*输入框美化*/
input { border:#ccc 1px solid; border-radius: 6px; -webkit-border-radius: 6px;-webkit-border-radius: 6px;}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {border: 2px solid #6FA1D9 !important;-webkit-box-shadow:0px 0px 5px #6FA1D9 !important;outline:none}
input[type="checkbox"]:focus,input[type="submit"]:focus,input[type="reset"]:focus, input[type="radio"]:focus {border: 1px solid #6FA1D9 !important; outline:none}
input:focus, select:focus, textarea:focus {outline: 1px solid #10bae0 ;-webkit-outline-radius: 3px ;}
body a:hover:active {color: #10bae0;}
body *:focus {outline: 2px solid rgba(16,186,224,0.5) ;outline-offset: 1px ;outline-radius: 2px ;-webkit-outline-radius: 2px ;}
body a:focus {outline-offset: 0px ;}
body button:focus,
body input[type=reset]:focus, body input[type=button]:focus, body input[type=submit]:focus {outline-radius: 2px !important;-webkit-outline-radius: 2px !important;}
body textarea:focus, body button:focus, body select:focus, body input:focus {outline-offset: -1px !important;}

/*淡蓝色样式*/
a{-webkit-transition: all 0.3s ease-out;}
a:hover{color: #39F !important;text-shadow:-5px 3px 18px #39F !important;-webkit-transition: all 0.3s ease-out;}
*::-webkit-selection {background: #333333 !important; color: #00FF00 !important; }

/*去除下划线*/
*{text-decoration:none!important}
a:hover{text-decoration:none!important}

a{
/*color: #014A8F;*/
-webkit-transition-property:color;
-webkit-transition-duration: 0.0s;
}

/*指向文字加粗*/
a:hover {
/*color: #0000FF ;*/
-webkit-transition-property:color;
-webkit-transition-duration: 0.0s;
font-weight:bold
}

/*访问过链接红色*/
a:visited, a:visited *, a:active, a:active * {color: #FF0000 !important;}

以下分享内容来自网络收集!

* {text-decoration:none!important;}
::-webkit-scrollbar{
width:3px;
height:6px;
background-color:#fff;
}
::-webkit-scrollbar:hover{
background-color:#eee;
}
::-webkit-scrollbar-thumb{
min-height:5px;
min-width:5px;
-webkit-border-radius:20px;border:1px solid#888;
::-webkit-border-radius:1px;
background-color: #AAA;
}
::-webkit-scrollbar-thumb:hover{
min-height:4px;
min-width:4px;
-webkit-border-radius:20px;border:1px solid#444;
background-color: #AAA;
}
::-webkit-scrollbar-thumb:active{
-webkit-border-radius:20px;border:1px solid#444;
background-color: #AAA;
}

 

赞(0)
未经允许不得转载:飘云 » [Chrome 扩展]Chrome V33+ 版本自建扩展实现Custom.CSS效果的使用
分享到: 更多 (0)