Firefox插件开发:夜间模式

发布于 2016-09-18  约 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;}";

//夜间模式 - 为页面添加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 ,点击 临时加载附加组件 进行加载。

温馨提示:

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

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


Thanks ~

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

AD :

PHP工程师

阅读 1.4k发布于 2016-09-18

推荐阅读
PHP 笔记
用户专栏

技术的深度和广度只能靠自己努力去发掘,谁也不能替你学习,在这里希望你能有所收获。

119 人关注
57 篇文章
专栏主页
目录