Saving the images and videos from your ClassDojo storyline

download-classdojo-media.md

Archived

Please see Patrick330's fork of this script.

ClassDojo changes their site regularly, so a script like this needs regular maintenance. I have decided to archive this project and stop providing updates. Patrick330's fork linked above may be a good alternative.

Original Purpose

ClassDojo is a classroom communication app used to share reports between parents and teachers. Teachers track student behavior and upload photos or videos. The gamification style system teaches developmental skills through real-time feedback.

When your child's teacher shares a photo, it goes on your parent "storyline". Unfortunately, ClassDojo does not provide any means of saving these photos. In fact, the photos are displayed in a <div> using style: background-image('...'); so right-clicking and choosing "Save image" is not an option.

I was able to get Loksly's API code working in Tampermonkey so it displays a Download All button in the top left when you are on home.classdojo.com. Conveniently, when the script runs via Tampermonkey it is able to continue past the CORS error to download the last video and the image on the default new class post. Strangely the one video I actually want is the one that errors and doesn't download, but I was able to get it manually. Hopefully it will work better for future posts.

// ==UserScript==
// @name         ClassDojo Story Feed Download All Button
// @namespace    https://gist.github.com/travishorn/c2b6111a4e63efdbf87a1de84c833ab1?permalink_comment_id=4647516
// @version      0.1
// @description  Download attachments from ClassDojo feed with a "Download All" button in the top left
// @author       Loksly
// @match        https://home.classdojo.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const FIRST_FEED = "https://home.classdojo.com/api/storyFeed?withStudentCommentsAndLikes=true&withArchived=false";

    function getFeed(url) {
        return fetch(url, { // Headers and options here...
        //      "headers": {
        //        "accept": "*/*",
        /*        "accept-language": "es-ES,es;q=0.9,en-US;q=0.8,en;q=0.7",
                "cache-control": "no-cache",
                "pragma": "no-cache",
                "sec-ch-ua": "\"Not.A/Brand\";v=\"8\", \"Chromium\";v=\"114\", \"Google Chrome\";v=\"114\"",
                "sec-ch-ua-mobile": "?0",
                "sec-ch-ua-platform": "\"Linux\"",
                "sec-fetch-dest": "empty",
                "sec-fetch-mode": "cors",
                "sec-fetch-site": "same-origin",
                "x-client-identifier": "Web",
                "x-sign-attachment-urls": "true"
            },
            "referrer": "https://home.classdojo.com/",
            "referrerPolicy": "strict-origin-when-cross-origin",
            "body": null,
            "method": "GET",
            "mode": "cors",
            "credentials": "include" //*/
        }).then((response) => response.json());
    }

    const attachments = [];

    async function downloadAttachments() {
        let feed = await getFeed(FIRST_FEED);
        grabFeedAttachments(feed);
        while (feed._links.next && feed._items.length > 0) {
            feed = await getFeed(feed._links.next.href);
            grabFeedAttachments(feed);
        }

        await Promise.all(attachments.map((attachment, i) => downloadAttachment(attachment, i)));
    }

    function grabFeedAttachments(feed) {
        feed._items.forEach((item) => {
            item.contents.attachments?.forEach((attachment) => {
                if (typeof attachment.path === "string") {
                    attachments.push({
                        url: attachment.path,
                        time: item.time
                    });
                }
            });
        });
    }

    function downloadAttachment(attachment, counter) {
        return fetch(attachment.url).then((t) => {
            return t.blob().then((b) => {
                let a = document.createElement("a");
                a.href = URL.createObjectURL(b);

                let filename = String(counter+1) + "_" + attachment.time.split('T')[0];

                a.setAttribute("download", filename);
                a.click();
                URL.revokeObjectURL(a.href);
            });
        });
    }

    function createDownloadAllButton() {
        const downloadAllButton = document.createElement("button");
        downloadAllButton.textContent = "Download All";
        downloadAllButton.style.position = "fixed";
        downloadAllButton.style.top = "8.3%"; // Adjust Download All button location with style.top and left percentages
        downloadAllButton.style.left = "6%";
        downloadAllButton.style.zIndex = "9999";
        downloadAllButton.addEventListener("click", () => {
            downloadAttachments();
        });

        document.body.appendChild(downloadAllButton);
    }

    // Call the function to create the "Download All" button
    createDownloadAllButton();
})();

When I go on Class Dojo website, the address is: https://home.classdojo.com/#/story
Should I use this or as per scripts above, /api/storyFeed? Anyway, neither works for me... @Loksly script does something, but returns error, other scripts return "undefined" immediately.

https://home.classdojo.com/api/storyFeed?withStudentCommentsAndLikes=true&withArchived=false is still the correct URL. If you go there directly, you can see the json (or whatever) formatted data that Loksly's script parses. If you just need a few pictures/videos, you can find the links in the api/storyFeed data and download them manually.
The code I posted is designed to be used inside the Tampermonkey extension for Chrome. It errors a lot for me too though, probably downloads less than half the pictures/videos because of CORS errors that I haven't found a way to fix.

Huge thank you @Loksly!

Thanks @Loksly for your code. I started the code 3 hours ago, and it's still chugging along.

@neurolizer I tried using Tampermonkey (a pretty cool extension), but somehow it misses many files. For example the download counter goes from to ..., 15, 16, to 405, 406, so on and maybe to 1003, 1004, ...

@neurolizer, yes, it looks like the CORS isn't supported anymore, so try switching to "no-cors" instead.

Just change the word cors 2 times in @Loksly's script above to just no-cors. It worked out for me.