Chrome Extension: What permissions do I need to avoid execute inline event handler error

Question

I'm using the https://github.com/antimatter15/jsgif and I was wondering if anyone knows why this happens.

I now only get this as my return "data:image/gif;base64,R0lGODlhOw=="

This is my code

    var GetCanvas = document.getElementById("GifHere");
        var contextOfCanvas = GetCanvas.getContext("2d");
        var encoder = new GIFEncoder();
        encoder.setRepeat(0);
        encoder.setDelay(1000);
        GetCanvas.width = 1600;
        GetCanvas.height = 800;
        encoder.setSize(1600,800);      

        contextOfCanvas.fillStyle = "rgb(255,255,255)";  
        contextOfCanvas.fillRect(0,0,GetCanvas.width, GetCanvas.height); 
        encoder.start();
        console.log(encoder.start());

        var GifLength = $(".LayerImages").length + 1;
        StartingLength = GifLength;
        StartPosition = 1;
        loadGifImages(encoder,GifLength);


        var imageOf = GetCanvas.toDataURL("image/"+SelectedValue);
        var FileType = SelectedValue;
        var imageData = imageOf;
        var RemoveLength = "data:image/png;base64,";
        var stringLength = parseInt(imageData.length) - parseInt(RemoveLength.length);
        var sizeInBytes = 4 * Math.ceil((stringLength / 3))*0.5624896334383812;
        var FileSize = sizeInBytes / 1024;

This is my loadGifImages function

    function loadGifImages(encoder,length){

    
    var GetCanvas = document.getElementById("GifHere");
    var contextOfCanvas = GetCanvas.getContext("2d");
    
    var Canvas = document.getElementById("Can"+StartPosition);
    console.log(Canvas);
    var CanvasContext = Canvas.getContext("2d");
    var image0 = new Image();
    
    var imageData = CanvasContext.getImageData(0,0,1600,800);
    encoder.addFrame(imageData,true);
    console.log(imageData);
    StartPosition++;
    length--;


    if(length == 1 && StartPosition == StartingLength){
        isGifDone = true;
        encoder.finish();
        
        var gif = encoder.stream().getData();
        var url = 'data:image/gif;base64,'+encode64(gif);
        
        console.log(url);
        /*  document.getElementById("ImageSaved").src = 'data:image/gif;base64,'+encode64(encoder.stream().getData());
    */  }else{

        loadGifImages(encoder,length);
    }

Everything seems to work but it seems that something inside that library is giving the chrome extension an error. I tried adding the content_security_policy to my manifest.json but it doesn't seem to be working with that. This is my manifest.json file

{
    "name": "Better Photo Editor",
    "version": "0.0.0.1",
    "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'",
    "description": "Better Photo Editor",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": ["CSS/style.css"]
        }
    ],

    "browser_action": {
        "default_icon": "Images/Drawing.png",
        "default_title": "",
        "default_popup": "Home.html"

    },
    "permissions": ["<all_urls>","http://*/","https://*/","activeTab","unlimitedStorage"],
    "manifest_version": 2
}

Edit: I think it has something to do with the writebyte in the GIFEncoder.js but I am unsure. I can't trace it back to anything, though I am still trying. If anyone can help, I would appreciate it!! I don't have any inline javascript in any of the html pages. I know this will probably be asked, making it clear now that it isn't that.

See [relaxing CSP](https://stackoverflow.com/a/25721457). This gif library uses inline scripts. — wOxxOm, May 06 '21 at 18:37
I don't think it's that, I think it has something to do with the library I'm using. Let me see what I have wrong, cause I'm trying to write image data to it but I don't think I have that set up correctly. The libraries demo doesn't show an example of that so I will have to check and see — Austin Viens-DeRuissseau, May 06 '21 at 18:47
This library in its current form needs you to relax the CSP. Ideally though you should reconfigure or even rewrite the library not to use inline js handlers in html. — wOxxOm, May 06 '21 at 19:03
I fixed up some of the code but the only url it returns is "data:image/gif;base64,R0lGODlhOw==" and not the rest of the code for the image. I will update question with new code — Austin Viens-DeRuissseau, May 06 '21 at 19:03
Note that I'm assuming `Image.html` from the error message belongs to the library. — wOxxOm, May 06 '21 at 19:05
@wOxxOm what do you mean? The only js files I am using from that library are b64.js, GIFEncoder.js, LZWEncoder.js, and NeuQuant.js — Austin Viens-DeRuissseau, May 06 '21 at 19:05
All my comments above were referring to your original question which showed an error in Image.html that's fixed by relaxing CSP. Now that you edited the question, the problem needs further investigation. Try debugging it in devtools. Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. — wOxxOm, May 06 '21 at 19:07
This is what I have my devtools saying https://gyazo.com/483417309b58e8d354e7a0ea7b52eae6 . I believe it is the usage of how the library works. With not many examples of this library, It's unfortunate I can't figure it out. I will keep trying though. I figured it'd be like the demos but I guess it's different — Austin Viens-DeRuissseau, May 06 '21 at 19:10

Chrome Extension: What permissions do I need to avoid execute inline event handler error

0 Answers0