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);
    }
})();