不知道有沒有科學依據(jù)，自己感覺黑底白字對視力好些，于是動手加個chrome擴展：

第一步：建個文件夾，名稱比如叫changeColor;

第二步：在changeColor文件夾中建三個文件：manifest.json ?、 ?background.js ? 和?content_script.js

第三步：編輯三個文件?

manifest.json放入以下代碼?

{"name": "Page color","description": "Make the current page color","version": "2.0","permissions": ["activeTab"],"background": {"scripts": ["background.js"],"persistent": false},"browser_action": {"default_title": "change color"},"manifest_version": 2 }

background.js的代碼

// Copyright (c) 2011 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file.// Called when the user clicks on the browser action. chrome.browserAction.onClicked.addListener(function(tab) {// No tabs or host permissions needed!console.log('Turning ' + tab.url + ' red!');chrome.tabs.executeScript(null, {file: "content_script.js"}); });

content_script.js代碼

document.body.style.backgroundColor="black"; document.body.style.color="white"; var myP = document.getElementsByTagName("p"); for (var i=0;i<myP.length;i++) {myP[i].style.backgroundColor = "black"; myP[i].style.color = "white"; }; var myDiv = document.getElementsByTagName("div"); for (var i=0;i<myDiv.length;i++) {myDiv[i].style.backgroundColor = "black"; myDiv[i].style.color = "white"; }; var myBlockquote = document.getElementsByTagName("blockquote"); for (var i=0;i<myBlockquote.length;i++) {myBlockquote[i].style.background = "grey"; myBlockquote[i].style.color = "white"; }; var myA = document.getElementsByTagName("a"); for (var i=0;i<myA.length;i++) { myA[i].style.color = "white"; }; var myul = document.getElementsByTagName("ul"); for (var i=0;i<myul.length;i++) {myul[i].style.background = "black"; myul[i].style.color = "white"; }; var myli = document.getElementsByTagName("li"); for (var i=0;i<myli.length;i++) {myli[i].style.background = "black"; myli[i].style.color = "white"; }; var myspan = document.getElementsByTagName("span"); for (var i=0;i<myspan.length;i++) {myspan[i].style.background = "black"; myspan[i].style.color = "white"; }; var mypre = document.getElementsByTagName("pre"); for (var i=0;i<mypre.length;i++) {mypre[i].style.background = "black"; mypre[i].style.color = "white"; }; var mysection = document.getElementsByTagName("section"); for (var i=0;i<mysection.length;i++) {mysection[i].style.background = "black"; mysection[i].style.color = "white"; }; var mytable = document.getElementsByTagName("table"); for (var i=0;i<mytable.length;i++) {mytable[i].style.background = "black"; mytable[i].style.color = "white"; };

第四步 打開chrome瀏覽器，在地址欄輸入chrome://extensions ? ?或者 點最右邊三個點-更多工具-擴展程序

第五步 ?鉤選 開發(fā)者模式 ，從資源管理器將changeColor文件夾拖放到擴展程序頁面上 或者 點加載已解壓的擴展程序也可。

第六步 在新標簽中打開某個網(wǎng)頁，比如：baidu.com ?，再點地址欄右邊擴展圖標，頁面文字變成黑底白字了。

補充：在打開某個頁面時，發(fā)現(xiàn)還有白塊，于是在白塊上點鼠標右鍵，再點 檢查，在頁面代碼中發(fā)現(xiàn)是 th 和footer 的背景，于是在content_script.js的最后加以上以代碼

var myth = document.getElementsByTagName("th"); for (var i=0;i<myth.length;i++) {myth[i].style.background = "black"; myth[i].style.color = "white"; }; var footer = document.getElementsByTagName("footer"); for (var i=0;i<footer.length;i++) {footer[i].style.background = "black"; footer[i].style.color = "white"; };

然后在chrome擴展頁面按下 ctrl-R ?，之后在有白塊的頁面上點擊地址欄右側的擴展圖標。嗯，找到了上學時看黑板的感覺了。

后記,使用時發(fā)現(xiàn)還會有個別塊背景不是黑色，

干脆將content_script.js中全部內容用以下代碼替換

var all = document.getElementsByTagName("*"); for (var i=0;i<all.length;i++) {all[i].style.background = "black"; all[i].style.color = "white"; };
不過由于選擇元素太多 ，感覺腳本執(zhí)行速度慢了。另外在360瀏覽器下需加上圖標，否則需鉤選 【插件欄顯示擴展名稱】才能看到自己的擴展。

?

轉載于:https://www.cnblogs.com/pu369/p/6381560.html

總結

以上是生活随笔為你收集整理的如何用chrome扩展将网页变成黑底白字，用以保护视力的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。