Pretend ink Screen is a Tampermonkey script. You need to install Tampermonkey before you can use it. Tampermonkey installation and Use tutorial here Tampermonkey oil monkey! A hang your browser to: https://www.v2fy.com/p/004_tampermonkey/

“Pretend ink screen” can turn web content into ink screen, color & reverse color ink screen mode effect

// @name: en-us Fake Ink Screen // @namespace Fake Ink Screen // @match *://*/* // @grant GM_addStyle // @grant GM_getValue // @grant GM_setValue // @grant GM_deleteValue // @grant GM_registerMenuCommand // @run-at document-start // @inject-into content // @version 0.2.3 // @author rice-mouse // @created 2020-07-24 13:02:56 // @updated 2020-08-10 18:51:07 // @description New color & invert ink screen mode, toggle in script menu. // ==/UserScript== (function(){// closure Start GM_addStyle(' html.gray-ink-screen {-webkit-filter: grayscale(100%) brightness(120%); -moz-filter: grayscale(100%) brightness(120%); -ms-filter: grayscale(100%) brightness(120%); -o-filter: grayscale(100%) brightness(120%); filter: grayscale(100%) brightness(120%); } html.dark-ink-screen { -webkit-filter: grayscale(100%) brightness(120%) invert(100%); -moz-filter: grayscale(100%) brightness(120%) invert(100%); -ms-filter: grayscale(100%) brightness(120%) invert(100%); -o-filter: grayscale(100%) brightness(120%) invert(100%); filter: grayscale(100%) brightness(120%) invert(100%); } html.color-ink-screen { -webkit-filter: saturate(60%) contrast(160%); -moz-filter: saturate(100%) contrast(160%); -ms-filter: saturate(60%) contrast(160%); -o-filter: saturate(60%) contrast(160%); filter: saturate(60%) contrast(160%); } html.gray-ink-screen, html.gray-ink-screen body, html.gray-ink-screen .ink-background, html.dark-ink-screen, html.dark-ink-screen body, html.dark-ink-screen .ink-background { background-color: rgb(200, 200, 200) ! important } html.color-ink-screen, html.color-ink-screen body, html.color-ink-screen .ink-background { background-color: rgb(198, 198, 198) ! important } html.dark-ink-screen .ink-font, html.gray-ink-screen .ink-font { color: rgb(66, 66, 66) ! important } html.color-ink-screen .ink-font { color: rgb(98, 98, 98) ! important } html.gray-ink-screen * { text-shadow: 0 0 1.2 rgba(0, 0, 0,.24), 0 0.5px rgba(0, 0, 0,.5)} HTML. 0 0 1.2 rem rgba (0, 0, 0, 2), 0 0. 5 px rgba (0, 0, 0, 4)} `); const modes = ['gray-ink-screen', 'color-ink-screen', 'dark-ink-screen'] const toggleMode = (modeIndex)=>{ for(const className of modes) { document.body.parentElement.classList.remove(className) } document.body.parentElement.classList.add(modes[modeIndex]) } ToggleMode (GM_getValue('mode', 0)) GM_registerMenuCommand(' switch ',()=>{let mode = GM_getValue('mode', 0)) 0) mode = mode>=2 ? Zero: ++mode toggleMode(mode) GM_setValue('mode', mode) }) window.addEventListener('load', () => { const inkEl = async(el) => { const fontColor = window.getComputedStyle(el).color.match(/\d+/g); const rgbVal = window.getComputedStyle(el).backgroundColor.match(/\d+/g); if(! fontColor || ! rgbVal) return; if ( fontColor && +fontColor[0] + +fontColor[1] + +fontColor[2] > 255 && +fontColor[0] + +fontColor[1] + +fontColor[2] <  588 ) { el.classList.add('ink-font'); } if (rgbVal[3] && rgbVal[3] === '0') return; if ( (+rgbVal[0] + +rgbVal[1] + +rgbVal[2]) / (rgbVal[3] ? +rgbVal[3] : 1) > 640 ) el.classList.add('ink-background'); }; document.body.querySelectorAll('*').forEach((el) => inkEl(el) ); const obOptions = { childList: true, subtree: true, attributes: true, characterData: true, attributeOldValue: false, characterDataOldValue: false, attributeFilter: [], }; const observer = new MutationObserver(async (records, observer) => { observer.disconnect(); Const els = records // Change type to characterData, .filter((el) => /^characterData$/i.test(el.type)).map((el) => el.target); // Add the changed element to the collection. // Change the type to childList. Filter ((el) => /^childList$/i.test(el.type)).foreach ((el) => {el.addedNodes. ForEach ((node) => {el.addedNodes. els.push(node)); }); For await (el of els) {if(el.nodeType === 1) {inkEl(el); El.queryselectorall ('*').foreach (e=>inkEl(e))}} observe.observe (document.body, obOptions); }); observer.observe(document.body, obOptions); }); // closure End})()Copy the code

Using the tutorial

After pasting the script into the oil Monkey editor, press Ctrl+ S to save the script, automatically jump to the script list page, and then refresh the page. The script takes effect immediately.

Pretend ink screen download link

Raw.githubusercontent.com/zhaoolee/Ch…

summary

The ink screen changes the color of the screen to a comfortable black and white, which is easier on the eyes.

At the end (I need your support)

  • This article is part of the Chrome plugin heroes List project. The project address: github.com/zhaoolee/Ch…

  • This article is part of the ChromeAppHeroes project. Github link: github.com/zhaoolee/Ch…

  • Chrome plugin heroes list, write a Chinese manual for excellent Chrome plugin, let Chrome plugin heroes benefit mankind, if you like this project, I hope you can add a 🌟 star for this project.

  • ChromeAppHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human, If you like this project, I hope you can add a star 🌟 to this project.