Context

Hello, I’ll start saying that I’m sorry if my code sucks, I am a backend dev, not a frontend, I know a little of JS.
Btw I am trying to do this Chrome extension with manifest V3 that basically gets all the modules, all the units in the modules, of a Microsoft Learning Path and it exports them as a PDF using the jspdf library.

Structure & Code

My extension has those files:

• content.js
• jspdf.umd.min.js -> This is the jspdf script
• manifest.js
• popup.html
• popup.js
• styles.css

manifest.json

    {
    "manifest_version": 3,
    "name": "MS Learn Exporter",
    "version": "1.0",
    "description": "Esports Microsoft Learning Path in.pdf format.",
    "permissions": ["activeTab", "downloads", "scripting"],
    "host_permissions": [
        "https://learn.microsoft.com/*"
    ],
    "action": {
        "default_popup": "popup.html"
    },
    "web_accessible_resources": [
        {
            "resources": ["jspdf.umd.min.js"],
            "matches": ["<all_urls>"]
        }
    ]
}

popup.js

document.getElementById('startExport').addEventListener('click', () => {
    console.log('Popup button clicked');

    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        if (!tabs || tabs.length === 0) {
            console.error('No active tabs found');
            return;
        }

        chrome.scripting.executeScript({
            target: { tabId: tabs[0].id },
            files: ['content.js']
        }, () => {
            if (chrome.runtime.lastError) {
                console.error('Error injecting script:', chrome.runtime.lastError);
            } else {
                console.log('Content script injected successfully');
                chrome.tabs.sendMessage(tabs[0].id, { action: 'startExport' });
            }
        });
    });
});

content.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "startExport") {
        console.log("Received message to start export");
        loadJsPDF().then(() => {
            startExport();
            sendResponse({ status: "Export started" });
        }).catch(error => {
            console.error('Failed to load jsPDF:', error);
            sendResponse({ status: "Failed to load jsPDF" });
        });
    }
});

function loadJsPDF() {
    return new Promise((resolve, reject) => {
      if (typeof jsPDF !== 'undefined') {
        // jsPDF is already loaded, resolve immediately
        resolve();
      } else {
        // jsPDF is not loaded, try to load it.
        const script = document.createElement('script');
        script.src = chrome.runtime.getURL('./jspdf.umd.min.js'); // Use the UMD version of jsPDF
        script.type = 'text/javascript';
        script.async = true; // Load asynchronously
        script.onload = () => {
          if (typeof jsPDF !== 'undefined') {
            // jsPDF loaded successfully
            resolve();
          } else {
            // jsPDF was not loaded
            reject(new Error('jsPDF is undefined after loading'));
          }
        };
        script.onerror = (error) => {
          reject(new Error(`Failed to load jsPDF: ${error}`));
        };
        document.head.appendChild(script);
      }
    });
  }

// Funzione principale per l'export
function startExport() {
    console.log('Export function started');

    const learningPathLinks = getLearningPathLinks();
    console.log('Found learning paths:', learningPathLinks);

    let completeContent = '';

    (async () => {
        for (const pathLink of learningPathLinks) {
            completeContent += await processLearningPath(pathLink);
        }

        generatePDF(completeContent);
        console.log('Export completed!');
    })();
}

// Ottiene i link dei learning paths
function getLearningPathLinks() {
    return [...document.querySelectorAll('#study-guide-list a')]
        .map(a => a.href)
        .filter((value, index, self) => self.indexOf(value) === index); // Rimuove duplicati
}

// Processa ogni learning path per estrarre le unità tramite API
async function processLearningPath(pathUrl) {
    console.log(`Processing learning path: ${pathUrl}`);

    const pathIdMatch = pathUrl.match(/paths/(.*?)//);
    if (!pathIdMatch) {
        console.warn(`No valid path ID found in URL: ${pathUrl}`);
        return '';
    }

    const pathId = pathIdMatch[1];
    const apiUrl = `https://learn.microsoft.com/api/hierarchy/paths/learn.wwl.${pathId}?locale=en-us`;

    try {
        const response = await fetch(apiUrl, {
            headers: {
                'Accept': 'application/json'
            }
        });

        if (!response.ok) {
            console.error(`API request failed for ${apiUrl}:`, response.status);
            return '';
        }

        const data = await response.json();
        const moduleLinks = data.modules?.[0]?.units?.map(unit => unit.url) || [];

        console.log("Module Links:", moduleLinks);

        let pathContent = '';

        for (const link of moduleLinks) {
            pathContent += await processUnit(link);
        }

        return pathContent;

    } catch (error) {
        console.error(`Error fetching API for module ${pathUrl}:`, error);
        return '';
    }
}

// Scarica il contenuto di ogni unità
async function processUnit(unitUrl) {
    const fullUrl = `https://learn.microsoft.com/en-us${unitUrl}`;
    console.log(`Processing unit: ${fullUrl}`);
    const unitDocument = await fetchPage(fullUrl);

    const content = unitDocument.querySelector('#unit-inner-section');
    if (content) {
        return content.innerText + 'nn';
    } else {
        console.warn(`No content found in unit: ${fullUrl}`);
        return '';
    }
}

// Funzione per ottenere e parse-are una pagina HTML
async function fetchPage(url) {
    const response = await fetch(url);
    const text = await response.text();
    const parser = new DOMParser();
    return parser.parseFromString(text, 'text/html');
}

// Funzione per generare un PDF
function generatePDF(content) {
    if (!window.jspdf || !window.jspdf.jsPDF) {
        console.error('jsPDF is not available yet.');
        return;
    }

    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    const pageWidth = doc.internal.pageSize.getWidth() - 20;

    const splitContent = doc.splitTextToSize(content, pageWidth);
    doc.text(splitContent, 10, 10);

    doc.save('exported_content.pdf');
}

Issue

When I check my browser source the jspdf.umd.min.js is present, but I get those errors:

content.js:8 Failed to load jsPDF: Error: jsPDF is undefined after loading
    at script.onload (content.js:52:20)
(anonymous) @ content.js:8
Promise.catch
(anonymous) @ content.js:7Understand this errorAI
VM4133 content.js:8 Failed to load jsPDF: Error: jsPDF is undefined after loading
    at script.onload (content.js:52:20)

could you help me understand where/what I am doing wrong?

Thank you