Readable
Make the current page readable and remove all the junk and ads.
Installation:
Drag this button to your bookmarks bar:
Source Code:
javascript:(function(){
/* Find main content using multiple strategies */
function findMainContent() {
/* Strategy 1: Look for article tags and common content selectors */
const selectors = [
'article',
'main article',
'[role="main"] article',
'.post-content',
'.entry-content',
'.article-content',
'.post-body',
'.article-body',
'#article-body',
'.story-body',
'.content-body',
'main',
'[role="main"]',
'.main-content',
'#main-content',
'.post',
'.entry',
'.content'
];
for (let selector of selectors) {
const element = document.querySelector(selector);
if (element && element.innerText.length > 500) {
return element;
}
}
/* Strategy 2: Find element with most paragraph tags */
let maxParagraphs = 0;
let bestElement = null;
const containers = document.querySelectorAll('div, section, article');
containers.forEach(container => {
const paragraphs = container.querySelectorAll('p');
const textLength = container.innerText.length;
if (paragraphs.length > maxParagraphs && textLength > 500) {
maxParagraphs = paragraphs.length;
bestElement = container;
}
});
return bestElement;
}
/* Find article title */
function findTitle() {
/* Try multiple title sources */
const titleSelectors = [
'h1',
'article h1',
'.entry-title',
'.article-title',
'.post-title',
'[class*="title"]',
'title'
];
for (let selector of titleSelectors) {
const element = document.querySelector(selector);
if (element && element.innerText) {
return element.innerText.trim();
}
}
/* Fallback to page title */
return document.title;
}
/* Extract clean content */
function extractContent(element) {
const clone = element.cloneNode(true);
/* Remove unwanted elements */
const removeSelectors = [
'script',
'style',
'iframe',
'form',
'button',
'.social-share',
'.share',
'.comments',
'.comment',
'.ad',
'.ads',
'.advertisement',
'.sidebar',
'.related',
'.newsletter',
'.popup',
'.modal',
'[class*="share"]',
'[class*="social"]',
'[id*="share"]',
'[id*="social"]'
];
removeSelectors.forEach(selector => {
clone.querySelectorAll(selector).forEach(el => el.remove());
});
/* Clean attributes */
clone.querySelectorAll('*').forEach(el => {
/* Keep only essential attributes */
const keepAttrs = ['href', 'src', 'alt'];
Array.from(el.attributes).forEach(attr => {
if (!keepAttrs.includes(attr.name)) {
el.removeAttribute(attr.name);
}
});
});
return clone.innerHTML;
}
/* Create readable view */
function createReadableView(title, content) {
/* Create new document */
const newDoc = document.implementation.createHTMLDocument(title);
/* Add meta viewport for mobile */
const viewport = newDoc.createElement('meta');
viewport.name = 'viewport';
viewport.content = 'width=device-width, initial-scale=1';
newDoc.head.appendChild(viewport);
/* Add styles */
const style = newDoc.createElement('style');
style.textContent = `
* {
box-sizing: border-box;
}
body {
font-family: Georgia, 'Times New Roman', serif;
line-height: 1.6;
color: #333;
background: #f9f9f9;
margin: 0;
padding: 20px;
}
.container {
max-width: 700px;
margin: 0 auto;
background: white;
padding: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5em;
line-height: 1.2;
margin-bottom: 0.5em;
color: #222;
}
h2 {
font-size: 1.8em;
margin-top: 1.5em;
margin-bottom: 0.5em;
color: #333;
}
h3 {
font-size: 1.4em;
margin-top: 1.2em;
margin-bottom: 0.5em;
color: #444;
}
p {
margin-bottom: 1.3em;
font-size: 1.1em;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 1.5em auto;
}
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
blockquote {
border-left: 4px solid #ddd;
margin: 1.5em 0;
padding-left: 1.5em;
color: #666;
font-style: italic;
}
pre {
background: #f4f4f4;
padding: 1em;
overflow-x: auto;
border-radius: 4px;
}
code {
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
.meta {
color: #666;
font-size: 0.9em;
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.back-link {
position: fixed;
top: 20px;
left: 20px;
background: #333;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
}
.back-link:hover {
background: #555;
text-decoration: none;
}
@media (max-width: 768px) {
body {
padding: 10px;
}
.container {
padding: 20px;
}
h1 {
font-size: 2em;
}
.back-link {
position: static;
display: inline-block;
margin-bottom: 20px;
}
}
`;
newDoc.head.appendChild(style);
/* Add content */
const container = newDoc.createElement('div');
container.className = 'container';
/* Add back link */
const backLink = newDoc.createElement('a');
backLink.href = window.location.href;
backLink.className = 'back-link';
backLink.textContent = '← Back to original';
newDoc.body.appendChild(backLink);
/* Add title */
const titleElement = newDoc.createElement('h1');
titleElement.textContent = title;
container.appendChild(titleElement);
/* Add metadata */
const meta = newDoc.createElement('div');
meta.className = 'meta';
meta.textContent = `Source: ${window.location.hostname}`;
container.appendChild(meta);
/* Add content */
const contentDiv = newDoc.createElement('div');
contentDiv.innerHTML = content;
container.appendChild(contentDiv);
newDoc.body.appendChild(container);
/* Replace current document */
document.open();
document.write(newDoc.documentElement.outerHTML);
document.close();
}
/* Main execution */
try {
const mainContent = findMainContent();
if (!mainContent) {
alert('Could not find article content on this page.');
return;
}
const title = findTitle();
const content = extractContent(mainContent);
createReadableView(title, content);
} catch (error) {
alert('Error creating readable view: ' + error.message);
}
})();