微信号:ToFeelings

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

Firefox插件开发:夜间模式

2016-09-12 19:14 壁虎

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


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


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


 
猜您喜欢 这样一位冉冉升起的技术网红,究竟有什么“吸金”本领? 想了解机器学习?你需要知道的十个基础算法 2016 iWeb峰会上海站 工具应用专场回顾 Thinkphp整合ucenter