Nature插入高清图片、图表

Display inline high-res images and tables, ensure left alignment in Nature articles
换行
// ==UserScript==
// @name         Nature插入高清图片、图表
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Display inline high-res images and tables, ensure left alignment in Nature articles
// @author       Lily
// @match        https://www.nature.com/articles/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to replace thumbnail with high-res image
    // Function to insert images after <h3> tag
    function insertImagesAfterH3() {
        // Select the <h3> tag with class c-article-supplementary__title u-h3
        const h3Tags = document.querySelectorAll('h3.c-article-supplementary__title.u-h3');

        h3Tags.forEach(h3Tag => {
            // Find the corresponding <a> tag inside the <h3> for image insertion
            const link = h3Tag.querySelector('a[data-supp-info-image]');

            if (link) {
                // Extract the thumbnail image URL from data-supp-info-image attribute
                const thumbUrl = link.getAttribute('data-supp-info-image');
                if (thumbUrl) {
                    // Convert the thumbnail URL to high-res by replacing part of the URL
                    const highResUrl = thumbUrl.replace(/media\.springernature\.com\/.*?\/springer-static/, 'media.springernature.com/full/springer-static');

                    // Create an <img> element for the high-res image
                    const img = document.createElement('img');
                    img.src = highResUrl;
                    img.style.maxWidth = '100%';
                    img.style.marginTop = '10px';  // Add margin for better spacing

                    // Insert the image after the <h3> tag
                    h3Tag.insertAdjacentElement('afterend', img);
                }
            }
        });
    }


    // Function to fetch and display table content
    async function insertTables() {
        // Select all <a> tags with data-test="table-link"
        const tableLinks = document.querySelectorAll('a[data-test="table-link"]');

        tableLinks.forEach(async (link) => {
            const tableUrl = link.href;
            if (tableUrl) {
                try {
                    // Fetch the table page content
                    const response = await fetch(tableUrl);
                    const text = await response.text();

                    // Create a temporary element to parse the HTML
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(text, 'text/html');

                    // Extract the table content from <div class="c-article-table-container">
                    const tableContainer = doc.querySelector('div.c-article-table-container');
                    const tableImage = doc.querySelector('div.c-article-table-image img');

                    //if (tableContainer) {
                        // Insert the table content after the link
                      //  link.parentNode.insertBefore(tableContainer, link.nextSibling);
                    //}

                    if (tableImage) {
                        // Replace the table image URL with high-res image
                        const tableImageUrl = tableImage.src.replace(/media\.springernature\.com\/.*?\/springer-static/, 'media.springernature.com/full/springer-static');

                        // Create and insert high-res image
                        const highResImg = document.createElement('img');
                        highResImg.src = tableImageUrl;
                        highResImg.style.maxWidth = '100%';
                        highResImg.style.margin = '10px 0';
                        highResImg.style.display = 'block';  // Block-level for left alignment
                        highResImg.style.textAlign = 'left';  // Left-align the image

                        link.parentNode.insertBefore(highResImg, link.nextSibling);
                    } else if (tableContainer){
                        //Insert the table content after the link
                        // Apply left alignment to the table container
                        tableContainer.style.margin = '10px 0';  // Add some margin
                        tableContainer.style.textAlign = 'left';  // Left align the table content
                        tableContainer.style.width = '100%';  // Ensure it takes full width
                        link.parentNode.insertBefore(tableContainer, link.nextSibling);
                    }

                } catch (error) {
                    console.error('Failed to fetch table content:', error);
                }
            }
        });
    }

    // Function to replace inline article images with high-res versions
    function replaceInlineImages() {
        // Select all <a> tags with data-test="img-link" and find <source> tags under <picture>
        const sourceTags = document.querySelectorAll('a[data-test="img-link"] picture source');

        sourceTags.forEach(source => {
            const srcset = source.getAttribute('srcset');
            if (srcset) {
                // Replace "media.springernature.com/*/springer-static" with "full" in the srcset URL
                const highResUrl = srcset.replace(/media\.springernature\.com\/.*?\/springer-static/, 'media.springernature.com/full/springer-static');
                source.setAttribute('srcset', highResUrl);
            }
        });
    }

    // Run all functions to insert high-res images, tables, and inline images
    insertImagesAfterH3();
    insertTables();
    replaceInlineImages();

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