Chrome夜间模式插件开发

夜幕降临的时候，就是我最痛苦的时候（寝室按时关灯），想到要面对那苍白刺眼的屏幕心里就发怵，总这么下去不是个办法，因为平时用Chrome多一点，就萌生了给它写一个夜间模式的插件，类似UC的那种。

这个插件共有四个文件：background.js、manifest.json、night.png、style.css。

manifest.json:

{
"name": "Good night",
"manifest_version": 2,
"version": "2.1",
  "description": "夜间模式, by leeXsen",
"background": { "scripts": ["background.js"] },
  "permissions": [
       "tabs", "notifications", "http://*/*", "https://*/*"
],
      "browser_action": {
         "default_icon": "night.png"
｝,
"icons": {
 "128": "night.png",
 "16": "night.png"
 }
}

background.js:

var flag = 1;
var nightNotice, normalNotice;

//当点击应用的图标时触发
chrome.browserAction.onClicked.addListener(function() {
flag = -flag;

if (flag == -1) {
chrome.tabs.insertCSS(null, {file:"style.css", allFrames: true});
nightNotice = webkitNotifications.createNotification('night.png', 'Good night', '已切换到夜间模式');
nightNotice.show(); //桌面通知
} else {
normalNotice = webkitNotifications.createNotification('night.png', 'Good night', '已切换到正常模式，刷新网页生效');
normalNotice.show();
}
});

//当标签页内容改变时触发
chrome.tabs.onUpdated.addListener(function(tabId) {
if (flag == -1)
chrome.tabs.insertCSS(tabId, {file:"style.css", allFrames: true}); //在ID为tabId的标签页中插入style.css, allFrames:true是给所有frame注入CSS
});

style.css:

*{background-color:black} //只有这一行是我加的，无奈，CSS太菜
*{background-image: none !important;background: none !important;background:#080808 !important;color:#ccc!important;border-color:#555555 !important;scrollbar-arrow-color:#CCCCCC !important;scrollbar-base-color:#2266AA !important;scrollbar-shadow-color:#2266AA !important;scrollbar-face-color:#080808 !important;scrollbar-highlight-color:#2266AA !important;scrollbar-dark-shadow-color:#2266AA !important;scrollbar-3d-light-color:#2266AA !important;scrollbar-track-color:#FDF5E6 !important;}a,a *{color:#84E4E3 !important;text-decoration:none !important;}a:visited,a:visited *,a:active,a:active *{color:#5588AA !important;}a:hover,a:hover *{color:#AADD88 !important;background:#666666 !important;}input,select,option,button,textarea{color:#AAAAAA !important;background:#555555 !important;border:#666666 !important;border-color: #666666 #ccc #ccc #666666 !important;}input:focus,select:focus,option:focus,button:focus,textarea:focus,input:hover,select:hover,option:hover,button:hover,textarea:hover {color:#BBBBBB !important;background:#5A5A5A !important;border-color: #777777 #999999 #999999 #777777 !important;}input[type=button],input[type=submit],input[type=reset],input[type=image] {border-color: #ccc #666666 #666666 #ccc !important;}input[type=button]:focus,input[type=submit]:focus,input[type=reset]:focus,input[type=image]:focus, input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=image]:hover {color:#BBBBBB !important;background:#666666 !important; border-color: #AAAAAA #ccc #ccc #AAAAAA !important;}

很乱吧，这个是在网上随便找的。

好了，就这样吧，嫌麻烦的同学可以下载下面的附件。

这就是我最近两天干的事，算一个总结吧。

chrome_plugin_good_night.zip