黑底白字html代码,如何用chrome扩展将网页变成黑底白字，用以保护视力

先说个题外话，github上不了咱能理解，毕竟是米帝的东东，但csdn,cnbolg等咱中国人自己的网站在新疆也上不了？杯具啊！

进入正题，不知道有没有科学依据，自己感觉黑底白字对视力好些，于是动手加个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[i].style.backgroundColor= "black";

myP[i].style.color= "white";

};var myDiv = document.getElementsByTagName("div");for (var i=0;i

{

myDiv[i].style.backgroundColor= "black";

myDiv[i].style.color= "white";

};var myBlockquote = document.getElementsByTagName("blockquote");for (var i=0;i

{

myBlockquote[i].style.background= "grey";

myBlockquote[i].style.color= "white";

};var myA = document.getElementsByTagName("a");for (var i=0;i

{

myA[i].style.color= "white";

};var myul = document.getElementsByTagName("ul");for (var i=0;i

{

myul[i].style.background= "black";

myul[i].style.color= "white";

};var myli = document.getElementsByTagName("li");for (var i=0;i

{

myli[i].style.background= "black";

myli[i].style.color= "white";

};var myspan = document.getElementsByTagName("span");for (var i=0;i

{

myspan[i].style.background= "black";

myspan[i].style.color= "white";

};var mypre = document.getElementsByTagName("pre");for (var i=0;i

{

mypre[i].style.background= "black";

mypre[i].style.color= "white";

};var mysection = document.getElementsByTagName("section");for (var i=0;i

{

mysection[i].style.background= "black";

mysection[i].style.color= "white";

};var mytable = document.getElementsByTagName("table");for (var i=0;i

{

mytable[i].style.background= "black";

mytable[i].style.color= "white";

};

第四步 打开chrome浏览器，在地址栏输入chrome://extensions    或者 点最右边三个点-更多工具-扩展程序

第五步  钩选 开发者模式 ，从资源管理器将changeColor文件夹拖放到扩展程序页面上 或者 点加载已解压的扩展程序也可。

第六步 在新标签中打开某个网页，比如：baidu.com  ，再点地址栏右边扩展图标，页面文字变成黑底白字了。

补充：在打开某个页面时，发现还有白块，于是在白块上点鼠标右键，再点 检查，在页面代码中发现是 th 和footer 的背景，于是在content_script.js的最后加以上以代码

var myth = document.getElementsByTagName("th");for (var i=0;i

{

myth[i].style.background= "black";

myth[i].style.color= "white";

};var footer = document.getElementsByTagName("footer");for (var i=0;i

{

footer[i].style.background= "black";

footer[i].style.color= "white";

};

然后在chrome扩展页面按下 ctrl-R  ，之后在有白块的页面上点击地址栏右侧的扩展图标。嗯，找到了上学时看黑板的感觉了。

原文：http://www.cnblogs.com/pu369/p/6381560.html

总结

以上是生活随笔为你收集整理的黑底白字html代码,如何用chrome扩展将网页变成黑底白字，用以保护视力的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。