I am trying to write a chrome extension and I want to take screenshot of certain html element of facebook page. I thought of writing html 2 canvas myself, but there already is html2canvas library. I decided to use it in my content script on Facebook page, it is giving me error saying

Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. 

Here is my manifest.json file:

{
     ...
    "manifest_version": 3,
    "content_scripts": [
        {
            "matches": [
                "https://*.facebook.com/*"
            ],
            "js": [
                "html2canvas.js",
                "constants.js",
                "common/jquery.js",
                "content/index.js"
            ]
        }
    ]
}

My content_script has following line. I tried console logging and it is working fine. But,

$(window).on('load', function () {

$('body').on('click', "div", async function (e) {
    const ariaLabel = $(this).attr("aria-label");
    if (ariaLabel?.startsWith(COMMENT_DIV_ARIA_LABEL)) {
        const canvas = await html2canvas($(this)?.[0]);
    }

    if (ariaLabel?.startsWith(REPLY_DIV_ARIA_LABEL)) {
        const replyLink = $(this).find("a").attr("href");
    }
})

});

I am getting back the canvas (I tried console logging, but haven't checked its output), but it is coming with the error as mentioned above. Can anyone tell me a right way to inject the script? Or maybe even tell me what I am doing wrong? Also, I tried adding CSP in the manifest.json file.