当晚上浏览网页的时候，屏幕太亮，导致眼睛有些刺痛。
接下来，教大家开发一款浏览器夜间模式插件，来保护眼睛。
（开篇有些牵强，实在想不出合适的开场白，hahaha...）
效果图
Firefox插件开发：夜间模式 效果图
利用 WebExtension API 进行开发，开发简单，教程如下。
目录结构
|-- icons
| |-- 48.png
| |-- 96.png
|-- manifest.json
|-- nightMode.js
mainifest.json(名称不可修改)
{
"manifest_version": 2,
"name": "夜间模式",
"version": "1.0",
"description": "夜间模式Demo",
"icons": {
"48": "icons/48.png",
"96": "icons/96.png"
},
"background": {
"scripts": ["nightMode.js"]
},
"browser_action": {
"default_icon": {
"48": "icons/48.png",
"96": "icons/96.png"
}
},
"permissions": [
"activeTab",
"contextMenus",
"webRequest",
"webRequestBlocking"
]
}
nightMode.js
//设置夜间样式 - 需完善
var css = ""
+ "body {background-color: #3f3f3f;color: #999999;font-weight: lighter;}"
+ ".timeline-content .article .article-content,.timeline-content .comment-content{background-color: #2f2f2f;}"
+ ".container .article .show-content {color:#b1b1b1;}"
+ ".container .article .show-content blockquote {background-color:#555555;}"
+ ".post .support-author{background-color: #3f3f3f;}"
+ ".wrap-btn {background: rgba(63,63,63,0.9);box-shadow: 0 1px 3px #353535;}"
+ ".container .article .show-content .hljs {background-color: #002b36;color: #839496}"
+ ".article .show-content,.collection-top .description{color:#b1b1b1;}";
//夜间模式 - 为页面添加Style
var mycode = ""
+ "var id_nightmode = document.getElementById('nightmode');"
+ "if (id_nightmode == null) {"
+ " var style = document.createElement('style');"
+ " style.setAttribute('id', 'nightmode');"
+ " var content = document.createTextNode('"+css+"');"
+ " style.appendChild(content);"
+ " document.body.appendChild(style);"
+ "} else {"
+ " document.body.removeChild(id_nightmode);"
+ "}";
//浏览器上面的点击事件
chrome.browserAction.onClicked.addListener(
function (tab) {
chrome.tabs.executeScript(tab.id, {
code: mycode
}
);
}
);
//右键菜单
chrome.contextMenus.create({
id: "aboutAuthor",
title: "关于作者",
contexts: ["all"]
});
chrome.contextMenus.create({
id: "WxName",
title: "公众号：IT小圈儿",
contexts: ["all"]
});
chrome.contextMenus.create({
id: "WxID",
title: "微信ID：ToFeelings",
contexts: ["all"]
});
//设置当点击aboutAuthor进行跳转
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == "aboutAuthor") {
chrome.tabs.executeScript(tab.id, {
code: "window.location.href='http://www.jianshu.com/users/bab4cf8c5e39/latest_articles';"
});
}
});
更多API : https://developer.mozilla.org/en-US/Add-ons/
请下载最新的Firefox进行使用。
文件创建好后，请在浏览器中输入 about:debugging ，点击 临时加载附加组件 进行加载。
温馨提示：
- Demo存在一些不足，仅供效果演示，入门即可。
- WebExtensions 可以做很多事情，有兴趣的可以研究一下。
Thanks ~
