The Wall Street Journal Reader Mode with Screenshot

reader mode for the Wall street journal, with screenshot functionality
Wrap lines
// ==UserScript==
// @name         The Wall Street Journal Reader Mode with Screenshot
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  reader mode for the Wall street journal, with screenshot functionality
// @author       Pika
// @match        *://*.wsj.com/*
// @match        *://wsj.com/*
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to hide specific elements and apply reader mode styles
    function enhanceReadingExperience() {
        // Hide specific divs
        const divs = document.querySelectorAll('div[aria-label="Most Popular News"]');
        const divb = document.querySelectorAll('div[aria-label="What to Read Next"]');
        const footerWrappers = document.querySelectorAll('.desktop.css-1md89ke-FooterWrapper.ei5oymj3');

        divs.forEach(div => div.style.display = 'none');
        divb.forEach(div => div.style.display = 'none');
        footerWrappers.forEach(footer => footer.style.display = 'none');

        // Hide other common unrelated elements (ads, related articles, etc.)
        const selectors = [
            '.ad-container',            // Example class for ads
            '.related-articles',        // Example class for related articles
            '.subscription-banner',     // Example class for subscription banners
            '#newsletter-signup',       // Example id for newsletter signups
            '.social-share-buttons',    // Example class for social share buttons
        ];

        selectors.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(el => el.style.display = 'none');
        });

        // Avoid adding duplicate styles
        if (!document.getElementById('wsj-reader-mode-style')) {
            // Apply CSS styles to center the main content with equal left and right margins
            const style = document.createElement('style');
            style.id = 'wsj-reader-mode-style';
            style.textContent = `
                body {
                    margin: 0;
                    padding: 0;
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                    flex-direction: column;
                    max-width: 100%;
                    overflow-x: hidden;
                }
                .article-container.css-e98gkk.ejl518w17 {
                    max-width: 800px; /* Adjust the max width as needed */
                    margin-left: auto;
                    margin-right: auto;
                    padding: 20px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    background-color: #fff;
                }
                @media (min-width: 1024px) {
                    .article-container.css-e98gkk.ejl518w17 {
                        padding-left: 60px;
                        padding-right: 40px;
                    }
                }
            `;
            document.head.appendChild(style);
        }
    }

    // Function to capture the article content as an image
    function captureArticleScreenshot() {
        const article = document.querySelector('.article-container.css-e98gkk.ejl518w17');
        const headline = document.querySelector('.css-1lvqw7f-StyledHeadline.e1ipbpvp0');
        let fileName = 'article_screenshot.png'; // Default file name

        if (headline) {
            // Use the headline text as the file name, replacing spaces with underscores and limiting the length
            fileName = headline.textContent.trim().replace(/\s+/g, '_').substring(0, 50) + '.png';
        }

        if (article) {
            html2canvas(article, { useCORS: true }).then(canvas => {
                // Convert canvas to image
                const img = canvas.toDataURL("image/png");
                // Create a download link
                const link = document.createElement('a');
                link.href = img;
                link.download = fileName; // Use dynamic file name
                link.click();
            });
        } else {
            alert('Article content not found!');
        }
    }

    // Add a screenshot button to the page
    function addScreenshotButton() {
        const button = document.createElement('button');
        button.textContent = '一键截图';
        button.style.position = 'fixed';
        button.style.bottom = '20px';
        button.style.right = '20px';
        button.style.zIndex = '1000';
        button.style.padding = '10px';
        button.style.backgroundColor = '#000000';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.addEventListener('click', captureArticleScreenshot);
        document.body.appendChild(button);
    }

    // Run the function immediately
    enhanceReadingExperience();
    addScreenshotButton();

    // Optional: Observe changes in the DOM to apply styles and hide new elements dynamically
    const observer = new MutationObserver(enhanceReadingExperience);
    observer.observe(document.body, { childList: true, subtree: true });

})();
欢迎访问Greasy Fork镜像
