Cannot load Haarcascade file in a Firefox Extension

1

Hello everyone,
I’m new to OpenCV and I’m trying to make use of the Haar-cascade face detection in an extension for Firefox.

I declared the xml file as a web accessible resource in the JSON file and I also set the runtime file url according to the Mozilla documentation.

When I try printing the file in the console everything seems fine, but when I try to load it with the cascade-classifier it can’t open the file.

This works fine

function testXML(){
  // URL or path to your XML file
  let face_url = browser.runtime.getURL('haarcascade_frontalface_default.xml');

  // Fetch the XML file
  fetch(face_url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not OK');
      }
      return response.text();
    })
    .then(xmlText => {
      // Process the XML text data
      console.log('XML file content:', xmlText);
      // Parse or manipulate the XML content as needed
    })
    .catch(error => {
      console.error('Error fetching the XML file:', error);
    });
}

But here I get this message:
[ERROR:0@4.715] global persistence.cpp:519 open Can’t open file: ‘moz-extension://b5fda0e1-3d96-44a3-84b6-5690d91d5429/haarcascade_frontalface_default.xml’ in read mode

function modifyImage(image) {  

  let src = cv.imread(image);
  let gray = new cv.Mat();
  cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
  let faces = new cv.RectVector();
  let eyes = new cv.RectVector();
  let face_url = browser.runtime.getURL('haarcascade_frontalface_default.xml');
  let faceCascade = new cv.CascadeClassifier(face_url);
  
  // detect faces
  let msize = new cv.Size(0,0);
  console.log('test1');
  faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
  console.log('test2');
  for (let i = 0; i < faces.size(); i++) {
    let roiGray = gray.roi(faces.get(i));
    let roiSrc = src.roi(faces.get(i));
    let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
    let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
                              faces.get(i).y + faces.get(i).heigt);
    console.log('Face: point1: ', point1, ' point2: ', point2);

    /* detect eyes in face ROI
    eyeCascade.detectMultiScale(roiGray, eyes);
    for (let j = 0; j < eyes.size(); ++j) {
        let point1 = new cv.Point(eyes.get(j).x, eyes.get(j).y);
        let point2 = new cv.Point(eyes.get(j).x + eyes.get(j).width,
                                  eyes.get(j).y + eyes.get(j).heigt);
        console.log('Face: point1: ', point1, ' point2: ', point2);
    }*/
    roiGray.delete(); roiSrc.delete();
  }
  src.delete(); gray.delete(); faceCascade.delete();
  eyeCascade.delete(); faces.delete(); eyes.delete();
}