Skip to content

Instantly share code, notes, and snippets.

@cemiu

cemiu/gifpause.user.js

Created June 14, 2024 11:37
Show Gist options
  • Save cemiu/bd5aa7f1051ec2acad167ab681f06998 to your computer and use it in GitHub Desktop.
Save cemiu/bd5aa7f1051ec2acad167ab681f06998 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cemiu created this gist Jun 14, 2024.
    50 changes: 50 additions & 0 deletions gifpause.user.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    // ==UserScript==
    // @name GifPause: Pause and Resume annoying GIF Animations on Right Click
    // @author cemiu
    // @namespace https://cemiu.net/
    // @license MIT
    // @version 1.4
    // @description Pause and resume GIF and WebP animations on right-click
    // @match *://*/*
    // @grant none
    // ==/UserScript==

    (function() {
    'use strict';

    const ORIGINAL_SRC_ATTR = 'data-original-src';

    function isAnimatedImage(target) {
    return target.hasAttribute(ORIGINAL_SRC_ATTR) || target.src.endsWith('.gif') || target.src.endsWith('.webp');
    }

    async function toggleAnimation(target) {
    if (target.hasAttribute(ORIGINAL_SRC_ATTR)) {
    target.src = target.getAttribute(ORIGINAL_SRC_ATTR);
    target.removeAttribute(ORIGINAL_SRC_ATTR);
    } else {
    let response = await fetch(target.src, { mode: 'cors' });
    let blob = await response.blob();
    let img = new Image();
    img.src = URL.createObjectURL(blob);

    img.onload = () => {
    let canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0);
    target.setAttribute(ORIGINAL_SRC_ATTR, target.src);
    target.src = canvas.toDataURL('image/png');
    URL.revokeObjectURL(img.src);
    };
    }
    }

    document.addEventListener('contextmenu', event => {
    let target = event.target;
    if (target.tagName === 'IMG' && isAnimatedImage(target)) {
    event.preventDefault();
    toggleAnimation(target);
    }
    }, false);
    })();