Firefox插件开发：夜间模式-白红宇

Firefox插件开发：夜间模式

阅读量：7038 次

发布时间：2019-06-28

本文共 2682 字，大约阅读时间需要 8 分钟。

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

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

（开篇有些牵强，实在想不出合适的开场白，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;}";//夜间模式 - 为页面添加Stylevar 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 :

请下载最新的Firefox进行使用。

文件创建好后，请在浏览器中输入 about:debugging ，点击临时加载附加组件进行加载。

温馨提示：