InvalidStateError: CanvasRenderingContext2D.putImageData: Failed to extract Uint8ClampedArray from ImageData (security check failed?)

This issue is encountered when working with images using OpenCV.js in the Firefox Add-ons.

However, this problem is not available in Firefox(Use Firefox to visit the OpenCV website) as well as in the Chrome plugin.

How do I fix this in the Firefox Add-ons?

ps: Add-ons source code:https://github.com/janet9527/addons-test
And I used https://www.baidu.com/ as a test site for the Add-ons.

The Firefox plugin reported an error:

Use Firefox to visit the OpenCV website:

chrome add-on run success:

I see you addon doesn’t have any host permissions, only the activeTab. So maybe you are missing host permission for the page where you try to run it?

Other than that I can’t tell, the whole error message looks weird. Maybe it will be better to report it either to OpenCV or to bugzilla (ideally with some example).

Thank you for your reply!

But In Firefox, from version 56 onwards, extensions automatically get host permissions for their own origin.

In addition, I don’t think it’s OpenCV’s problem, because using Firefox to access OpenCV’s official website works fine.

By the way,How do I bugzilla?

Yes extensions have host for their own pages but your code runs on baidu.com so it needs host permissions for that. But I’ve actually noticed you have content script registered for that domain so you do have host permissions after all.

In any case, I’ve tried to run it in my testing Firefox ESR 102 and it works :slight_smile:. But it will fail when I run it in my Firefox 118. So this is some kind of regression.

You should report it here:
https://bugzilla.mozilla.org/enter_bug.cgi#h=dupes|Firefox
(you need to create account if you don’t have one yet)

Then provide exact steps to reproduce the issue (submit also your extension code attachment). Mention also that it works in ESR 102.

1 Like

Thank you for your reply!

I have report it.

By the way,How can i get the Firefox ESR 102 version?

You can download ESR 102 here:

Although, I’m actually not sure it worked in 102, it only didn’t print the error. But I remember the old ESR version had some issues printing errors raised in the content script, so that may the reason :slight_smile:. It’s best if you test it yourself.

Thank you for your replay!
I just tested it in ESR 102 version,
The processed picture is not displayed in the bottom And the console did not report an error :sob:

As a workaround you can do

let theImage = ctx.createImageData(width, height);
for(var i = 0; i < theImage.data.length; i++) theImage.data[i] = data[i];
ctx.putImageData(theImage, dx, dy);

instead of

let theImage = new ImageData(data, width);
ctx.putImageData(theImage, dx, dy);

This fixed it for me, and I hope this helps any other poor soul who’s stumbled upon this thread.