Firefox插件开发：夜间模式

alexnevsky 发布于2019-07-01 12:18 / 3295人阅读

摘要：接下来，教大家开发一款浏览器夜间模式插件，来保护眼睛。目录结构名称不可修改夜间模式夜间模式设置夜间样式需完善夜间模式为页面添加浏览器上面的点击事件右键菜单关于作者公众号小圈儿微信设置当点击进行跳转更多请下载最新的进行使用。

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

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

（开篇有些牵强，实在想不出合适的开场白，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...

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

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

温馨提示：

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

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

Thanks ~

来源：http://mp.weixin.qq.com/s?__b...

AD :

私有云超融合服务器 firefox插件开发 firefox插件夜间vps 开发模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30465.html

简洁优雅地实现夜间模式

摘要：而在正式版中，夜间模式也没有出现。如何开启这项功能，可以参考少数派的这一篇文章，帮你找回夜间模式的款应用。毫不夸张的说，夜间模式现在已经是阅读类的标配了。事实上，日间模式与夜间模式就是给定义并应用两套不同颜色的主题。前言 Android 6.0 Marshmallow 预览版中曾经短暂出现过相关的夜间模式的功能，只是在正式版中被移除了，在Android 7.0 Nougat上，用户们...

zhaofeihao 2019-06-25 10:58 评论0 收藏0
简洁优雅地实现夜间模式

摘要：而在正式版中，夜间模式也没有出现。如何开启这项功能，可以参考少数派的这一篇文章，帮你找回夜间模式的款应用。毫不夸张的说，夜间模式现在已经是阅读类的标配了。事实上，日间模式与夜间模式就是给定义并应用两套不同颜色的主题。前言 Android 6.0 Marshmallow 预览版中曾经短暂出现过相关的夜间模式的功能，只是在正式版中被移除了，在Android 7.0 Nougat上，用户们...

tomlingtm 2019-08-14 17:06 评论0 收藏0
Android夜间模式实践

摘要：现在我采用的就是这种简单粗暴的方法，用户体验比较不友好，后期需要参考知乎的实现，改进实现。参考链接夜间模式最佳实践知乎和简书的夜间模式实现套路夜间模式，你所不知道的坑前言由于项目需要，近段时间开发的夜间模式功能。主流的方案如下： 1、通过切换theme实现 2、通过resource id映射实现 3、通过Android Support Library的实现方案选择切换the...

junfeng777 2019-06-25 11:06 评论0 收藏0
收集整理适用博客建站免费开源Wordpress主题-简约好看的WP主题

摘要：最重要的就是找一个适合自己的主题了。事实上，免费主题也非常多，而且很多的免费主题在功能上和界面美观上已经大大超过了付费的主题。加上这些主题都是开源的，基本上可以在上找得到源码，安全性是没有问题，主题的作者也在不断更新当中。WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的，而且价格还不便宜，这导致了不少的新手朋友们很为难。而有时我们仅仅根据...

番茄西红柿 2021-07-30 14:57 评论0 收藏2637
Android夜间模式官方api实现(AppCompatDelegate)

摘要：比如在中设置为日间模式，而在当前中调用该会显示为夜间模式覆盖原来的模式。只作用于新生成的组件，对原先处于任务栈中的不起作用。当然可以提前在中保存好相关属性值重建时使用。 Android夜间模式官方api实现(AppCompatDelegate) Android夜间模式可以通过手动设置不同的Theme来实现，也有第三方框架可拿来用，Api 23.0.0后可以使用AppCompatDele...

didikee 2019-06-25 11:38 评论0 收藏0