资讯专栏INFORMATION COLUMN

Firefox插件开发:夜间模式

alexnevsky / 3546人阅读

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

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

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

(开篇有些牵强,实在想不出合适的开场白,hahaha...)

</>复制代码

  1. 效果图

利用 WebExtension API 进行开发,开发简单,教程如下。

</>复制代码

  1. 目录结构

</>复制代码

  1. |-- icons
  2. | |-- 48.png
  3. | |-- 96.png
  4. |-- manifest.json
  5. |-- nightMode.js

</>复制代码

  1. mainifest.json(名称不可修改)

</>复制代码

  1. {
  2. "manifest_version": 2,
  3. "name": "夜间模式",
  4. "version": "1.0",
  5. "description": "夜间模式Demo",
  6. "icons": {
  7. "48": "icons/48.png",
  8. "96": "icons/96.png"
  9. },
  10. "background": {
  11. "scripts": ["nightMode.js"]
  12. },
  13. "browser_action": {
  14. "default_icon": {
  15. "48": "icons/48.png",
  16. "96": "icons/96.png"
  17. }
  18. },
  19. "permissions": [
  20. "activeTab",
  21. "contextMenus",
  22. "webRequest",
  23. "webRequestBlocking"
  24. ]
  25. }

</>复制代码

  1. nightMode.js

</>复制代码

  1. //设置夜间样式 - 需完善
  2. var css = ""
  3. + "body {background-color: #3f3f3f;color: #999999;font-weight: lighter;}"
  4. + ".timeline-content .article .article-content,.timeline-content .comment-content{background-color: #2f2f2f;}"
  5. + ".container .article .show-content {color:#b1b1b1;}"
  6. + ".container .article .show-content blockquote {background-color:#555555;}"
  7. + ".post .support-author{background-color: #3f3f3f;}"
  8. + ".wrap-btn {background: rgba(63,63,63,0.9);box-shadow: 0 1px 3px #353535;}"
  9. + ".container .article .show-content .hljs {background-color: #002b36;color: #839496}"
  10. + ".article .show-content,.collection-top .description{color:#b1b1b1;}";
  11. //夜间模式 - 为页面添加Style
  12. var mycode = ""
  13. + "var id_nightmode = document.getElementById("nightmode");"
  14. + "if (id_nightmode == null) {"
  15. + " var style = document.createElement("style");"
  16. + " style.setAttribute("id", "nightmode");"
  17. + " var content = document.createTextNode(""+css+"");"
  18. + " style.appendChild(content);"
  19. + " document.body.appendChild(style);"
  20. + "} else {"
  21. + " document.body.removeChild(id_nightmode);"
  22. + "}";
  23. //浏览器上面的点击事件
  24. chrome.browserAction.onClicked.addListener(
  25. function (tab) {
  26. chrome.tabs.executeScript(tab.id, {
  27. code: mycode
  28. }
  29. );
  30. }
  31. );
  32. //右键菜单
  33. chrome.contextMenus.create({
  34. id: "aboutAuthor",
  35. title: "关于作者",
  36. contexts: ["all"]
  37. });
  38. chrome.contextMenus.create({
  39. id: "WxName",
  40. title: "公众号:IT小圈儿",
  41. contexts: ["all"]
  42. });
  43. chrome.contextMenus.create({
  44. id: "WxID",
  45. title: "微信ID:ToFeelings",
  46. contexts: ["all"]
  47. });
  48. //设置当点击aboutAuthor进行跳转
  49. chrome.contextMenus.onClicked.addListener(function(info, tab) {
  50. if (info.menuItemId == "aboutAuthor") {
  51. chrome.tabs.executeScript(tab.id, {
  52. code: "window.location.href="http://www.jianshu.com/users/bab4cf8c5e39/latest_articles";"
  53. });
  54. }
  55. });

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

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

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

温馨提示:

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

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


Thanks ~

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

AD :

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

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

相关文章

  • 简洁优雅地实现夜间模式

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

    tomlingtm 评论0 收藏0
  • 收集整理适用博客建站免费开源Wordpress主题-简约好看的WP主题

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

    番茄西红柿 评论0 收藏2637

发表评论

0条评论

alexnevsky

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<