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

不知道有没有科学依据，自己感觉黑底白字对视力好些，于是动手加个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    或者 点最右边三个点-更多工具-扩展程序

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

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

补充：在打开某个页面时，发现还有白块，于是在白块上点鼠标右键，再点 检查，在页面代码中发现是 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  ，之后在有白块的页面上点击地址栏右侧的扩展图标。嗯，找到了上学时看黑板的感觉了。

后记,使用时发现还会有个别块背景不是黑色，

干脆将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"; 

};
不过由于选择元素太多 ，感觉脚本执行速度慢了。另外在360浏览器下需加上图标，否则需钩选 【插件栏显示扩展名称】才能看到自己的扩展。