어떻게 크롬으로 웹 페이지를 검은 바탕에 흰 글자로 확장해서 시력을 보호합니까

과학적인 근거가 있는지 모르겠지만 검은 바탕에 흰 글자가 시력에 좋다고 느껴서 크롬 확장을 했습니다.
첫 번째 단계: 예를 들어changeColor라는 폴더를 만듭니다.
두 번째 단계:changeColor 폴더에 세 개의 파일을 만듭니다:manifest.json  、  background.js 및 contentscript.js
3단계: 세 파일 편집
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://extensions아니면 맨 오른쪽 세 개. - 더 많은 도구. - 확장기.
다섯 번째 단계는 개발자 모드를 선택합니다. 자원 관리자에서changeColor 폴더를 확장 프로그램 페이지에 끌어다 놓거나 압축이 풀린 확장 프로그램을 불러올 수도 있습니다.
여섯 번째 단계는 새 탭에서 웹 페이지를 엽니다. 예를 들어:baidu.com, 주소 표시줄 오른쪽 확장 아이콘을 누르면 페이지 텍스트가 검은 바탕에 흰 글자로 바뀝니다.
보충: 어떤 페이지를 열었을 때 흰 블록이 있는 것을 발견하여 흰 블록에 오른쪽 단추를 눌렀다가 다시 검사를 눌렀다. 페이지 코드에서th와footer의 배경이 발견되었고contentscript.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"; 

};

그리고 크롬 확장 페이지에서 ctrl-R을 누르고 흰 블록이 있는 페이지에서 주소 표시줄 오른쪽에 있는 확장 아이콘을 누르십시오.응, 학교 다닐 때 칠판을 보는 느낌을 찾았어.
후기, 사용 시 일부 블록의 배경이 검은색이 아닌 것을 발견할 수 있다.
차라리 콘텐츠를script.js의 모든 내용을 다음 코드로 대체합니다

var all = document.getElementsByTagName("*");
for (var i=0;i)
{
   all[i].style.background = "black"; 
   all[i].style.color = "white"; 

};
           ，          。   360         ，      【         】         。