Tampermonkey 方法删除页面上所有“.jpg.webp”和“.png.webp”图像的“.webp”扩展名？

Question

我必须下载并重新上传大量图片才能工作。一般来说，我从webpage/server下载的图片格式是“XXX.jpg.webp”和“XXX.png.webp”。不幸的是，在将它们重新上传到其他地方后，我使用的系统将不接受“.webp”文件扩展名。下载“.webp”文件类型的图像后，我必须将它们转换为纯“.jpg”和“.png”sans“.webp”才能用于我的目的。

目前，我已经编写了一个 Tampermonkey 脚本（在 Javascript 中）试图解决这个问题，但只有当我在单独的选项卡中打开给定的“.webp”图像并且然后右键单击并保存。此方法在保存时删除“.webp”的图像，但当且仅当我在单独的选项卡中打开它并右键单击以保存时。相反，我想剥离“.webp”扩展名的图像，并在我找到它们的页面上将它们转换为“.png”或“.jpg”格式，而不必在单独的选项卡中打开图像根本。这是我正在使用的当前脚本 - 同样，它仅在我在单独的选项卡中打开图像时有效：

document.querySelectorAll('img[src$=".jpg.webp"]').forEach(item =>
    item.src = item.src.replace('.webp', ''));

document.querySelectorAll('img[src$=".png.webp"]').forEach(item =>
    item.src = item.src.replace('.webp', ''));

这是我为以下网页执行此操作的示例：https://www.shareably.net/mom-helps-single-dad-groceries/。请注意图像如何具有“.webp”扩展名。

我怎样才能改变上面的脚本或获得一个解决方案来转换原始网页上的这些图像而不是在单独的选项卡中？它最终会为我节省大量时间。任何和所有指导将不胜感激。干杯！

Answer 1

reddit.com/r/AskProgramming 上的一位很棒的用户帮助我找到了解决方案。好像我很接近。这是新的工作脚本：

document.querySelectorAll('img[src$=".webp"]').forEach(item => {
  item.src = item.src.replace('.webp', '');
  item.srcset = '';
});

解决方案的讨论可以在这里找到：https://old.reddit.com/r/AskProgramming/comments/lslvvb/tampermonkey_method_to_drop_the_webp_extension/

Tampermonkey 方法删除页面上所有“.jpg.webp”和“.png.webp”图像的“.webp”扩展名？

Tampermonkey method to drop the ".webp" extension for all ".jpg.webp" and ".png.webp" images on a page?

javascript

png

jpeg

tampermonkey

webp