如何编写Userscript移除Sports Illustrated图片URL的指定压缩参数字符串？

一、先搭好Userscript基础框架 #

Userscript需要开头的元数据块，用来告诉脚本管理器（比如Tampermonkey）脚本的基本信息和运行范围：

// ==UserScript==
// @name         SI泳装板块原图加载工具
// @namespace    your-namespace-here
// @version      0.1
// @description  移除图片URL中的指定压缩参数，加载原始尺寸图片
// @match        *://*.sportsillustrated.com/swimsuit/*  // 匹配SI泳装板块的所有页面
// @grant        none  // 不需要额外权限，用默认浏览器API就行
// ==/UserScript==

二、核心替换逻辑实现 #

你有JS基础，这部分对你来说很简单：

1. 写一个通用函数，接收图片元素，替换其URL里的目标字符串
2. 遍历页面现有图片，执行替换

function fixImageSrc(img) {
    const targetStr = "c_limit%2Ccs_srgb%2Cq_auto:good%2Cw_385/";
    // 处理src属性
    if (img.src.includes(targetStr)) {
        img.src = img.src.replace(targetStr, '');
    }
    // 有的图片会用srcset，也一起处理
    if (img.srcset && img.srcset.includes(targetStr)) {
        img.srcset = img.srcset.replace(targetStr, '');
    }
}

// 处理页面已加载的图片
document.querySelectorAll('img').forEach(fixImageSrc);

三、处理动态加载的图片 #

很多页面会滚动加载新图片，这时候需要用MutationObserver监听DOM变化，自动处理新增的图片：

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        // 遍历新增的DOM节点，筛选出img元素
        mutation.addedNodes.forEach((node) => {
            if (node.tagName === 'IMG') {
                fixImageSrc(node);
            }
            // 如果是包含img的容器，递归处理里面的图片
            else if (node.querySelectorAll) {
                node.querySelectorAll('img').forEach(fixImageSrc);
            }
        });
    });
});

// 配置观察选项：监听子节点添加
observer.observe(document.body, { childList: true, subtree: true });

四、完整代码整合 #

把上面的部分拼起来就是完整脚本，直接复制到Tampermonkey的新建脚本里就行：

// ==UserScript==
// @name         SI泳装板块原图加载工具
// @namespace    your-namespace-here
// @version      0.1
// @description  移除图片URL中的指定压缩参数，加载原始尺寸图片
// @match        *://*.sportsillustrated.com/swimsuit/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const targetStr = "c_limit%2Ccs_srgb%2Cq_auto:good%2Cw_385/";

    function fixImageSrc(img) {
        if (img.src.includes(targetStr)) {
            img.src = img.src.replace(targetStr, '');
        }
        if (img.srcset && img.srcset.includes(targetStr)) {
            img.srcset = img.srcset.replace(targetStr, '');
        }
    }

    // 处理现有图片
    document.querySelectorAll('img').forEach(fixImageSrc);

    // 监听动态新增图片
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.tagName === 'IMG') {
                    fixImageSrc(node);
                } else if (node.querySelectorAll) {
                    node.querySelectorAll('img').forEach(fixImageSrc);
                }
            });
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();

五、测试与调试 #

1. 安装脚本后，打开Sports Illustrated泳装板块的任意页面
2. 右键图片查看“图片地址”，确认目标字符串已经被移除
3. 如果遇到不生效的情况，打开浏览器控制台（F12），检查是否有报错，或者确认图片URL的格式是否和预期一致（比如参数位置不同，可能需要调整替换逻辑）

内容的提问来源于stack exchange，提问作者matts0613