国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Firefox插件開發:夜間模式

alexnevsky / 3433人閱讀

摘要:接下來,教大家開發一款瀏覽器夜間模式插件,來保護眼睛。目錄結構名稱不可修改夜間模式夜間模式設置夜間樣式需完善夜間模式為頁面添加瀏覽器上面的點擊事件右鍵菜單關于作者公眾號小圈兒微信設置當點擊進行跳轉更多請下載最新的進行使用。

當晚上瀏覽網頁的時候,屏幕太亮,導致眼睛有些刺痛。

接下來,教大家開發一款瀏覽器夜間模式插件,來保護眼睛。

(開篇有些牽強,實在想不出合適的開場白,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.
        });
    }
});

更多API : https://developer.mozilla.org...

請下載最新的Firefox進行使用。

文件創建好后,請在瀏覽器中輸入 about:debugging ,點擊 臨時加載附加組件 進行加載。

溫馨提示:

Demo存在一些不足,僅供效果演示,入門即可。

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


Thanks ~

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

AD :

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/30465.html

相關文章

  • 簡潔優雅地實現夜間模式

    摘要:而在正式版中,夜間模式也沒有出現。如何開啟這項功能,可以參考少數派的這一篇文章,幫你找回夜間模式的款應用。毫不夸張的說,夜間模式現在已經是閱讀類的標配了。事實上,日間模式與夜間模式就是給定義并應用兩套不同顏色的主題。 前言 Android 6.0 Marshmallow 預覽版中曾經短暫出現過相關的夜間模式的功能,只是在正式版中被移除了,在Android 7.0 Nougat上,用戶們...

    tomlingtm 評論0 收藏0
  • 收集整理適用博客建站免費開源Wordpress主題-簡約好看的WP主題

    摘要:最重要的就是找一個適合自己的主題了。事實上,免費主題也非常多,而且很多的免費主題在功能上和界面美觀上已經大大超過了付費的主題。加上這些主題都是開源的,基本上可以在上找得到源碼,安全性是沒有問題,主題的作者也在不斷更新當中。WordPress最重要的就是找一個適合自己的主題了。好一點的WordPress主題基本上都是要收費的,而且價格還不便宜,這導致了不少的新手朋友們很為難。而有時我們僅僅根據...

    番茄西紅柿 評論0 收藏2637

發表評論

0條評論

alexnevsky

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<