当晚上浏览网页的时候，屏幕太亮，导致眼睛有些刺痛。

接下来，教大家开发一款浏览器夜间模式插件，来保护眼睛。

(开篇有些牵强，实在想不出合适的开场白，hahaha...)

效果图

利用 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 ，点击 临时加载附加组件 进行加载。

温馨提示：

1. Demo存在一些不足，仅供效果演示，入门即可。

2. WebExtensions 可以做很多事情，有兴趣的可以研究一下。

Thanks ~