There’s a small frustration most people don’t talk about — saving images from Facebook.

You open a post, click the image, wait for it to load, right-click, save… and then repeat the same steps again and again. It’s not difficult, just unnecessarily repetitive.

That’s exactly the kind of problem automation is meant to solve.

So instead of going through multiple clicks every time, I built a simple script that adds a clean “Download Photo” button directly on each post. You just click once — and the image is saved instantly.

No extra tabs. No digging through menus.

Why this matters

If you occasionally download images, it might not feel like a big deal. But if you're someone who:

Collects content for research
Saves references or inspiration
Works with social media data
Or just prefers efficiency

Then those extra clicks add up quickly.

This small tweak removes all that friction.

What this script actually does

Automatically detects images in posts
Adds a download button in a clean, native-looking style
Ignores small icons and irrelevant images
Works continuously as you scroll

It quietly runs in the background and enhances the experience without getting in your way.

What I focused on

Instead of overcomplicating things, I kept it:

Lightweight
Reliable with dynamic page loading
Visually consistent with Facebook’s design
Easy to use without any learning curve

The goal wasn’t to build something flashy — just something that works smoothly every time.

The bigger idea

This is just one example of how small automation can make a noticeable difference.

You don’t always need large systems or heavy tools. Sometimes, a few lines of smart logic can remove repetitive work completely.

And once you start spotting these patterns, you’ll realize how many daily tasks can be simplified the same way.

Final thoughts

If you find yourself repeating the same steps again and again on websites, that’s usually a sign that it can be automated.

This little script turns a multi-step process into a single click — and that’s the kind of efficiency that scales.

If you’re interested in similar ideas around automation, scraping, or simplifying workflows, there’s a lot more you can build from here.

// ==UserScript==
// @name         FB Universal Photo Downloader
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Professional download button that follows the image
// @author       Ali
// @match        https://web.facebook.com/*
// @grant        GM_download
// ==/UserScript==

(function() {
    'use strict';

    const BTN_ID = 'ali-fb-dl-btn';

    // 1. Professional Styling (FB Design System)
    const injectStyles = () => {
        if (document.getElementById('ali-styles')) return;
        const style = document.createElement('style');
        style.id = 'ali-styles';
        style.innerHTML = `
            .${BTN_ID} {
                background-color: #0866FF;
                color: white;
                border: none;
                padding: 7px 14px;
                margin: 10px;
                border-radius: 6px;
                cursor: pointer;
                font-family: "Segoe UI", Helvetica, Arial, sans-serif;
                font-size: 13px;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                z-index: 999;
                transition: background 0.2s;
            }
            .${BTN_ID}:hover { background-color: #0552D1; }
            .${BTN_ID} svg { margin-right: 6px; fill: white; }
        `;
        document.head.appendChild(style);
    };

    const downloadHandler = (imgSrc) => {
        if (!imgSrc) return;
        GM_download({
            url: imgSrc,
            name: `FB_Image_${Date.now()}.jpg`,
            saveAs: true
        });
    };

    const processPosts = () => {
        // Find all images that look like post content (usually have 'scontent' in URL)
        const allImages = document.querySelectorAll('img[src*="scontent"]');

        allImages.forEach(img => {
            // Filter out profile pictures and small icons
            if (img.width < 300) return;

            // Find the closest common container for a post (x1lliihq is the most reliable "block")
            const postContainer = img.closest('.x1yzt60w') || img.closest('.x1lliihq');
            if (!postContainer) return;

            // Strict Check: Don't add if button exists in this container
            if (postContainer.querySelector(`.${BTN_ID}`)) return;

            const btn = document.createElement('button');
            btn.className = BTN_ID;
            btn.innerHTML = `
                <svg width="14" height="14" viewBox="0 0 20 20">
                    <path d="M10 2v8.586L12.293 8.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 10.586V2a1 1 0 112 0zm-7 13a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"/>
                </svg>
                Download Photo
            `;

            btn.onclick = (e) => {
                e.preventDefault();
                e.stopPropagation();
                downloadHandler(img.src);
            };

            // Insert at the top of the post for guaranteed visibility
            postContainer.prepend(btn);
        });
    };

    injectStyles();

    // Check every 2 seconds (More reliable for FB's heavy React updates)
    setInterval(processPosts, 2000);
})();