Removes all the clutter from NHK articles and turns it into a purer reading experience. Press F to toggle furigana.
// ==UserScript==
// @name Cleaner NHK
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Removes all the clutter from NHK articles and turns it into a purer reading experience. Press F to toggle furigana.
// @author Digicrest
// @match https://www3.nhk.or.jp/news/easy/*.html
// @icon https://www.google.com/s2/favicons?sz=64&domain=nhk.or.jp
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
removeElements();
restyleElements();
removeImagesFromArticle();
registerFuriganaToggleKey();
setPageZoom(200);
})();
function removeElements() {
const elementsToRemove = [
{ name: 'share', selector: 'article > nav > div.share' },
{ name: 'color caution (hide)', selector: '.about-word-color__caution.hide-sp' },
{ name: 'color caution (show)', selector: '.about-word-color__caution.show-sp' },
{ name: 'video', selector: '#js-article-figure' },
{ name: "footer", selector: "#nhkfooter" },
{ name: "about-tab", selector: '#easy-wrapper > header > div.header-about-easy.js-accordion-wrapper' },
{ name: "sidebar", selector: "#easy-wrapper > div.l-container > aside" },
{ name: "header", selector: "#nhkheader" },
{ name: "header 2", selector: "#easy-wrapper > header" },
{ name: "original furigana toggle", selector: "#js-article-date" },
{ name: "survey", selector: "#easy-wrapper > div.l-container > main > section.enquete" },
{ name: "toggle colors", selector: "#easy-wrapper > div.l-container > main > article > div.article-main__colors" },
{ name: "tools container", selector: "#easy-wrapper > div.l-container > main > article > div.article-main__tools" },
{ name: "article navigation", selector: "#easy-wrapper > div.l-container > main > article > nav" },
];
elementsToRemove.forEach(element => {
const elementToRemove = document.querySelector(element.selector);
if (elementToRemove) {
elementToRemove.remove();
} else {
console.warn(`Element ${element.name} not found`);
}
});
}
function restyleElements() {
const elementsToRestyle = [
{
name: "html",
selector: "html",
style: {
"min-height": "100vh",
"display": "flex",
}
},
{
name: "body",
selector: "body",
style: {
"flex": "1",
"max-width": "1080px",
"margin": "0 auto",
"font-family": "system-ui"
}
},
{
name: "main",
selector: "#easy-wrapper .l-main",
style: {
"max-width": "none",
"padding": "2em",
}
},
{
name: "container",
selector: "#easy-wrapper .l-container",
style: {
"width": "auto",
"padding": "0",
"margin": "0",
}
},
{
name: "title",
selector: "#easy-wrapper .article-main__title",
style: {
"padding": "0",
"line-height": "1em",
"font-family": "none",
"text-align": "center",
"font-size": "1.5em",
"color": "#888"
}
},
{
name: "date",
selector: "#easy-wrapper .article-main__date",
style: {
"text-align": "center",
"-webkit-touch-callout": "none",
"-webkit-user-select": "none",
"-khtml-user-select": "none",
"-moz-user-select": "none",
"-ms-user-select": "none",
"user-select": "none",
}
},
{
name: "colored text",
selector: "#easy-wrapper :is(.colorN, .colorL, .colorC)",
style: {
"font-weight": "normal"
},
multiple: true
}
];
const restyleElement = (originalElement, newElement) => {
if (originalElement && newElement) {
Object.assign(originalElement.style, newElement.style);
};
};
elementsToRestyle.forEach(element => {
if (element.hasOwnProperty('multiple') && element.multiple) {
const elementsToRestyle = document.querySelectorAll(element.selector);
elementsToRestyle.forEach(elementToRestyle => restyleElement(elementToRestyle, element));
} else {
const elementToRestyle = document.querySelector(element.selector);
restyleElement(elementToRestyle, element)
};
});
};
function registerFuriganaToggleKey(toggleKey="f") {
const wrapper = document.querySelector("#easy-wrapper");
if (wrapper) {
document.addEventListener("keydown", (event) => {
if (event.key === toggleKey) {
wrapper.classList.toggle("is-no-ruby"); // toggle furigana
}
});
} else {
console.warn('No Wrapper found for #easy-wrapper');
}
}
function removeImagesFromArticle() {
const images = document.querySelectorAll("#js-article-body img");
images.forEach(image => { image.remove(); });
}
function setPageZoom(percentage=100) {
document.querySelector("body").style.zoom = `${percentage}%`;
}