Add Vibrant.js library to firefox web extension

Question

I have a web extension for firefox based on manifest_version: 2. My extension interacts with the elements of a certain third-party site, sometimes modifying them or supplementing the interface with my own elements. Recently, I needed to add the Vibrant.js library to determine the color palette of an image. Here are the ways I tried to use it:

1. I tried to add it to the header in my content_scripts via a link to cdnjs.com and got the error “ReferenceError: Vibrant is not defined” when trying to create the main element. It looks something like this:

    let script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/vibrant.js/1.0.0/Vibrant.min.js';
    document.head.appendChild(script);

2. Also, I tried to download the release file and added it as content_scripts and got the error “SecurityError: The operation is insecure.”, I was able to do this with jszip.min.js before and it worked fine.

My problem is not only specific to vibrant, but also to most other libraries that I can't use after following the same steps.

Answer 1

In general, I really had everything worked out with non-minified version of the library file, but as it turned out the images from which I wanted to get information were protected from the function of working with pixels through CORS. The only thing that I managed and that works at the moment is transferring the functionality into a background script and connecting the library file as a background script.