資料共有ツールのDLスクリプト

概

B00kr00l、めちゃ不便なので取得スクリプト作りましたが、諸々によりアドオン公開はだるそうなのでここにコードだけ貼っときます。
既にどなたかがアドオンを作っていたが、消されたり動かなくなったりしている模様？
Generated by Gemini。構造眺めて教えたら作ってくれました。

使い方

・DLしたいものの1ページ目を開く。
・"開発ツール/デベロッパーモード"を開き、"コンソール"内に以下のスプリクトを貼り付け実行。
・サイトの仕様上¹ 、画質が画面表示サイズに依存する。コンソールは別ウィンドウで実行すること強く推奨。

スクリプト

(async () => {
    // 1. jsPDFライブラリを動的に読み込む
    const loadJsPDF = () => new Promise((resolve) => {
        const script = document.createElement('script');
        script.src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js";
        script.onload = resolve;
        document.head.appendChild(script);
    });

    if (!window.jspdf) {
        console.log("📚 ライブラリを読み込み中...");
        await loadJsPDF();
    }

    const { jsPDF } = window.jspdf;

    // 2. 設定と要素の特定
    const chipText = document.querySelector('.page-chip')?.innerText || "";
    const totalMatch = chipText.match(/\/\s*(\d+)/);
    const totalPages = parseInt(prompt("全ページ数を入力してください", totalMatch ? totalMatch[1] : "10"));
    const waitTime = 2000; // サーバーからの画像取得待ち（通信が遅いなら増やして）

    const getCanvas = () => document.querySelector('div[class*="material-canvas"] canvas');
    const nextBtn = document.querySelector('.next-btn');

    if (!getCanvas()) return console.error("Canvasが見つかりません。教材を開いていますか？");

    console.log(`🚀 PDF化を開始します... (全 ${totalPages} ページ)`);

    let pdf = null;

    for (let i = 1; i <= totalPages; i++) {
        const canvas = getCanvas();
        const imgData = canvas.toDataURL('image/jpeg', 1.0);
        const w = canvas.width;
        const h = canvas.height;

        // 初回のみPDFインスタンスを作成（Canvasのサイズに合わせる）
        if (!pdf) {
            pdf = new jsPDF({
                orientation: w > h ? 'l' : 'p',
                unit: 'px',
                format: [w, h]
            });
        } else {
            pdf.addPage([w, h], w > h ? 'l' : 'p');
        }

        // PDFに画像を貼り付け
        pdf.addImage(imgData, 'JPEG', 0, 0, w, h);
        console.log(`✅ ${i} / ${totalPages} ページ処理中...`);

        // 次のページへ
        if (i < totalPages && nextBtn) {
            nextBtn.click();
            await new Promise(r => setTimeout(r, waitTime));
        }
    }

    // 3. 保存
    pdf.save(`BookRoll_Export_${Date.now()}.pdf`);
    console.log("🎉 PDFの生成が完了しました！");
})();

ページ数取得はカット可か。
お好みで適当に改変してください。

ちょっと見たことまとめ

・3層のcanvasを積層していて、画像化pdfが最下層に描画される。
・マーカーだかメモだかを上2層に描画。
・鯖から送られるのはサイズ変更済みの画像ファイルのみ。表示サイズ変更のトリガーを奪えば実際の表示サイズでない綺麗な画像が取得できる...のかも？
・フレームワークはvue。
・システム作成元の表記あり。内製？なのかな？

1. なんと、このサービスはサーバー側でクライアントの表示サイズに合わせてpdfを画像化し、送りつけてるらしい。そのため元のpdfはおろか、圧縮前の綺麗な画像すら取得できない。 ↩